@public-ui/theme-default 2.0.14 → 2.1.0

package/dist/index.mjs

@@ -1,920 +1,183 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var loglevel = {exports: {}};
-
-/*
-* loglevel - https://github.com/pimterry/loglevel
-*
-* Copyright (c) 2013 Tim Perry
-* Licensed under the MIT license.
-*/
-
-(function (module) {
-	(function (root, definition) {
-	    if (module.exports) {
-	        module.exports = definition();
-	    } else {
-	        root.log = definition();
-	    }
-	}(commonjsGlobal, function () {
-
-	    // Slightly dubious tricks to cut down minimized file size
-	    var noop = function() {};
-	    var undefinedType = "undefined";
-	    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
-	        /Trident\/|MSIE /.test(window.navigator.userAgent)
-	    );
-
-	    var logMethods = [
-	        "trace",
-	        "debug",
-	        "info",
-	        "warn",
-	        "error"
-	    ];
-
-	    var _loggersByName = {};
-	    var defaultLogger = null;
-
-	    // Cross-browser bind equivalent that works at least back to IE6
-	    function bindMethod(obj, methodName) {
-	        var method = obj[methodName];
-	        if (typeof method.bind === 'function') {
-	            return method.bind(obj);
-	        } else {
-	            try {
-	                return Function.prototype.bind.call(method, obj);
-	            } catch (e) {
-	                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
-	                return function() {
-	                    return Function.prototype.apply.apply(method, [obj, arguments]);
-	                };
-	            }
-	        }
-	    }
-
-	    // Trace() doesn't print the message in IE, so for that case we need to wrap it
-	    function traceForIE() {
-	        if (console.log) {
-	            if (console.log.apply) {
-	                console.log.apply(console, arguments);
-	            } else {
-	                // In old IE, native console methods themselves don't have apply().
-	                Function.prototype.apply.apply(console.log, [console, arguments]);
-	            }
-	        }
-	        if (console.trace) console.trace();
-	    }
-
-	    // Build the best logging method possible for this env
-	    // Wherever possible we want to bind, not wrap, to preserve stack traces
-	    function realMethod(methodName) {
-	        if (methodName === 'debug') {
-	            methodName = 'log';
-	        }
-
-	        if (typeof console === undefinedType) {
-	            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
-	        } else if (methodName === 'trace' && isIE) {
-	            return traceForIE;
-	        } else if (console[methodName] !== undefined) {
-	            return bindMethod(console, methodName);
-	        } else if (console.log !== undefined) {
-	            return bindMethod(console, 'log');
-	        } else {
-	            return noop;
-	        }
-	    }
-
-	    // These private functions always need `this` to be set properly
-
-	    function replaceLoggingMethods() {
-	        /*jshint validthis:true */
-	        var level = this.getLevel();
-
-	        // Replace the actual methods.
-	        for (var i = 0; i < logMethods.length; i++) {
-	            var methodName = logMethods[i];
-	            this[methodName] = (i < level) ?
-	                noop :
-	                this.methodFactory(methodName, level, this.name);
-	        }
-
-	        // Define log.log as an alias for log.debug
-	        this.log = this.debug;
-
-	        // Return any important warnings.
-	        if (typeof console === undefinedType && level < this.levels.SILENT) {
-	            return "No console available for logging";
-	        }
-	    }
-
-	    // In old IE versions, the console isn't present until you first open it.
-	    // We build realMethod() replacements here that regenerate logging methods
-	    function enableLoggingWhenConsoleArrives(methodName) {
-	        return function () {
-	            if (typeof console !== undefinedType) {
-	                replaceLoggingMethods.call(this);
-	                this[methodName].apply(this, arguments);
-	            }
-	        };
-	    }
-
-	    // By default, we use closely bound real methods wherever possible, and
-	    // otherwise we wait for a console to appear, and then try again.
-	    function defaultMethodFactory(methodName, _level, _loggerName) {
-	        /*jshint validthis:true */
-	        return realMethod(methodName) ||
-	               enableLoggingWhenConsoleArrives.apply(this, arguments);
-	    }
-
-	    function Logger(name, factory) {
-	      // Private instance variables.
-	      var self = this;
-	      /**
-	       * The level inherited from a parent logger (or a global default). We
-	       * cache this here rather than delegating to the parent so that it stays
-	       * in sync with the actual logging methods that we have installed (the
-	       * parent could change levels but we might not have rebuilt the loggers
-	       * in this child yet).
-	       * @type {number}
-	       */
-	      var inheritedLevel;
-	      /**
-	       * The default level for this logger, if any. If set, this overrides
-	       * `inheritedLevel`.
-	       * @type {number|null}
-	       */
-	      var defaultLevel;
-	      /**
-	       * A user-specific level for this logger. If set, this overrides
-	       * `defaultLevel`.
-	       * @type {number|null}
-	       */
-	      var userLevel;
-
-	      var storageKey = "loglevel";
-	      if (typeof name === "string") {
-	        storageKey += ":" + name;
-	      } else if (typeof name === "symbol") {
-	        storageKey = undefined;
-	      }
-
-	      function persistLevelIfPossible(levelNum) {
-	          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
-
-	          if (typeof window === undefinedType || !storageKey) return;
-
-	          // Use localStorage if available
-	          try {
-	              window.localStorage[storageKey] = levelName;
-	              return;
-	          } catch (ignore) {}
-
-	          // Use session cookie as fallback
-	          try {
-	              window.document.cookie =
-	                encodeURIComponent(storageKey) + "=" + levelName + ";";
-	          } catch (ignore) {}
-	      }
-
-	      function getPersistedLevel() {
-	          var storedLevel;
-
-	          if (typeof window === undefinedType || !storageKey) return;
-
-	          try {
-	              storedLevel = window.localStorage[storageKey];
-	          } catch (ignore) {}
-
-	          // Fallback to cookies if local storage gives us nothing
-	          if (typeof storedLevel === undefinedType) {
-	              try {
-	                  var cookie = window.document.cookie;
-	                  var cookieName = encodeURIComponent(storageKey);
-	                  var location = cookie.indexOf(cookieName + "=");
-	                  if (location !== -1) {
-	                      storedLevel = /^([^;]+)/.exec(
-	                          cookie.slice(location + cookieName.length + 1)
-	                      )[1];
-	                  }
-	              } catch (ignore) {}
-	          }
-
-	          // If the stored level is not valid, treat it as if nothing was stored.
-	          if (self.levels[storedLevel] === undefined) {
-	              storedLevel = undefined;
-	          }
-
-	          return storedLevel;
-	      }
-
-	      function clearPersistedLevel() {
-	          if (typeof window === undefinedType || !storageKey) return;
-
-	          // Use localStorage if available
-	          try {
-	              window.localStorage.removeItem(storageKey);
-	          } catch (ignore) {}
-
-	          // Use session cookie as fallback
-	          try {
-	              window.document.cookie =
-	                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
-	          } catch (ignore) {}
-	      }
-
-	      function normalizeLevel(input) {
-	          var level = input;
-	          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
-	              level = self.levels[level.toUpperCase()];
-	          }
-	          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
-	              return level;
-	          } else {
-	              throw new TypeError("log.setLevel() called with invalid level: " + input);
-	          }
-	      }
-
-	      /*
-	       *
-	       * Public logger API - see https://github.com/pimterry/loglevel for details
-	       *
-	       */
-
-	      self.name = name;
-
-	      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
-	          "ERROR": 4, "SILENT": 5};
-
-	      self.methodFactory = factory || defaultMethodFactory;
-
-	      self.getLevel = function () {
-	          if (userLevel != null) {
-	            return userLevel;
-	          } else if (defaultLevel != null) {
-	            return defaultLevel;
-	          } else {
-	            return inheritedLevel;
-	          }
-	      };
-
-	      self.setLevel = function (level, persist) {
-	          userLevel = normalizeLevel(level);
-	          if (persist !== false) {  // defaults to true
-	              persistLevelIfPossible(userLevel);
-	          }
-
-	          // NOTE: in v2, this should call rebuild(), which updates children.
-	          return replaceLoggingMethods.call(self);
-	      };
-
-	      self.setDefaultLevel = function (level) {
-	          defaultLevel = normalizeLevel(level);
-	          if (!getPersistedLevel()) {
-	              self.setLevel(level, false);
-	          }
-	      };
-
-	      self.resetLevel = function () {
-	          userLevel = null;
-	          clearPersistedLevel();
-	          replaceLoggingMethods.call(self);
-	      };
-
-	      self.enableAll = function(persist) {
-	          self.setLevel(self.levels.TRACE, persist);
-	      };
-
-	      self.disableAll = function(persist) {
-	          self.setLevel(self.levels.SILENT, persist);
-	      };
-
-	      self.rebuild = function () {
-	          if (defaultLogger !== self) {
-	              inheritedLevel = normalizeLevel(defaultLogger.getLevel());
-	          }
-	          replaceLoggingMethods.call(self);
-
-	          if (defaultLogger === self) {
-	              for (var childName in _loggersByName) {
-	                _loggersByName[childName].rebuild();
-	              }
-	          }
-	      };
-
-	      // Initialize all the internal levels.
-	      inheritedLevel = normalizeLevel(
-	          defaultLogger ? defaultLogger.getLevel() : "WARN"
-	      );
-	      var initialLevel = getPersistedLevel();
-	      if (initialLevel != null) {
-	          userLevel = normalizeLevel(initialLevel);
-	      }
-	      replaceLoggingMethods.call(self);
-	    }
-
-	    /*
-	     *
-	     * Top-level API
-	     *
-	     */
-
-	    defaultLogger = new Logger();
-
-	    defaultLogger.getLogger = function getLogger(name) {
-	        if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
-	            throw new TypeError("You must supply a name when creating a logger.");
-	        }
-
-	        var logger = _loggersByName[name];
-	        if (!logger) {
-	            logger = _loggersByName[name] = new Logger(
-	                name,
-	                defaultLogger.methodFactory
-	            );
-	        }
-	        return logger;
-	    };
-
-	    // Grab the current global log variable in case of overwrite
-	    var _log = (typeof window !== undefinedType) ? window.log : undefined;
-	    defaultLogger.noConflict = function() {
-	        if (typeof window !== undefinedType &&
-	               window.log === defaultLogger) {
-	            window.log = _log;
-	        }
-
-	        return defaultLogger;
-	    };
-
-	    defaultLogger.getLoggers = function getLoggers() {
-	        return _loggersByName;
-	    };
-
-	    // ES6 default export, for compatibility
-	    defaultLogger['default'] = defaultLogger;
-
-	    return defaultLogger;
-	})); 
-} (loglevel));
-
-const H=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o={};const c=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c});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);}L.add(e);},T=(e,t)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[e]=="object"&&o.A11yUi.Themes[e]!==null&&typeof o.A11yUi.Themes[e][t]=="string"?o.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(""))));}},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=T(a,"PROPERTIES"),i=T(a,"GLOBAL"),m=T(a,e.tagName);L.has(a)===!1&&K(a,i);const y=[n,i,m];Q(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),F(t,s),e.style.display=a;},O=e=>{e.loglevel==="debug"&&v.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c.get(t.target);M(t.target,a,s),R(t.target,a);}};let p;try{p=new MutationObserver(X);}catch{p=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>H(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
-
-var rgbaConvert = {exports: {}};
-
-rgbaConvert.exports     = arr;
-rgbaConvert.exports.arr = arr;
-rgbaConvert.exports.obj = obj;
-rgbaConvert.exports.css = css;
-rgbaConvert.exports.hex = hex;
-rgbaConvert.exports.num = num;
-
-function arr(data) {
-  var a = parse(data);
-  if (a.length == 3) {
-    return a.concat(255)
-  } else {
-    a[3] = Math.round(a[3]);
-    return a
-  }
-}
-
-function obj(data) {
-  var a = parse(data);
-  return {
-    r: a[0],
-    g: a[1],
-    b: a[2],
-    a: a.length == 3
-      ? 255
-      : Math.round(a[3])
-  }
-}
-
-function css(data) {
-  var a = parse(data);
-  if (a.length == 3) a.push(255);
-
-  return a[3] == 255
-    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
-    : a[3] == 0
-      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
-      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
-}
-
-function hex(data) {
-  var a = parse(data);
-  if (a.length == 3) a.push(255);
-  var opaque = a[3] == 255;
-  var r = num2hex(a[0]);
-  var g = num2hex(a[1]);
-  var b = num2hex(a[2]);
-  var a = num2hex(Math.round(a[3]));
-  var is = isshort(r, g, b, a);
-  if (opaque) {
-    return is
-      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
-      : '#' + r + g + b
-  }
-  return is
-    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
-    : '#' + r + g + b + a
-}
-
-function num(data) {
-  var a = parse(data);
-  if (a.length == 3) a.push(255);
-  else a[3] = Math.round(a[3]);
-  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
-}
-
-function parse(data) {
-  if (typeof data == 'string') {
-    data = data.toLowerCase();
-    return name(data)
-      || hex3(data)
-      || hex6(data)
-      || rgb(data)
-      || rgba(data)
-      || [0, 0, 0, 255]
-  }
-  return object(data)
-    || array(data)
-    || number(data)
-    || [0, 0, 0, 255]
-}
-
-function num2hex(num) {
-  var s = num.toString(16);
-  return s.length == 1
-    ? '0' + s
-    : s
-}
-
-function isshort(r, g, b, a) {
-  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
-           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
-  return h.indexOf(r) != -1
-    && h.indexOf(g) != -1
-    && h.indexOf(b) != -1
-    && h.indexOf(a) != -1
-}
-
-function name(str) {
-  if (str == 'red')     return [255, 0, 0]
-  if (str == 'green')   return [0, 255, 0]
-  if (str == 'blue')    return [0, 0, 255]
-  if (str == 'black')   return [0, 0, 0]
-  if (str == 'white')   return [255, 255, 255]
-  if (str == 'cyan')    return [0, 255, 255]
-  if (str == 'gray')    return [128, 128, 128]
-  if (str == 'grey')    return [128, 128, 128]
-  if (str == 'magenta') return [255, 0, 255]
-  // ok, not the real css `pink` but my personal `magenta` alias
-  // `pink` is simpler than `fuchsia`, whatever...
-  if (str == 'pink')    return [255, 0, 255]
-  if (str == 'yellow')  return [255, 255, 0]
-}
-
-function hex2num(str) {
-  return str.length == 1
-    ? parseInt(str + str, 16)
-    : parseInt(str, 16)
-}
-
-function hex3(str) {
-  var s = str.replace(/^#/,'');
-  var l = s.length;
-  if (l == 3 || l == 4) {
-    var r = hex2num(s[0]);
-    var g = hex2num(s[1]);
-    var b = hex2num(s[2]);
-    var a = l == 3
-      ? 255
-      : hex2num(s[3]);
-
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
-
-    return [r, g, b, a]
-  }
-}
-
-function hex6(str) {
-  var s = str.replace(/^#/,'');
-  var l = s.length;
-  if (l == 6 || l == 8) {
-    var r = hex2num(s.slice(0, 2));
-    var g = hex2num(s.slice(2, 4));
-    var b = hex2num(s.slice(4, 6));
-    var a = l == 6
-      ? 255
-      : hex2num(s.slice(6, 8));
-
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
-
-    return [r, g, b, a]
-  }
-}
-
-function getnum(val, integer) {
-  if (typeof val != 'number') return -1
-  if (integer === true && Math.floor(val) !== val) return -1
-  return val >= 0 && val <= 255
-    ? val
-    : -1
-}
-
-function object(obj) {
-  if (Object.prototype.toString.call(obj) === '[object Object]'
-    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
-    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
-    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
-    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
-    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
-    }
-  }
-}
-
-function array(arr) {
-  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
-    var r = getnum(arr[0],   true);
-    var g = getnum(arr[1],   true);
-    var b = getnum(arr[2],   true);
-    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
-    }
-  }
-}
-
-function number(num) {
-  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
-    var a = num >> 24 & 255;
-    var r = num >> 16 & 255;
-    var g = num >> 8  & 255;
-    var b = num & 255;
-    return [r, g, b, a]
-  }
-}
-
-function rgb(str) {
-  if (str.substr(0, 4) == 'rgb(') {
-    str = str.match(/^rgb\(([^)]+)\)/)[1];
-    var t = str.split(/ *, */).map(Number);
-    var r = getnum(t[0], true);
-    var g = getnum(t[1], true);
-    var b = getnum(t[2], true);
-    if (r != -1 && g != -1 && b != -1) {
-      return [r, g, b, 255]
-    }
-  }
-}
-
-function rgba(str) {
-  if (str.substr(0, 5) == 'rgba(') {
-    str = str.match(/^rgba\(([^)]+)\)/)[1];
-    var t = str.split(/ *, */).map(Number);
-    var r = getnum(t[0], true);
-    var g = getnum(t[1], true);
-    var b = getnum(t[2], true);
-    var a = getnum(t[3] * 255);
-    if (r != -1 && g != -1 && b != -1 && a != -1) {
-      return [r, g, b, a]
-    }
-  }
-}
-
-var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
-  KeyEnum2[KeyEnum2["error"] = 0] = "error";
-  KeyEnum2[KeyEnum2["warning"] = 1] = "warning";
-  KeyEnum2[KeyEnum2["info"] = 2] = "info";
-  KeyEnum2[KeyEnum2["success"] = 3] = "success";
-  KeyEnum2[KeyEnum2["message"] = 4] = "message";
-  KeyEnum2[KeyEnum2["close"] = 5] = "close";
-  KeyEnum2[KeyEnum2["form-description"] = 6] = "form-description";
-  KeyEnum2[KeyEnum2["of"] = 7] = "of";
-  KeyEnum2[KeyEnum2["characters"] = 8] = "characters";
-  KeyEnum2[KeyEnum2["new"] = 9] = "new";
-  KeyEnum2[KeyEnum2["no-entries"] = 10] = "no-entries";
-  KeyEnum2[KeyEnum2["change-order"] = 11] = "change-order";
-  KeyEnum2[KeyEnum2["action-running"] = 12] = "action-running";
-  KeyEnum2[KeyEnum2["action-done"] = 13] = "action-done";
-  KeyEnum2[KeyEnum2["page-first"] = 14] = "page-first";
-  KeyEnum2[KeyEnum2["page-back"] = 15] = "page-back";
-  KeyEnum2[KeyEnum2["page-next"] = 16] = "page-next";
-  KeyEnum2[KeyEnum2["page-last"] = 17] = "page-last";
-  KeyEnum2[KeyEnum2["entries-per-site"] = 18] = "entries-per-site";
-  KeyEnum2[KeyEnum2["page-current"] = 19] = "page-current";
-  KeyEnum2[KeyEnum2["page-selected"] = 20] = "page-selected";
-  KeyEnum2[KeyEnum2["page-per-site"] = 21] = "page-per-site";
-  KeyEnum2[KeyEnum2["logo-description"] = 22] = "logo-description";
-  KeyEnum2[KeyEnum2["open-link-in-tab"] = 23] = "open-link-in-tab";
-  KeyEnum2[KeyEnum2["kolibri-logo"] = 24] = "kolibri-logo";
-  return KeyEnum2;
-})(KeyEnum || {});
-
-var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
-  TagEnum2[TagEnum2["abbr"] = 0] = "abbr";
-  TagEnum2[TagEnum2["accordion"] = 1] = "accordion";
-  TagEnum2[TagEnum2["accordion-group"] = 2] = "accordion-group";
-  TagEnum2[TagEnum2["alert"] = 3] = "alert";
-  TagEnum2[TagEnum2["avatar"] = 4] = "avatar";
-  TagEnum2[TagEnum2["badge"] = 5] = "badge";
-  TagEnum2[TagEnum2["breadcrumb"] = 6] = "breadcrumb";
-  TagEnum2[TagEnum2["button"] = 7] = "button";
-  TagEnum2[TagEnum2["button-group"] = 8] = "button-group";
-  TagEnum2[TagEnum2["button-link"] = 9] = "button-link";
-  TagEnum2[TagEnum2["card"] = 10] = "card";
-  TagEnum2[TagEnum2["details"] = 11] = "details";
-  TagEnum2[TagEnum2["form"] = 12] = "form";
-  TagEnum2[TagEnum2["heading"] = 13] = "heading";
-  TagEnum2[TagEnum2["icon"] = 14] = "icon";
-  TagEnum2[TagEnum2["image"] = 15] = "image";
-  TagEnum2[TagEnum2["indented-text"] = 16] = "indented-text";
-  TagEnum2[TagEnum2["input-checkbox"] = 17] = "input-checkbox";
-  TagEnum2[TagEnum2["input-color"] = 18] = "input-color";
-  TagEnum2[TagEnum2["input-date"] = 19] = "input-date";
-  TagEnum2[TagEnum2["input-email"] = 20] = "input-email";
-  TagEnum2[TagEnum2["input-file"] = 21] = "input-file";
-  TagEnum2[TagEnum2["input-number"] = 22] = "input-number";
-  TagEnum2[TagEnum2["input-password"] = 23] = "input-password";
-  TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
-  TagEnum2[TagEnum2["input-range"] = 25] = "input-range";
-  TagEnum2[TagEnum2["input-text"] = 26] = "input-text";
-  TagEnum2[TagEnum2["kolibri"] = 27] = "kolibri";
-  TagEnum2[TagEnum2["link"] = 28] = "link";
-  TagEnum2[TagEnum2["link-button"] = 29] = "link-button";
-  TagEnum2[TagEnum2["link-group"] = 30] = "link-group";
-  TagEnum2[TagEnum2["logo"] = 31] = "logo";
-  TagEnum2[TagEnum2["modal"] = 32] = "modal";
-  TagEnum2[TagEnum2["nav"] = 33] = "nav";
-  TagEnum2[TagEnum2["pagination"] = 34] = "pagination";
-  TagEnum2[TagEnum2["progress"] = 35] = "progress";
-  TagEnum2[TagEnum2["select"] = 36] = "select";
-  TagEnum2[TagEnum2["separator"] = 37] = "separator";
-  TagEnum2[TagEnum2["skip-nav"] = 38] = "skip-nav";
-  TagEnum2[TagEnum2["spin"] = 39] = "spin";
-  TagEnum2[TagEnum2["split-button"] = 40] = "split-button";
-  TagEnum2[TagEnum2["symbol"] = 41] = "symbol";
-  TagEnum2[TagEnum2["table"] = 42] = "table";
-  TagEnum2[TagEnum2["tabs"] = 43] = "tabs";
-  TagEnum2[TagEnum2["textarea"] = 44] = "textarea";
-  TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
-  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
-  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
-  TagEnum2[TagEnum2["tree"] = 48] = "tree";
-  TagEnum2[TagEnum2["tree-item"] = 49] = "tree-item";
-  return TagEnum2;
-})(TagEnum || {});
-let DEV_MODE = null;
-const getDevMode = () => DEV_MODE === true;
-const LOG_STYLE = "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000";
-const mapToArray = (msg) => {
-  return Array.isArray(msg) ? msg : [msg];
-};
-const getLogLabel = (label) => {
-  return `%c${label}`;
-};
-const handleClassifier = (label, classifier) => {
-  if (typeof classifier === "string" && classifier.length > 0) {
-    return `${getLogLabel(label)} | ${classifier}`;
-  } else {
-    return getLogLabel(label);
-  }
-};
-const getShield = (label, options) => {
-  return [handleClassifier(label, options?.classifier), `${LOG_STYLE};${options?.overwriteStyle || ""}`];
-};
-const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
-class Logger {
-  constructor(label, devMode) {
-    this.label = label;
-    this.devMode = devMode;
-  }
-  debug(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.debug(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  info(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.info(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  trace(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.trace(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  warn(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.warn(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  error(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      console.error(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-  throw(msg, options) {
-    if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
-      throw new Error(...getShield(this.label, options), ...mapToArray(msg));
-    }
-  }
-}
-const Log = new Logger("KoliBri", getDevMode);
-const devCache = /* @__PURE__ */ new Set();
-const devHint = (msg, options) => {
-  if (devCache.has(msg) === false || !!options?.force) {
-    devCache.add(msg);
-    Log.debug([msg].concat(options?.details || []), {
-      classifier: `\u{1F4BB} dev`,
-      forceLog: !!options?.force,
-      overwriteStyle: "; background-color: #f09"
-    });
-  }
-};
-devHint(
-  `Wir freuen uns \xFCber jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!`
-);
-new Event("StateChange");
-let processEnv = "development";
-try {
-  processEnv = process.env.NODE_ENV;
-} catch (e) {
-  processEnv = "production";
-}
-
-const KoliBri = new te("kol", KeyEnum, TagEnum);
-
-var css_248z$E = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, 16px);\n    --spacing: var(--kolibri-spacing, 0.25rem);\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #c0003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: 0.5rem 0.75rem;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5rem;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
-const globalCss = css_248z$E;
-
-var css_248z$D = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dashed var(--color-text) 1px;\n    text-decoration: none !important;\n  }\n}";
-const abbrCss = css_248z$D;
-
-var css_248z$C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: 2.2rem;\n    padding: 12px 8px;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: 1.125rem;\n    line-height: 20px;\n    gap: 0.5rem;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  :host > div > .kol-heading-wc button .kol-icon {\n    color: var(--color-primary);\n    font-size: 1rem;\n  }\n  :host > div {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  :host > div div[class=header],\n  :host > div[class*=open] div[class=content] {\n    margin: 0;\n  }\n  :host > div div[class=content] {\n    padding-left: 2.25em;\n    padding-bottom: 12px;\n    padding-right: 8px;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
-const accordionCss = css_248z$C;
-
-var css_248z$B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
-const alertCss = css_248z$B;
-
-var css_248z$A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
-const avatarCss = css_248z$A;
-
-var css_248z$z = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n    font-size: inherit;\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: 0.2rem;\n  }\n  :host > span .kol-span-wc {\n    padding: 0.25rem 0.75rem;\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: 0.5rem;\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: 0.25rem;\n  }\n}";
-const badgeCss = css_248z$z;
-
-var css_248z$y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: 0.75rem;\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: 1.25rem;\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: 1.25rem;\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
-const breadcrumbCss = css_248z$y;
-
-var css_248z$x = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
-const buttonCss = css_248z$x;
-
-var css_248z$w = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
-const buttonGroupCss = css_248z$w;
-
-var css_248z$v = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
-const buttonLinkCss = css_248z$v;
-
-var css_248z$u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 0.25rem var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  :host .kol-heading-wc {\n    line-height: 1.75rem;\n  }\n  :host div.header {\n    padding: 1rem 1rem 0.5rem 1rem;\n  }\n  :host div.content {\n    padding: 0.5rem 1rem 1rem;\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: 0.5rem 1rem;\n  }\n}";
-const cardCss = css_248z$u;
-
-var css_248z$t = "@layer kol-theme-component {\n  details > summary {\n    border-radius: var(--border-radius);\n    font-family: var(--font-family);\n  }\n  details .kol-indented-text-wc {\n    margin: 0.25rem 0 0 0.65rem;\n  }\n  .kol-icon {\n    font-size: 1.2rem;\n  }\n}";
-const detailsCss = css_248z$t;
-
-var css_248z$s = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n  .headline-h2 {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .headline-h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n  }\n}";
-const headingCss = css_248z$s;
-
-var css_248z$r = "@layer kol-theme-component {\n  :host {\n    width: 1em;\n    height: 1em;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n  }\n}";
-const iconCss = css_248z$r;
-
-var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: -2px 0px 0px var(--color-primary-variant);\n    padding: 0 0.5rem;\n    width: 100%;\n  }\n}";
-const indentedTextCss = css_248z$q;
-
-var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: 0.4rem;\n  }\n  :host .kol-input.default {\n    grid-template-columns: 1.5rem auto;\n  }\n  :host .kol-input.switch {\n    grid-template-columns: 3.5rem auto;\n  }\n  :host .kol-input.button {\n    gap: 0.4rem 1px;\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: 0px;\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2/auto;\n  }\n  :host .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  :host input {\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    line-height: 24px;\n    font-size: 1rem;\n  }\n  :host input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input label span {\n    margin-top: 0.125rem;\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: 1.5rem;\n    min-width: 1.5rem;\n    width: 1.5rem;\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: 0.25rem;\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: 2px;\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .button .input {\n    border-top-width: 1px;\n    border-left-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: 1px;\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: 1px;\n    border-right-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n  }\n  .button .input-label .input-label-span {\n    margin: auto 0;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
-const inputCheckboxCss = css_248z$p;
-
-var css_248z$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: 40px !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputColorCss = css_248z$o;
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},loglevel={exports:{}};!function(e){var t,o;t=commonjsGlobal,o=function(){var e=function(){},t="undefined",o=typeof window!==t&&typeof window.navigator!==t&&/Trident\/|MSIE /.test(window.navigator.userAgent),n=["trace","debug","info","warn","error"],l={},s=null;function r(e,t){var o=e[t];if("function"==typeof o.bind)return o.bind(e);try{return Function.prototype.bind.call(o,e)}catch(t){return function(){return Function.prototype.apply.apply(o,[e,arguments])}}}function i(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace();}function a(){for(var o=this.getLevel(),l=0;l<n.length;l++){var s=n[l];this[s]=l<o?e:this.methodFactory(s,o,this.name);}if(this.log=this.debug,typeof console===t&&o<this.levels.SILENT)return "No console available for logging"}function c(e){return function(){typeof console!==t&&(a.call(this),this[e].apply(this,arguments));}}function h(n,l,s){return function(n){return "debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?i:void 0!==console[n]?r(console,n):void 0!==console.log?r(console,"log"):e)}(n)||c.apply(this,arguments)}function f(e,o){var r,i,c,f=this,y="loglevel";function u(){var e;if(typeof window!==t&&y){try{e=window.localStorage[y];}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(y),l=o.indexOf(n+"=");-1!==l&&(e=/^([^;]+)/.exec(o.slice(l+n.length+1))[1]);}catch(e){}return void 0===f.levels[e]&&(e=void 0),e}}function m(e){var t=e;if("string"==typeof t&&void 0!==f.levels[t.toUpperCase()]&&(t=f.levels[t.toUpperCase()]),"number"==typeof t&&t>=0&&t<=f.levels.SILENT)return t;throw new TypeError("log.setLevel() called with invalid level: "+e)}"string"==typeof e?y+=":"+e:"symbol"==typeof e&&(y=void 0),f.name=e,f.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},f.methodFactory=o||h,f.getLevel=function(){return null!=c?c:null!=i?i:r},f.setLevel=function(e,o){return c=m(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&y){try{return void(window.localStorage[y]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"="+o+";";}catch(e){}}}(c),a.call(f)},f.setDefaultLevel=function(e){i=m(e),u()||f.setLevel(e,!1);},f.resetLevel=function(){c=null,function(){if(typeof window!==t&&y){try{window.localStorage.removeItem(y);}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";}catch(e){}}}(),a.call(f);},f.enableAll=function(e){f.setLevel(f.levels.TRACE,e);},f.disableAll=function(e){f.setLevel(f.levels.SILENT,e);},f.rebuild=function(){if(s!==f&&(r=m(s.getLevel())),a.call(f),s===f)for(var e in l)l[e].rebuild();},r=m(s?s.getLevel():"WARN");var p=u();null!=p&&(c=m(p)),a.call(f);}(s=new f).getLogger=function(e){if("symbol"!=typeof e&&"string"!=typeof e||""===e)throw new TypeError("You must supply a name when creating a logger.");var t=l[e];return t||(t=l[e]=new f(e,s.methodFactory)),t};var y=typeof window!==t?window.log:void 0;return s.noConflict=function(){return typeof window!==t&&window.log===s&&(window.log=y),s},s.getLoggers=function(){return l},s.default=s,s},e.exports?e.exports=o():t.log=o();}(loglevel);const H=(e,t)=>o=>o(e,t),P=(e,t)=>o=>o(e,t,{append:!1}),o={};const c=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;("object"!=typeof o.A11yUi||null===o.A11yUi)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c});const K=(e,t)=>{let o=t.match(B);if(Array.isArray(o)){o=o.filter((e=>G.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}L.add(e);},T=(e,t)=>"object"==typeof o.A11yUi&&null!==o.A11yUi&&"object"==typeof o.A11yUi.Themes&&null!==o.A11yUi.Themes&&"object"==typeof o.A11yUi.Themes[e]&&null!==o.A11yUi.Themes[e]&&"string"==typeof o.A11yUi.Themes[e][t]?o.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},F=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch{t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},Q=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let l;try{l=[...Array.from(e.adoptedStyleSheets)];}catch{l=[];}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),l.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),l.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},M=(e,t,o)=>{const n=t.name||"default";let l;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");l=e.shadowRoot;}catch{l=e;}if(h.get(n)?.has(e.tagName))$(e,l,h.get(n)?.get(e.tagName),o);else {const s=T(n,"PROPERTIES"),r=T(n,"GLOBAL"),i=T(n,e.tagName);!1===L.has(n)&&K(n,r);const a=[s,r,i];Q(l,a,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,a),!0===t.cache&&(!1===h.has(n)&&h.set(n,new Map),h.get(n)?.set(e.tagName,a)),$(e,l,a,o);}},$=(e,t,o,n)=>{q(t),F(t,o),e.style.display=n;},O=e=>{"debug"===e.loglevel&&v.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=c.get(t.target);M(t.target,o,e),R(t.target,o);}};let p;try{p=new MutationObserver(X);}catch{p=null;}class te{constructor(e,t,o){this.createTheme=(e,t)=>P(e,t),this.createTranslation=(e,t)=>H(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
 
-var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputDateCss = css_248z$n;
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var KeyEnum,TagEnum;!function(e){e[e.error=0]="error",e[e.warning=1]="warning",e[e.info=2]="info",e[e.success=3]="success",e[e.message=4]="message",e[e.close=5]="close",e[e["form-description"]=6]="form-description",e[e.of=7]="of",e[e.characters=8]="characters",e[e.new=9]="new",e[e["no-entries"]=10]="no-entries",e[e["change-order"]=11]="change-order",e[e["action-running"]=12]="action-running",e[e["action-done"]=13]="action-done",e[e["page-first"]=14]="page-first",e[e["page-back"]=15]="page-back",e[e["page-next"]=16]="page-next",e[e["page-last"]=17]="page-last",e[e["entries-per-site"]=18]="entries-per-site",e[e["page-current"]=19]="page-current",e[e["page-selected"]=20]="page-selected",e[e["page-per-site"]=21]="page-per-site",e[e["logo-description"]=22]="logo-description",e[e["open-link-in-tab"]=23]="open-link-in-tab",e[e["kolibri-logo"]=24]="kolibri-logo";}(KeyEnum||(KeyEnum={})),function(e){e[e.abbr=0]="abbr",e[e.accordion=1]="accordion",e[e["accordion-group"]=2]="accordion-group",e[e.alert=3]="alert",e[e.avatar=4]="avatar",e[e.badge=5]="badge",e[e.breadcrumb=6]="breadcrumb",e[e.button=7]="button",e[e["button-group"]=8]="button-group",e[e["button-link"]=9]="button-link",e[e.card=10]="card",e[e.details=11]="details",e[e.form=12]="form",e[e.heading=13]="heading",e[e.icon=14]="icon",e[e.image=15]="image",e[e["indented-text"]=16]="indented-text",e[e["input-checkbox"]=17]="input-checkbox",e[e["input-color"]=18]="input-color",e[e["input-date"]=19]="input-date",e[e["input-email"]=20]="input-email",e[e["input-file"]=21]="input-file",e[e["input-number"]=22]="input-number",e[e["input-password"]=23]="input-password",e[e["input-radio"]=24]="input-radio",e[e["input-range"]=25]="input-range",e[e["input-text"]=26]="input-text",e[e.kolibri=27]="kolibri",e[e.link=28]="link",e[e["link-button"]=29]="link-button",e[e["link-group"]=30]="link-group",e[e.logo=31]="logo",e[e.modal=32]="modal",e[e.nav=33]="nav",e[e.pagination=34]="pagination",e[e.progress=35]="progress",e[e.select=36]="select",e[e.separator=37]="separator",e[e["skip-nav"]=38]="skip-nav",e[e.spin=39]="spin",e[e["split-button"]=40]="split-button",e[e.symbol=41]="symbol",e[e.table=42]="table",e[e["table-stateless"]=43]="table-stateless",e[e["table-stateful"]=44]="table-stateful",e[e.tabs=45]="tabs",e[e.textarea=46]="textarea",e[e["toast-container"]=47]="toast-container",e[e.toolbar=48]="toolbar",e[e.tooltip=49]="tooltip",e[e.tree=50]="tree",e[e["tree-item"]=51]="tree-item";}(TagEnum||(TagEnum={}));const KoliBri=new te("kol",KeyEnum,TagEnum);
 
-var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputEmailCss = css_248z$m;
+var css_248z$F = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, 16px);\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #c0003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var globalCss = css_248z$F;
 
-var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2px);\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputFileCss = css_248z$l;
+var css_248z$E = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dashed var(--color-text) 1px;\n    text-decoration: none !important;\n  }\n}";
+var abbrCss = css_248z$E;
 
-var css_248z$k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputNumberCss = css_248z$k;
+var css_248z$D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n    padding: 12px 8px;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 20px;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  :host > div > .kol-heading-wc button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  :host > div div[class=header],\n  :host > div[class*=open] div[class=content] {\n    margin: 0;\n  }\n  :host > div div[class=content] {\n    padding-left: 2.25em;\n    padding-bottom: 12px;\n    padding-right: 8px;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
+var accordionCss = css_248z$D;
 
-var css_248z$j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputPasswordCss = css_248z$j;
+var css_248z$C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var alertCss = css_248z$C;
 
-var css_248z$i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 20px;\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    line-height: 24px;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: 0.5rem;\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: 1.5rem;\n    min-width: 1.5rem;\n    width: 1.5rem;\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: 3px solid var(--color-danger);\n    color: var(--color-danger);\n    font-weight: 700;\n    padding-left: 1rem;\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n}";
-const inputRadioCss = css_248z$i;
+var css_248z$B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss = css_248z$B;
 
-var css_248z$h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .inputs-wrapper {\n    gap: 1rem;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: 0.5rem;\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: 0.5rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputRangeCss = css_248z$h;
+var css_248z$A = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n    font-size: inherit;\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var badgeCss = css_248z$A;
 
-var css_248z$g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const inputTextCss = css_248z$g;
+var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss = css_248z$z;
 
-var css_248z$f = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
-const kolibriCss = css_248z$f;
+var css_248z$y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonCss = css_248z$y;
 
-var css_248z$e = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
-const linkButtonCss = css_248z$e;
+var css_248z$x = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
+var buttonGroupCss = css_248z$x;
 
-var css_248z$d = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
-const linkCss = css_248z$d;
+var css_248z$w = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonLinkCss = css_248z$w;
 
-var css_248z$c = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32px);\n  }\n}";
-const modalCss = css_248z$c;
+var css_248z$v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  :host .kol-heading-wc {\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var cardCss = css_248z$v;
 
-var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: 0.5rem;\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: 2px solid transparent;\n    padding-left: 0.5rem;\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 1rem;\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: 1rem;\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: 0.5rem;\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
-const navCss = css_248z$b;
+var css_248z$u = "@layer kol-theme-component {\n  details > summary {\n    border-radius: var(--border-radius);\n    font-family: var(--font-family);\n  }\n  details .kol-indented-text-wc {\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var detailsCss = css_248z$u;
 
-var css_248z$a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected .button-inner {\n    background-color: var(--color-mute-variant);\n    border-radius: var(--a11y-min-size);\n    border: 0;\n  }\n}";
-const paginationCss = css_248z$a;
+var css_248z$t = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var headingCss = css_248z$t;
 
-var css_248z$9 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
-const progressCss = css_248z$9;
+var css_248z$s = "@layer kol-theme-component {\n  :host {\n    width: 1em;\n    height: 1em;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n  }\n}";
+var iconCss = css_248z$s;
 
-var css_248z$8 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 2rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: 1px 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const selectCss = css_248z$8;
+var css_248z$r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: -2px 0px 0px var(--color-primary-variant);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+var indentedTextCss = css_248z$r;
 
-var css_248z$7 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1rem;\n    padding: 8px 14px;\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
-const skipNavCss = css_248z$7;
+var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.default {\n    grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  :host .kol-input.switch {\n    grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  :host .kol-input.button {\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) 1px;\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: 0px;\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2/auto;\n  }\n  :host .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  :host input {\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    line-height: 24px;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input label span {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: 2px;\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .button .input {\n    border-top-width: 1px;\n    border-left-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: 1px;\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: 1px;\n    border-right-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .button .input-label .input-label-span {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
+var inputCheckboxCss = css_248z$q;
 
-var css_248z$6 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background: #fff;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: 1px;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
-const splitButtonCss = css_248z$6;
+var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: 40px !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputColorCss = css_248z$p;
 
-var css_248z$5 = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: 0.5rem;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: 0.5rem;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: 0.5rem;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: 0.5rem;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n  @media (min-width: 1024px) {\n    div.pagination .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
-const tableCss = css_248z$5;
+var css_248z$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputDateCss = css_248z$o;
 
-var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: 2rem;\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-primary);\n  }\n  button.primary,\n  button.selected {\n    color: var(--color-primary);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: 0.5rem;\n  }\n  .kol-icon {\n    font-size: 1rem;\n  }\n  :host > div > div {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1rem 0px 0px;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0px 1rem;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1rem 0px 0px;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0px 1rem;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc button {\n    border: none;\n  }\n}";
-const tabsCss = css_248z$4;
+var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputEmailCss = css_248z$n;
 
-var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
-const textareaCss = css_248z$3;
+var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2px);\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputFileCss = css_248z$m;
 
-var css_248z$2 = "@layer kol-theme-component {\n  :host {\n    top: 1rem;\n    right: 1rem;\n    width: 440px;\n  }\n  .toast {\n    margin-top: 1rem;\n  }\n}";
-const toastContainerCss = css_248z$2;
+var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputNumberCss = css_248z$l;
 
-var css_248z$1 = "@layer kol-theme-component {\n  .tree-item ul {\n    list-style: disc inside;\n    border-left: 2px solid;\n    padding-left: 0.4rem;\n    margin-left: 2rem;\n    margin-top: 0.4rem;\n  }\n  .tree-item li {\n    margin: 0.4rem 0;\n  }\n  .tree-item .toggle-button {\n    align-items: center;\n    border: 1px solid var(--color-primary);\n    display: inline-flex;\n    height: 1.6rem;\n    justify-content: center;\n    margin-right: 0.4rem;\n    width: 1.6rem;\n  }\n  .tree-link {\n    display: inline-block;\n    padding: 0.4rem;\n  }\n  .tree-link.active {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n}";
-const treeItemCss = css_248z$1;
+var css_248z$k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputPasswordCss = css_248z$k;
+
+var css_248z$j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 20px;\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    line-height: 24px;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: 3px solid var(--color-danger);\n    color: var(--color-danger);\n    font-weight: 700;\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n}";
+var inputRadioCss = css_248z$j;
+
+var css_248z$i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputRangeCss = css_248z$i;
+
+var css_248z$h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputTextCss = css_248z$h;
+
+var css_248z$g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var kolibriCss = css_248z$g;
+
+var css_248z$f = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
+var linkButtonCss = css_248z$f;
+
+var css_248z$e = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkCss = css_248z$e;
+
+var css_248z$d = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32px);\n  }\n}";
+var modalCss = css_248z$d;
+
+var css_248z$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: 2px solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
+var navCss = css_248z$c;
+
+var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected .button-inner {\n    background-color: var(--color-mute-variant);\n    border-radius: var(--a11y-min-size);\n    border: 0;\n  }\n}";
+var paginationCss = css_248z$b;
+
+var css_248z$a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
+var progressCss = css_248z$a;
+
+var css_248z$9 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: 1px 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var selectCss = css_248z$9;
+
+var css_248z$8 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding: 8px 14px;\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+var skipNavCss = css_248z$8;
+
+var css_248z$7 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background: #fff;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: 1px;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var splitButtonCss = css_248z$7;
+
+var css_248z$6 = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    div.pagination .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var tableStatefulCss = css_248z$6;
+
+var css_248z$5 = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss = css_248z$5;
+
+var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-primary);\n  }\n  button.primary,\n  button.selected {\n    color: var(--color-primary);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > div {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16)) 0px 0px;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16)) 0px 0px;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc button {\n    border: none;\n  }\n}";
+var tabsCss = css_248z$4;
+
+var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var textareaCss = css_248z$3;
+
+var css_248z$2 = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 440px;\n  }\n  .toast {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var toastContainerCss = css_248z$2;
+
+var css_248z$1 = "@layer kol-theme-component {\n  .tree-item ul {\n    list-style: disc inside;\n    border-left: 2px solid;\n    padding-left: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(32rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-item li {\n    margin: calc(6.4rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .tree-item .toggle-button {\n    align-items: center;\n    border: 1px solid var(--color-primary);\n    display: inline-flex;\n    height: calc(25.6rem / var(--kolibri-root-font-size, 16));\n    justify-content: center;\n    margin-right: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    width: calc(25.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link {\n    display: inline-block;\n    padding: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link.active {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n}";
+var treeItemCss = css_248z$1;
 
 var css_248z = "@layer kol-theme-component {\n  .tree:focus-within {\n    outline: 1px solid var(--color-primary);\n  }\n}";
-const treeCss = css_248z;
-
-const DEFAULT = KoliBri.createTheme("default", {
-  GLOBAL: globalCss,
-  "KOL-ABBR": abbrCss,
-  "KOL-ACCORDION": accordionCss,
-  "KOL-ALERT": alertCss,
-  "KOL-AVATAR": avatarCss,
-  "KOL-BADGE": badgeCss,
-  "KOL-BREADCRUMB": breadcrumbCss,
-  "KOL-BUTTON": buttonCss,
-  "KOL-BUTTON-GROUP": buttonGroupCss,
-  "KOL-BUTTON-LINK": buttonLinkCss,
-  "KOL-CARD": cardCss,
-  "KOL-DETAILS": detailsCss,
-  "KOL-HEADING": headingCss,
-  "KOL-ICON": iconCss,
-  "KOL-INDENTED-TEXT": indentedTextCss,
-  "KOL-INPUT-CHECKBOX": inputCheckboxCss,
-  "KOL-INPUT-COLOR": inputColorCss,
-  "KOL-INPUT-DATE": inputDateCss,
-  "KOL-INPUT-EMAIL": inputEmailCss,
-  "KOL-INPUT-FILE": inputFileCss,
-  "KOL-INPUT-NUMBER": inputNumberCss,
-  "KOL-INPUT-PASSWORD": inputPasswordCss,
-  "KOL-INPUT-RADIO": inputRadioCss,
-  "KOL-INPUT-RANGE": inputRangeCss,
-  "KOL-INPUT-TEXT": inputTextCss,
-  "KOL-KOLIBRI": kolibriCss,
-  "KOL-LINK": linkCss,
-  "KOL-LINK-BUTTON": linkButtonCss,
-  "KOL-MODAL": modalCss,
-  "KOL-NAV": navCss,
-  "KOL-PAGINATION": paginationCss,
-  "KOL-PROGRESS": progressCss,
-  "KOL-SELECT": selectCss,
-  "KOL-SKIP-NAV": skipNavCss,
-  "KOL-SPLIT-BUTTON": splitButtonCss,
-  "KOL-TABLE": tableCss,
-  "KOL-TABS": tabsCss,
-  "KOL-TEXTAREA": textareaCss,
-  "KOL-TOAST-CONTAINER": toastContainerCss,
-  "KOL-TREE": treeCss,
-  "KOL-TREE-ITEM": treeItemCss
+var treeCss = css_248z;
+
+const DEFAULT = KoliBri.createTheme('default', {
+    GLOBAL: globalCss,
+    'KOL-ABBR': abbrCss,
+    'KOL-ACCORDION': accordionCss,
+    'KOL-ALERT': alertCss,
+    'KOL-AVATAR': avatarCss,
+    'KOL-BADGE': badgeCss,
+    'KOL-BREADCRUMB': breadcrumbCss,
+    'KOL-BUTTON': buttonCss,
+    'KOL-BUTTON-GROUP': buttonGroupCss,
+    'KOL-BUTTON-LINK': buttonLinkCss,
+    'KOL-CARD': cardCss,
+    'KOL-DETAILS': detailsCss,
+    'KOL-HEADING': headingCss,
+    'KOL-ICON': iconCss,
+    'KOL-INDENTED-TEXT': indentedTextCss,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss,
+    'KOL-INPUT-COLOR': inputColorCss,
+    'KOL-INPUT-DATE': inputDateCss,
+    'KOL-INPUT-EMAIL': inputEmailCss,
+    'KOL-INPUT-FILE': inputFileCss,
+    'KOL-INPUT-NUMBER': inputNumberCss,
+    'KOL-INPUT-PASSWORD': inputPasswordCss,
+    'KOL-INPUT-RADIO': inputRadioCss,
+    'KOL-INPUT-RANGE': inputRangeCss,
+    'KOL-INPUT-TEXT': inputTextCss,
+    'KOL-KOLIBRI': kolibriCss,
+    'KOL-LINK': linkCss,
+    'KOL-LINK-BUTTON': linkButtonCss,
+    'KOL-MODAL': modalCss,
+    'KOL-NAV': navCss,
+    'KOL-PAGINATION': paginationCss,
+    'KOL-PROGRESS': progressCss,
+    'KOL-SELECT': selectCss,
+    'KOL-SKIP-NAV': skipNavCss,
+    'KOL-SPLIT-BUTTON': splitButtonCss,
+    'KOL-TABLE-STATEFUL': tableStatefulCss,
+    'KOL-TABLE-STATELESS': tableStatelessCss,
+    'KOL-TABS': tabsCss,
+    'KOL-TEXTAREA': textareaCss,
+    'KOL-TOAST-CONTAINER': toastContainerCss,
+    'KOL-TREE': treeCss,
+    'KOL-TREE-ITEM': treeItemCss,
 });
 
 export { DEFAULT };
+//# sourceMappingURL=index.mjs.map