@public-ui/theme-default 1.7.14 → 1.7.15

package/dist/index.cjs

@@ -35,6 +35,9 @@ var loglevel = {exports: {}};
 	        "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];
@@ -87,25 +90,33 @@ var loglevel = {exports: {}};
 
 	    // These private functions always need `this` to be set properly
 
-	    function replaceLoggingMethods(level, loggerName) {
+	    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, loggerName);
+	                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, level, loggerName) {
+	    function enableLoggingWhenConsoleArrives(methodName) {
 	        return function () {
 	            if (typeof console !== undefinedType) {
-	                replaceLoggingMethods.call(this, level, loggerName);
+	                replaceLoggingMethods.call(this);
 	                this[methodName].apply(this, arguments);
 	            }
 	        };
@@ -113,16 +124,36 @@ var loglevel = {exports: {}};
 
 	    // 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) {
+	    function defaultMethodFactory(methodName, _level, _loggerName) {
 	        /*jshint validthis:true */
 	        return realMethod(methodName) ||
 	               enableLoggingWhenConsoleArrives.apply(this, arguments);
 	    }
 
-	    function Logger(name, defaultLevel, factory) {
+	    function Logger(name, factory) {
+	      // Private instance variables.
 	      var self = this;
-	      var currentLevel;
-	      defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+	      /**
+	       * 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") {
@@ -162,10 +193,12 @@ var loglevel = {exports: {}};
 	          if (typeof storedLevel === undefinedType) {
 	              try {
 	                  var cookie = window.document.cookie;
-	                  var location = cookie.indexOf(
-	                      encodeURIComponent(storageKey) + "=");
+	                  var cookieName = encodeURIComponent(storageKey);
+	                  var location = cookie.indexOf(cookieName + "=");
 	                  if (location !== -1) {
-	                      storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+	                      storedLevel = /^([^;]+)/.exec(
+	                          cookie.slice(location + cookieName.length + 1)
+	                      )[1];
 	                  }
 	              } catch (ignore) {}
 	          }
@@ -184,7 +217,6 @@ var loglevel = {exports: {}};
 	          // Use localStorage if available
 	          try {
 	              window.localStorage.removeItem(storageKey);
-	              return;
 	          } catch (ignore) {}
 
 	          // Use session cookie as fallback
@@ -194,6 +226,18 @@ var loglevel = {exports: {}};
 	          } 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
@@ -208,37 +252,36 @@ var loglevel = {exports: {}};
 	      self.methodFactory = factory || defaultMethodFactory;
 
 	      self.getLevel = function () {
-	          return currentLevel;
+	          if (userLevel != null) {
+	            return userLevel;
+	          } else if (defaultLevel != null) {
+	            return defaultLevel;
+	          } else {
+	            return inheritedLevel;
+	          }
 	      };
 
 	      self.setLevel = function (level, persist) {
-	          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
-	              level = self.levels[level.toUpperCase()];
-	          }
-	          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
-	              currentLevel = level;
-	              if (persist !== false) {  // defaults to true
-	                  persistLevelIfPossible(level);
-	              }
-	              replaceLoggingMethods.call(self, level, name);
-	              if (typeof console === undefinedType && level < self.levels.SILENT) {
-	                  return "No console available for logging";
-	              }
-	          } else {
-	              throw "log.setLevel() called with invalid level: " + level;
+	          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 = level;
+	          defaultLevel = normalizeLevel(level);
 	          if (!getPersistedLevel()) {
 	              self.setLevel(level, false);
 	          }
 	      };
 
 	      self.resetLevel = function () {
-	          self.setLevel(defaultLevel, false);
+	          userLevel = null;
 	          clearPersistedLevel();
+	          replaceLoggingMethods.call(self);
 	      };
 
 	      self.enableAll = function(persist) {
@@ -249,12 +292,28 @@ var loglevel = {exports: {}};
 	          self.setLevel(self.levels.SILENT, persist);
 	      };
 
-	      // Initialize with the right level
+	      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) {
-	          initialLevel = defaultLevel;
+	      if (initialLevel != null) {
+	          userLevel = normalizeLevel(initialLevel);
 	      }
-	      self.setLevel(initialLevel, false);
+	      replaceLoggingMethods.call(self);
 	    }
 
 	    /*
@@ -263,18 +322,19 @@ var loglevel = {exports: {}};
 	     *
 	     */
 
-	    var defaultLogger = new Logger();
+	    defaultLogger = new Logger();
 
-	    var _loggersByName = {};
 	    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.");
+	            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.getLevel(), defaultLogger.methodFactory);
+	            logger = _loggersByName[name] = new Logger(
+	                name,
+	                defaultLogger.methodFactory
+	            );
 	        }
 	        return logger;
 	    };
@@ -301,7 +361,7 @@ var loglevel = {exports: {}};
 	})); 
 } (loglevel));
 
-const N=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o=typeof window=="object"?window:typeof global=="object"?global:typeof self=="object"?self:{};const c=new Map,C=[],v=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:C,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);}v.add(e);},d=(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(""))));}},L=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h.get(a)?.has(e.tagName))M(e,r,h.get(a)?.get(e.tagName),s);else {const n=d(a,"PROPERTIES"),i=d(a,"GLOBAL"),H=d(a,e.tagName);v.has(a)===!1&&K(a,i);const m=[n,i,H];Q(r,m,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,m),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,m)),M(e,r,m,s);}},M=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},$=e=>{e.loglevel==="debug"&&C.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},O=(e,t)=>{W(e),$(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);L(t.target,a,s),O(t.target,a);}};let f;try{f=new MutationObserver(X);}catch{f=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>N(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+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 KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
   KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -387,37 +447,37 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
 
 const KoliBri = new te("kol", KeyEnum, TagEnum);
 
-var css_248z$B = ":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\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n*:not(i) {\n  font-family: var(--font-family);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0;\n  padding: 0;\n}\n\n*[tabindex]:focus,\nkol-input:not(.checkbox, .radio) .input:focus-within,\nkol-input:is(.checkbox, .radio) input:focus,\nsummary: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\nkol-heading-wc {\n  font-weight: 700;\n}\n\nkol-tooltip-wc .tooltip-floating {\n  border: var(--border-width) solid var(--color-subtle);\n  border-radius: var(--border-radius);\n}\n\nkol-tooltip-wc .tooltip-arrow {\n  border: var(--border-width) solid var(--color-subtle);\n}\n\nkol-tooltip-wc .tooltip-area {\n  background-color: var(--color-light);\n}\n\nkol-tooltip-wc .tooltip-content {\n  border-radius: var(--border-radius);\n  line-height: 1.5;\n  padding: 0.5rem 0.75rem;\n}\n\nkol-span-wc,\nkol-span-wc > span {\n  gap: 0.5rem;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+var css_248z$B = ":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\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n*:not(i) {\n  font-family: var(--font-family);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0;\n  padding: 0;\n}\n\n*[tabindex]:focus,\n.kol-input:not(.checkbox, .radio) .input:focus-within,\n.kol-input:is(.checkbox, .radio) input:focus,\nsummary: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\n.kol-heading-wc {\n  font-weight: 700;\n}\n\n.kol-tooltip-wc .tooltip-floating {\n  border: var(--border-width) solid var(--color-subtle);\n  border-radius: var(--border-radius);\n}\n\n.kol-tooltip-wc .tooltip-arrow {\n  border: var(--border-width) solid var(--color-subtle);\n}\n\n.kol-tooltip-wc .tooltip-area {\n  background-color: var(--color-light);\n}\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\n.kol-span-wc,\n.kol-span-wc > span {\n  gap: 0.5rem;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 const globalCss = css_248z$B;
 
 var css_248z$A = "abbr {\n  border-bottom: dashed var(--color-text) 1px;\n  text-decoration: none !important;\n}";
 const abbrCss = css_248z$A;
 
-var css_248z$z = "kol-span-wc > span {\n  display: flex;\n  place-items: baseline center;\n  text-align: left;\n}\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\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\n:host > div > kol-heading-wc button kol-span-wc > span {\n  gap: 0.5em;\n}\n\n:host > div > kol-heading-wc button kol-icon {\n  color: var(--color-primary);\n}\n\n:host > div {\n  width: 100%;\n  height: 100%;\n  display: grid;\n}\n\n:host > div div[class=header],\n:host > div[class*=open] div[class=content] {\n  margin: 0;\n}\n\n:host > div div[class=content] {\n  padding-left: 2.25em;\n  padding-bottom: 12px;\n  padding-right: 8px;\n}\n\nbutton:focus {\n  outline: none;\n}\n\n:host > .accordion:focus-within {\n  border-radius: var(--border-radius);\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}";
+var css_248z$z = ".kol-span-wc > span {\n  display: flex;\n  place-items: baseline center;\n  text-align: left;\n}\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\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\n:host > div > .kol-heading-wc button .kol-span-wc > span {\n  gap: 0.5em;\n}\n\n:host > div > .kol-heading-wc button .kol-icon {\n  color: var(--color-primary);\n}\n\n:host > div {\n  width: 100%;\n  height: 100%;\n  display: grid;\n}\n\n:host > div div[class=header],\n:host > div[class*=open] div[class=content] {\n  margin: 0;\n}\n\n:host > div div[class=content] {\n  padding-left: 2.25em;\n  padding-bottom: 12px;\n  padding-right: 8px;\n}\n\nbutton:focus {\n  outline: none;\n}\n\n:host > .accordion:focus-within {\n  border-radius: var(--border-radius);\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}";
 const accordionCss = css_248z$z;
 
-var css_248z$y = ".msg {\n  border-width: 0;\n}\n\nkol-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\nkol-alert-wc > .heading {\n  display: flex;\n  gap: 0.5em;\n  place-items: center;\n}\n\nkol-alert-wc > .heading > div {\n  display: grid;\n  gap: 0.25rem;\n}\n\n.msg > .heading > kol-icon {\n  place-self: baseline;\n}\n\nkol-alert-wc > .heading > kol-button-wc.close {\n  place-self: center;\n}\n\n.msg {\n  align-items: start;\n}\n\n.default {\n  border-color: var(--color-subtle);\n}\n\n.default.msg .heading-icon {\n  color: var(--color-subtle);\n}\n\n.error {\n  border-color: var(--color-danger);\n}\n\n.error.msg .heading-icon {\n  color: var(--color-danger);\n}\n\n.info {\n  border-color: var(--color-primary);\n}\n\n.info.msg .heading-icon {\n  color: var(--color-primary);\n}\n\n.success {\n  border-color: var(--color-success);\n}\n\n.success.msg .heading-icon {\n  color: var(--color-success);\n}\n\n.warning {\n  border-color: var(--color-warning);\n}\n\n.warning.msg .heading-icon {\n  color: var(--color-warning);\n}\n\n.heading-icon {\n  color: var(--color-light);\n}\n\nkol-alert-wc .heading .heading-icon {\n  padding: 0;\n}\n\n.msg > .heading > .heading-icon {\n  padding-top: 0;\n  place-items: baseline;\n}\n\n.msg > .heading > div > kol-heading-wc {\n  padding-top: calc(--var-spacing / 2);\n}\n\n.msg.default .heading > div > kol-heading-wc {\n  color: var(--color-subtle);\n}\n\n.msg.error .heading > div > kol-heading-wc {\n  color: var(--color-danger);\n}\n\n.msg.info .heading > div > kol-heading-wc {\n  color: var(--color-primary);\n}\n\n.msg.success .heading > div > kol-heading-wc {\n  color: var(--color-success);\n}\n\n.msg.warning .heading > div > kol-heading-wc {\n  color: var(--color-warning);\n}\n\n.msg.default .close .icon {\n  color: var(--color-subtle);\n}\n\n.msg.error .close .icon {\n  color: var(--color-danger);\n}\n\n.msg.info .close .icon {\n  color: var(--color-primary);\n}\n\n.msg.success .close .icon {\n  color: var(--color-success);\n}\n\n.msg.warning .close .icon {\n  color: var(--color-warning);\n}\n\n.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\n.card > .heading {\n  padding: 0.5rem 1rem;\n}\n\n.card[_has-closer] > .heading {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0;\n}\n\n.card > .heading > div {\n  width: 100%;\n  min-height: 1.25rem;\n}\n\n.card > .heading .heading-icon {\n  justify-self: right;\n  margin-top: -4px;\n}\n\n.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\n.card > .heading kol-heading-wc > * {\n  margin: auto 0;\n}\n\n.card > .content {\n  padding: 1rem;\n}\n\n.card.default > .heading {\n  background-color: var(--color-subtle);\n}\n\n.card.error > .heading {\n  background-color: var(--color-danger);\n}\n\n.card.info > .heading {\n  background-color: var(--color-primary);\n}\n\n.card.success > .heading {\n  background-color: var(--color-success);\n}\n\n.card.warning > .heading {\n  background-color: var(--color-warning);\n}\n\n:is(.error, .info, .success, .warning) .heading-icon {\n  font-size: 1.25rem;\n}\n\n.card > div > .content {\n  grid-row: 2;\n  grid-column: 1/span 2;\n}\n\n.card.default .close {\n  background-color: var(--color-subtle);\n}\n\n.card.error .close {\n  background-color: var(--color-danger);\n}\n\n.card.info .close {\n  background-color: var(--color-primary);\n}\n\n.card.success .close {\n  background-color: var(--color-success);\n}\n\n.card.warning .close {\n  background-color: var(--color-warning);\n}\n\n.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\n.close > button.hide-label kol-icon {\n  display: flex;\n  width: 1em;\n  height: 1em;\n  font-size: 1.2rem;\n}\n\n.close > button:active {\n  box-shadow: none;\n  outline: none;\n}";
+var css_248z$y = ".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\n.msg {\n  border-width: 0;\n}\n\n.kol-alert-wc > .heading {\n  display: flex;\n  gap: 0.5em;\n  place-items: center;\n}\n\n.kol-alert-wc > .heading > div {\n  display: grid;\n  gap: 0.25rem;\n}\n\n.msg > .heading > .kol-icon {\n  place-self: baseline;\n}\n\n.kol-alert-wc > .heading > .kol-button-wc.close {\n  place-self: center;\n}\n\n.msg {\n  align-items: start;\n}\n\n.default {\n  border-color: var(--color-subtle);\n}\n\n.default.msg .heading-icon {\n  color: var(--color-subtle);\n}\n\n.error {\n  border-color: var(--color-danger);\n}\n\n.error.msg .heading-icon {\n  color: var(--color-danger);\n}\n\n.info {\n  border-color: var(--color-primary);\n}\n\n.info.msg .heading-icon {\n  color: var(--color-primary);\n}\n\n.success {\n  border-color: var(--color-success);\n}\n\n.success.msg .heading-icon {\n  color: var(--color-success);\n}\n\n.warning {\n  border-color: var(--color-warning);\n}\n\n.warning.msg .heading-icon {\n  color: var(--color-warning);\n}\n\n.heading-icon {\n  color: var(--color-light);\n}\n\n.kol-alert-wc .heading .heading-icon {\n  padding: 0;\n}\n\n.msg > .heading > .heading-icon {\n  padding-top: 0;\n  place-items: baseline;\n}\n\n.msg > .heading > div > .kol-heading-wc {\n  padding-top: calc(--var-spacing / 2);\n}\n\n.msg.default .heading > div > .kol-heading-wc {\n  color: var(--color-subtle);\n}\n\n.msg.error .heading > div > .kol-heading-wc {\n  color: var(--color-danger);\n}\n\n.msg.info .heading > div > .kol-heading-wc {\n  color: var(--color-primary);\n}\n\n.msg.success .heading > div > .kol-heading-wc {\n  color: var(--color-success);\n}\n\n.msg.warning .heading > div > .kol-heading-wc {\n  color: var(--color-warning);\n}\n\n.msg.default .close .icon {\n  color: var(--color-subtle);\n}\n\n.msg.error .close .icon {\n  color: var(--color-danger);\n}\n\n.msg.info .close .icon {\n  color: var(--color-primary);\n}\n\n.msg.success .close .icon {\n  color: var(--color-success);\n}\n\n.msg.warning .close .icon {\n  color: var(--color-warning);\n}\n\n.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\n.card > .heading {\n  padding: 0.5rem 1rem;\n}\n\n.card[_has-closer] > .heading {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0;\n}\n\n.card > .heading > div {\n  width: 100%;\n  min-height: 1.25rem;\n}\n\n.card > .heading .heading-icon {\n  justify-self: right;\n  margin-top: -4px;\n}\n\n.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\n.card > .heading .kol-heading-wc > * {\n  margin: auto 0;\n}\n\n.card > .content {\n  padding: 1rem;\n}\n\n.card.default > .heading {\n  background-color: var(--color-subtle);\n}\n\n.card.error > .heading {\n  background-color: var(--color-danger);\n}\n\n.card.info > .heading {\n  background-color: var(--color-primary);\n}\n\n.card.success > .heading {\n  background-color: var(--color-success);\n}\n\n.card.warning > .heading {\n  background-color: var(--color-warning);\n}\n\n:is(.error, .info, .success, .warning) .heading-icon {\n  font-size: 1.25rem;\n}\n\n.card > div > .content {\n  grid-row: 2;\n  grid-column: 1/span 2;\n}\n\n.card.default .close {\n  background-color: var(--color-subtle);\n}\n\n.card.error .close {\n  background-color: var(--color-danger);\n}\n\n.card.info .close {\n  background-color: var(--color-primary);\n}\n\n.card.success .close {\n  background-color: var(--color-success);\n}\n\n.card.warning .close {\n  background-color: var(--color-warning);\n}\n\n.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\n.close > button.hide-label .kol-icon {\n  display: flex;\n  width: 1em;\n  height: 1em;\n  font-size: 1.2rem;\n}\n\n.close > button:active {\n  box-shadow: none;\n  outline: none;\n}";
 const alertCss = css_248z$y;
 
-var css_248z$x = ":host {\n  display: inline-block;\n  font-size: inherit;\n}\n\n:host > span {\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  font-style: normal;\n}\n\n:host > span.smart-button {\n  align-items: center;\n}\n\n:host > span kol-button-wc:hover > button {\n  background-color: var(--color-primary-variant);\n  color: var(--color-light);\n}\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\n:host > span kol-span-wc {\n  padding: 0.25rem 0.75rem;\n}\n\n:host > span > kol-span-wc {\n  align-items: center;\n  font-style: normal;\n  gap: 0.5rem;\n}\n\n:host > span > kol-span-wc > span {\n  display: flex;\n  gap: 0.25rem;\n}";
+var css_248z$x = ":host {\n  display: inline-block;\n  font-size: inherit;\n}\n\n:host > span {\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  font-style: normal;\n}\n\n:host > span.smart-button {\n  align-items: center;\n}\n\n:host > span .kol-button-wc:hover > button {\n  background-color: var(--color-primary-variant);\n  color: var(--color-light);\n}\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\n:host > span .kol-span-wc {\n  padding: 0.25rem 0.75rem;\n}\n\n:host > span > .kol-span-wc {\n  align-items: center;\n  font-style: normal;\n  gap: 0.5rem;\n}\n\n:host > span > .kol-span-wc > span {\n  display: flex;\n  gap: 0.25rem;\n}";
 const badgeCss = css_248z$x;
 
-var css_248z$w = "li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n  font-size: 0.75rem;\n  color: var(--color-subtle);\n}\n\nkol-link::part(icon) {\n  font-size: 1.25rem;\n}\n\nul li > :is(span, kol-link) {\n  line-height: 1.25rem;\n  height: 20px;\n}\n\nul li:last-child > span {\n  color: var(--color-subtle);\n}";
+var css_248z$w = "li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n  font-size: 0.75rem;\n  color: var(--color-subtle);\n}\n\n.kol-link::part(icon) {\n  font-size: 1.25rem;\n}\n\nul li > :is(span, .kol-link) {\n  line-height: 1.25rem;\n  height: 20px;\n}\n\nul li:last-child > span {\n  color: var(--color-subtle);\n}";
 const breadcrumbCss = css_248z$w;
 
-var css_248z$v = ":is(a, button):focus {\n  outline: none;\n}\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\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\n:is(a, button):disabled > kol-span-wc {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\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\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\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\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/*-----------*/\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\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\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n  box-shadow: none;\n}\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\n:is(a, button).hide-label > kol-span-wc {\n  padding: 0.8rem;\n  width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n  display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n  animation: spin 5s infinite linear;\n}\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\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\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\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}";
+var css_248z$v = ":is(a, button):focus {\n  outline: none;\n}\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\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\n:is(a, button):disabled > .kol-span-wc {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\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\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\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\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/*-----------*/\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\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\n:is(a, button):disabled:hover > .kol-span-wc,\n:is(a, button):focus:hover > .kol-span-wc {\n  box-shadow: none;\n}\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\n:is(a, button).hide-label > .kol-span-wc {\n  padding: 0.8rem;\n  width: unset;\n}\n\n:is(a, button).hide-label > .kol-span-wc > span > span {\n  display: none;\n}\n\n:is(a, button).loading > .kol-span-wc .kol-icon {\n  animation: spin 5s infinite linear;\n}\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\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\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\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}";
 const buttonCss = css_248z$v;
 
-var css_248z$u = ":host > kol-button-group-wc {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing);\n}";
+var css_248z$u = ":host > .kol-button-group-wc {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing);\n}";
 const buttonGroupCss = css_248z$u;
 
-var css_248z$t = ":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\n:is(a, button):focus {\n  outline: none;\n}\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\n:is(a, button):hover {\n  text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n  color: var(--visited);\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\n.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\n.skip:focus {\n  background: white;\n  left: unset;\n  position: unset;\n}";
+var css_248z$t = ":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\n:is(a, button):focus {\n  outline: none;\n}\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\n:is(a, button):hover {\n  text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n  color: var(--visited);\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\n.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\n.skip:focus {\n  background: white;\n  left: unset;\n  position: unset;\n}";
 const buttonLinkCss = css_248z$t;
 
-var css_248z$s = "/* 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\n:host kol-heading-wc {\n  line-height: 1.75rem;\n}\n\n:host div.header {\n  padding: 1rem 1rem 0.5rem 1rem;\n}\n\n:host div.content {\n  padding: 0.5rem 1rem 1rem;\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: 0.5rem 1rem;\n}";
+var css_248z$s = "/* 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\n:host .kol-heading-wc {\n  line-height: 1.75rem;\n}\n\n:host div.header {\n  padding: 1rem 1rem 0.5rem 1rem;\n}\n\n:host div.content {\n  padding: 0.5rem 1rem 1rem;\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: 0.5rem 1rem;\n}";
 const cardCss = css_248z$s;
 
-var css_248z$r = "details > summary {\n  border-radius: var(--border-radius);\n}\n\ndetails kol-indented-text {\n  margin: 0.25rem 0 0 0.65rem;\n}\n\nkol-icon {\n  font-size: 1.2rem;\n}";
+var css_248z$r = "details > summary {\n  border-radius: var(--border-radius);\n}\n\ndetails .kol-indented-text-wc {\n  margin: 0.25rem 0 0 0.65rem;\n}\n\n.kol-icon {\n  font-size: 1.2rem;\n}";
 const detailsCss = css_248z$r;
 
 var css_248z$q = "h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  color: inherit;\n  font-style: normal;\n}\n\nh1,\nh2,\nh3 {\n  font-weight: 700;\n}\n\nh1 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n}\n\nh2 {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\nh3 {\n  font-size: 1.125rem;\n  line-height: 1.5rem;\n}";
@@ -429,46 +489,46 @@ const iconCss = css_248z$p;
 var css_248z$o = ":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}";
 const indentedTextCss = css_248z$o;
 
-var css_248z$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\n:host kol-input.default {\n  grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n  grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n  gap: 0.4rem 0;\n}\n\n.checkbox-container {\n  justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n  display: inherit;\n  min-height: var(--a11y-min-size);\n  order: 2;\n}\n\n:host kol-input > div.input input {\n  margin: 0px;\n}\n\n:host kol-input > label {\n  cursor: pointer;\n  order: 3;\n}\n\n:host kol-input > kol-alert.error {\n  order: 1;\n  padding-top: calc(var(--spacing) / 2);\n  grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n  outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\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\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\n:host input:focus:hover {\n  box-shadow: none;\n}\n\n:host input:active {\n  box-shadow: none;\n}\n\n:host kol-alert {\n  display: block;\n  width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n  margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n  appearance: none;\n  background-color: white;\n  cursor: pointer;\n  transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n  background-color: var(--color-primary);\n  border-color: var(--color-primary);\n}\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\n:host kol-input.default input[type=checkbox]:indeterminate {\n  background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n  color: var(--color-light);\n  margin-left: 0.25rem;\n}\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  outline: transparent solid 1px;\n}\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\n:host kol-input.switch input[type=checkbox]:checked {\n  background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n  transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n  transform: translateX(1em);\n}\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\n:host .disabled {\n  opacity: 0.33;\n}\n\n.button:focus-within {\n  border-radius: var(--border-radius);\n  outline-color: var(--color-primary-variant);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: calc(var(--border-width) * 2);\n}";
+var css_248z$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\n:host .kol-input.default {\n  grid-template-columns: 1.5rem auto;\n}\n\n:host .kol-input.switch {\n  grid-template-columns: 3.5rem auto;\n}\n\n:host .kol-input.button {\n  gap: 0.4rem 0;\n}\n\n.checkbox-container {\n  justify-content: flex-start;\n}\n\n:host .kol-input > div.input {\n  display: inherit;\n  min-height: var(--a11y-min-size);\n  order: 2;\n}\n\n:host .kol-input > div.input input {\n  margin: 0px;\n}\n\n:host .kol-input > label {\n  cursor: pointer;\n  order: 3;\n}\n\n:host .kol-input > .kol-alert.error {\n  order: 1;\n  padding-top: calc(var(--spacing) / 2);\n  grid-column: span 2/auto;\n}\n\n:host .kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\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\n:host .kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\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\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\n:host input:focus:hover {\n  box-shadow: none;\n}\n\n:host input:active {\n  box-shadow: none;\n}\n\n:host .kol-alert {\n  display: block;\n  width: 100%;\n}\n\n/* CHECKBOX */\n:host .kol-input label span {\n  margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n:host .kol-input input[type=checkbox] {\n  appearance: none;\n  background-color: white;\n  cursor: pointer;\n  transition: 0.5s;\n}\n\n:host .kol-input input[type=checkbox]:checked {\n  background-color: var(--color-primary);\n  border-color: var(--color-primary);\n}\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\n:host .kol-input.default input[type=checkbox]:indeterminate {\n  background-color: var(--color-primary);\n}\n\n:host .kol-input.default .icon {\n  color: var(--color-light);\n  margin-left: 0.25rem;\n}\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  outline: transparent solid 1px;\n}\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\n:host .kol-input.switch input[type=checkbox]:checked {\n  background-color: var(--color-primary);\n}\n\n:host .kol-input.switch input[type=checkbox]:checked:before {\n  transform: translateX(2em);\n}\n\n:host .kol-input.switch input[type=checkbox]:indeterminate:before {\n  transform: translateX(1em);\n}\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\n:host .disabled {\n  opacity: 0.33;\n}\n\n.button:focus-within {\n  border-radius: var(--border-radius);\n  outline-color: var(--color-primary-variant);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: calc(var(--border-width) * 2);\n}";
 const inputCheckboxCss = css_248z$n;
 
-var css_248z$m = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput[type=color] {\n  border: none;\n  min-height: 40px !important;\n}\n\ninput[type=color] {\n  background-color: transparent;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$m = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput[type=color] {\n  border: none;\n  min-height: 40px !important;\n}\n\ninput[type=color] {\n  background-color: transparent;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputColorCss = css_248z$m;
 
-var css_248z$l = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$l = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputDateCss = css_248z$l;
 
-var css_248z$k = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$k = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputEmailCss = css_248z$k;
 
-var css_248z$j = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\nkol-input .input input[type=file] {\n  padding-top: calc(0.5em + 2px);\n}\n\ninput {\n  border: none;\n}\n\ninput[type=file] {\n  background-color: transparent;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(button, input, label, option, select, textarea) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, select, textarea, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$j = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\n.kol-input .input input[type=file] {\n  padding-top: calc(0.5em + 2px);\n}\n\ninput {\n  border: none;\n}\n\ninput[type=file] {\n  background-color: transparent;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(button, input, label, option, select, textarea) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, select, textarea, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputFileCss = css_248z$j;
 
-var css_248z$i = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$i = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputNumberCss = css_248z$i;
 
-var css_248z$h = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(button, input, label, option, select, textarea) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, select, textarea, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$h = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(button, input, label, option, select, textarea) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, select, textarea, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputPasswordCss = css_248z$h;
 
-var css_248z$g = "label {\n  cursor: pointer;\n  display: grid;\n  line-height: 20px;\n  gap: calc(var(--spacing) * 2);\n  width: 100%;\n}\n\ninput {\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\ninput:hover {\n  border-color: var(--color-primary);\n  box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\ninput:focus:hover {\n  box-shadow: none;\n}\n\ninput:hover {\n  border-color: var(--color-primary);\n}\n\nkol-alert {\n  display: block;\n  width: 100%;\n}\n\n.required legend > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n/* RADIO */\nfieldset {\n  border: 0px;\n  margin: 0px;\n  padding: 0px;\n  display: grid;\n  gap: 0.25em;\n}\n\nfieldset div {\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\nfieldset div label {\n  cursor: pointer;\n  display: flex;\n  padding-left: calc(var(--spacing) / 2);\n  width: 100%;\n}\n\nfieldset div label span {\n  margin-top: 0.125em;\n}\n\nfieldset div 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\nfieldset div input[type=radio]:before {\n  content: \"\";\n  cursor: pointer;\n  border-radius: 100%;\n  display: block;\n}\n\nfieldset div input[type=radio]:checked:before {\n  background-color: var(--color-primary);\n}\n\nfieldset div input[type=radio]:disabled {\n  cursor: not-allowed;\n  background-color: var(--color-mute-variant);\n}\n\nkol-alert.error {\n  order: 1;\n}\n\nfieldset legend {\n  order: 2;\n  display: contents;\n}\n\nfieldset kol-input {\n  order: 3;\n}\n\nfieldset.error {\n  padding-left: 1rem;\n  border-left: 3px solid var(--color-danger);\n}\n\nkol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nfieldset.error input:focus,\nfieldset.error select:focus,\nfieldset.error textarea:focus {\n  outline-color: var(--color-danger) !important;\n}\n\nfieldset.error kol-alert.error {\n  margin-left: -0.25em;\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\nfieldset.horizontal {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing) calc(var(--spacing) * 2);\n}\n\nfieldset.horizontal legend {\n  display: inline-block;\n  margin-bottom: calc(var(--spacing) / 2);\n}\n\nfieldset .input-slot {\n  gap: var(--spacing);\n}\n\nfieldset div label {\n  padding-left: 0;\n}";
+var css_248z$g = "label {\n  cursor: pointer;\n  display: grid;\n  line-height: 20px;\n  gap: calc(var(--spacing) * 2);\n  width: 100%;\n}\n\ninput {\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\ninput:hover {\n  border-color: var(--color-primary);\n  box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\ninput:focus:hover {\n  box-shadow: none;\n}\n\ninput:hover {\n  border-color: var(--color-primary);\n}\n\n.kol-alert {\n  display: block;\n  width: 100%;\n}\n\n.required legend > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n/* RADIO */\nfieldset {\n  border: 0px;\n  margin: 0px;\n  padding: 0px;\n  display: grid;\n  gap: 0.25em;\n}\n\nfieldset div {\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\nfieldset div label {\n  cursor: pointer;\n  display: flex;\n  padding-left: calc(var(--spacing) / 2);\n  width: 100%;\n}\n\nfieldset div label span {\n  margin-top: 0.125em;\n}\n\nfieldset div 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\nfieldset div input[type=radio]:before {\n  content: \"\";\n  cursor: pointer;\n  border-radius: 100%;\n  display: block;\n}\n\nfieldset div input[type=radio]:checked:before {\n  background-color: var(--color-primary);\n}\n\nfieldset div input[type=radio]:disabled {\n  cursor: not-allowed;\n  background-color: var(--color-mute-variant);\n}\n\n.kol-alert.error {\n  order: 1;\n}\n\nfieldset legend {\n  order: 2;\n  display: contents;\n}\n\nfieldset .kol-input {\n  order: 3;\n}\n\nfieldset.error {\n  padding-left: 1rem;\n  border-left: 3px solid var(--color-danger);\n}\n\n.kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nfieldset.error input:focus,\nfieldset.error select:focus,\nfieldset.error textarea:focus {\n  outline-color: var(--color-danger) !important;\n}\n\nfieldset.error .kol-alert.error {\n  margin-left: -0.25em;\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\nfieldset.horizontal {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing) calc(var(--spacing) * 2);\n}\n\nfieldset.horizontal legend {\n  display: inline-block;\n  margin-bottom: calc(var(--spacing) / 2);\n}\n\nfieldset .input-slot {\n  gap: var(--spacing);\n}\n\nfieldset div label {\n  padding-left: 0;\n}";
 const inputRadioCss = css_248z$g;
 
-var css_248z$f = ".inputs-wrapper {\n  gap: 1rem;\n}\n\nkol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input.icon-left > kol-icon:first-child {\n  margin-right: 0.5rem;\n}\n\n.input.icon-right > kol-icon:last-child {\n  margin-left: 0.5rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(.input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
+var css_248z$f = ".inputs-wrapper {\n  gap: 1rem;\n}\n\n.kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input.icon-left > .kol-icon:first-child {\n  margin-right: 0.5rem;\n}\n\n.input.icon-right > .kol-icon:last-child {\n  margin-left: 0.5rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(.input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n  color: var(--color-text);\n}";
 const inputRangeCss = css_248z$f;
 
-var css_248z$e = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n}";
+var css_248z$e = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ninput {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(input, label) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(input, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n}";
 const inputTextCss = css_248z$e;
 
-var css_248z$d = ":is(a, button):focus {\n  outline: none;\n}\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\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\n:is(a, button):disabled > kol-span-wc {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\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\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\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\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/*-----------*/\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\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\n:is(a, button):disabled:hover > kol-span-wc,\n:is(a, button):focus:hover > kol-span-wc {\n  box-shadow: none;\n}\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\n:is(a, button).hide-label > kol-span-wc {\n  padding: 0.8rem;\n  width: unset;\n}\n\n:is(a, button).hide-label > kol-span-wc > span > span {\n  display: none;\n}\n\n:is(a, button).loading > kol-span-wc kol-icon {\n  animation: spin 5s infinite linear;\n}\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\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\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\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}";
+var css_248z$d = ":is(a, button):focus {\n  outline: none;\n}\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\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\n:is(a, button):disabled > .kol-span-wc {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\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\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\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\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/*-----------*/\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\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\n:is(a, button):disabled:hover > .kol-span-wc,\n:is(a, button):focus:hover > .kol-span-wc {\n  box-shadow: none;\n}\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\n:is(a, button).hide-label > .kol-span-wc {\n  padding: 0.8rem;\n  width: unset;\n}\n\n:is(a, button).hide-label > .kol-span-wc > span > span {\n  display: none;\n}\n\n:is(a, button).loading > .kol-span-wc .kol-icon {\n  animation: spin 5s infinite linear;\n}\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\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\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\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}";
 const linkButtonCss = css_248z$d;
 
-var css_248z$c = ":is(a, button) {\n  color: var(--color-primary);\n  font-style: normal;\n  font-weight: 400;\n  text-decoration-line: underline;\n}\n\n:is(a, button):focus {\n  outline: none;\n}\n\n:is(a, button):focus kol-span-wc {\n  border-radius: var(--border-radius);\n  outline: var(--border-width) solid;\n}\n\n:is(a, button):hover {\n  text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n  color: var(--visited);\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\n.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n  line-height: 1em;\n}\n\n.skip:focus {\n  background: white;\n  left: unset;\n  position: unset;\n}";
+var css_248z$c = ":is(a, button) {\n  color: var(--color-primary);\n  font-style: normal;\n  font-weight: 400;\n  text-decoration-line: underline;\n}\n\n:is(a, button):focus {\n  outline: none;\n}\n\n:is(a, button):focus .kol-span-wc {\n  border-radius: var(--border-radius);\n  outline: var(--border-width) solid;\n}\n\n:is(a, button):hover {\n  text-decoration-thickness: 0.25em;\n}\n\n:is(a, button):visited {\n  color: var(--visited);\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\n.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n  line-height: 1em;\n}\n\n.skip:focus {\n  background: white;\n  left: unset;\n  position: unset;\n}";
 const linkCss = css_248z$c;
 
 var css_248z$b = ":host .overlay .modal {\n  max-height: calc(100% - 32px);\n}";
 const modalCss = css_248z$b;
 
-var css_248z$a = "* {\n  margin: 0;\n  padding: 0;\n}\n\nnav {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  background-color: var(--color-mute);\n  width: 100%;\n}\n\nul {\n  list-style: none;\n}\n\nkol-link-wc,\na {\n  height: 100%;\n  min-height: var(--a11y-min-size);\n  display: flex;\n  place-items: center;\n}\n\n.entry > kol-span-wc > span {\n  width: 100%;\n}\n\n.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n  background-color: var(--color-light);\n  text-decoration: none;\n  color: var(--color-primary);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-style: normal;\n  line-height: 1.5rem;\n  min-height: var(--a11y-min-size);\n  min-width: var(--a11y-min-size);\n  transition-duration: 0.5s;\n  transition-property: background-color, color, border-color;\n  letter-spacing: 0.175px;\n}\n\n.entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {\n  color: var(--color-primary);\n  text-decoration: none;\n}\n\n.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {\n  border-left-color: var(--color-primary-variant);\n  background-color: var(--color-primary-variant);\n}\n\n.entry > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover > :is(a, button, span) {\n  color: var(--color-primary-variant);\n  font-weight: 700;\n  letter-spacing: unset;\n}\n\n.selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n  background-color: var(--color-primary-variant);\n  color: var(--color-primary);\n  font-weight: 700;\n}\n\n.selected > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child > :is(a, button, span) {\n  font-weight: 700;\n}\n\n.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {\n  color: var(--color-primary-variant);\n  letter-spacing: unset;\n}\n\n.entry > kol-span-wc > span,\n.entry :is(a, button) {\n  border-left-color: transparent;\n  border-left-style: solid;\n  border-left-width: 0.5rem;\n  padding: 0.75rem 0.5rem 0.75rem 0.25rem;\n}\n\n.selected :is(a, button),\n[exportparts*=selected] a {\n  border-left-color: var(--color-primary);\n}\n\n/** Compact mode */\n.entry.compact :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {\n  place-items: center;\n}\n\n.entry.compact > kol-span-wc > span {\n  flex-direction: column;\n}\n\n.entry.compact > kol-span-wc > span,\n.entry.compact :is(a, button) {\n  padding-left: 0;\n}";
+var css_248z$a = "* {\n  margin: 0;\n  padding: 0;\n}\n\nnav {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  background-color: var(--color-mute);\n  width: 100%;\n}\n\nul {\n  list-style: none;\n}\n\n.kol-link-wc,\na {\n  height: 100%;\n  min-height: var(--a11y-min-size);\n  display: flex;\n  place-items: center;\n}\n\n.entry > .kol-span-wc > span {\n  width: 100%;\n}\n\n.entry > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n  background-color: var(--color-light);\n  text-decoration: none;\n  color: var(--color-primary);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-style: normal;\n  line-height: 1.5rem;\n  min-height: var(--a11y-min-size);\n  min-width: var(--a11y-min-size);\n  transition-duration: 0.5s;\n  transition-property: background-color, color, border-color;\n  letter-spacing: 0.175px;\n}\n\n.entry > :is(.kol-link-wc, .kol-button-wc):first-child :is(a, button) {\n  color: var(--color-primary);\n  text-decoration: none;\n}\n\n.entry > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {\n  border-left-color: var(--color-primary-variant);\n  background-color: var(--color-primary-variant);\n}\n\n.entry > :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child:hover > :is(a, button, span) {\n  color: var(--color-primary-variant);\n  font-weight: 700;\n  letter-spacing: unset;\n}\n\n.selected > :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n  background-color: var(--color-primary-variant);\n  color: var(--color-primary);\n  font-weight: 700;\n}\n\n.selected > :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child > :is(a, button, span) {\n  font-weight: 700;\n}\n\n.selected :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {\n  color: var(--color-primary-variant);\n  letter-spacing: unset;\n}\n\n.entry > .kol-span-wc > span,\n.entry :is(a, button) {\n  border-left-color: transparent;\n  border-left-style: solid;\n  border-left-width: 0.5rem;\n  padding: 0.75rem 0.5rem 0.75rem 0.25rem;\n}\n\n.selected :is(a, button),\n[exportparts*=selected] a {\n  border-left-color: var(--color-primary);\n}\n\n/** Compact mode */\n.entry.compact :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n  place-items: center;\n}\n\n.entry.compact > .kol-span-wc > span {\n  flex-direction: column;\n}\n\n.entry.compact > .kol-span-wc > span,\n.entry.compact :is(a, button) {\n  padding-left: 0;\n}";
 const navCss = css_248z$a;
 
 var css_248z$9 = ":host {\n  display: grid;\n  gap: 1rem;\n}\n\n:host .navigation-list {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:host .selected button {\n  min-width: var(--a11y-min-size);\n  min-height: var(--a11y-min-size);\n  display: grid;\n  place-items: center;\n  font-family: var(--font-family);\n  cursor: not-allowed;\n  font-weight: 700;\n  border-radius: 50%;\n  border: none;\n  font-style: normal;\n  text-align: center;\n  width: inherit;\n  transition-duration: 0.5s;\n  transition-property: background-color, color, border-color;\n  color: var(--color-primary);\n  background-color: var(--color-mute-variant);\n}\n\n:host > div > span {\n  align-self: flex-end;\n  padding-bottom: 0.5rem;\n  color: var(--color-primary);\n}";
@@ -477,10 +537,10 @@ const paginationCss = css_248z$9;
 var css_248z$8 = ":host progress,\n:host span {\n  display: block;\n  height: 0px;\n  overflow: hidden;\n  width: 0px;\n}\n\n:host svg line:first-child,\n:host svg circle:first-child {\n  fill: transparent;\n  stroke: var(--color-mute-variant);\n}\n\n:host svg line:last-child,\n:host svg circle:last-child {\n  fill: transparent;\n  stroke: var(--color-primary);\n}\n\n.cycle .progress {\n  stroke: var(--color-primary-variant);\n}";
 const progressCss = css_248z$8;
 
-var css_248z$7 = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\nselect {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 2rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\nselect:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\nkol-input.disabled :is(select, label, option) {\n  opacity: 1;\n}\n\nkol-input.disabled :is(select, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n}\n\nselect[multiple] {\n  overflow: auto;\n}\n\nselect option {\n  margin: 1px 0;\n  padding: 0.5em;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nselect option:disabled {\n  cursor: not-allowed;\n}\n\noption:active:not(:disabled),\noption:checked:not(:disabled),\noption:focus:not(:disabled),\noption:hover:not(:disabled) {\n  background: var(--color-primary-variant);\n  color: var(--color-light);\n}";
+var css_248z$7 = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .hint {\n  order: 4;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\nselect {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 2rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\nselect:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.kol-input.disabled :is(select, label, option) {\n  opacity: 1;\n}\n\n.kol-input.disabled :is(select, .input) {\n  background-color: var(--color-mute);\n  border-color: var(--color-mute-variant);\n}\n\nselect[multiple] {\n  overflow: auto;\n}\n\nselect option {\n  margin: 1px 0;\n  padding: 0.5em;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nselect option:disabled {\n  cursor: not-allowed;\n}\n\noption:active:not(:disabled),\noption:checked:not(:disabled),\noption:focus:not(:disabled),\noption:hover:not(:disabled) {\n  background: var(--color-primary-variant);\n  color: var(--color-light);\n}";
 const selectCss = css_248z$7;
 
-var css_248z$6 = "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}";
+var css_248z$6 = ".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}";
 const skipNavCss = css_248z$6;
 
 var css_248z$5 = ".spin {\n  display: inline-block;\n  height: 1rem;\n  position: relative;\n  width: 3rem;\n}\n\n.spin span {\n  animation-timing-function: cubic-bezier(0, 1, 1, 0);\n  border: 0.1rem solid rgb(255, 255, 255);\n  border-radius: 50%;\n  height: 0.8rem;\n  width: 0.8rem;\n  top: 0.1rem;\n  position: absolute;\n}\n\n.spin span:nth-child(1) {\n  background-color: #fc0;\n  z-index: 0;\n  animation: 2s ease 0s infinite normal none running spin1;\n  left: 0.1rem;\n}\n\n.spin span:nth-child(2) {\n  background-color: #f00;\n  z-index: 1;\n  animation: 2s ease 0s infinite normal none running spin2;\n  left: 0.1rem;\n}\n\n.spin span:nth-child(3) {\n  background-color: #000;\n  z-index: 1;\n  animation: 2s ease 0s infinite normal none running spin2;\n  left: 1.1rem;\n}\n\n.spin span:nth-child(4) {\n  background-color: #666;\n  z-index: 0;\n  animation: 2s ease 0s infinite normal none running spin3;\n  left: 2.1rem;\n}\n\n@keyframes spin1 {\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes spin2 {\n  0% {\n    transform: translate(0px, 0px);\n  }\n  100% {\n    transform: translate(1rem, 0px);\n  }\n}\n@keyframes spin3 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n}";
@@ -489,13 +549,13 @@ const spinCss = css_248z$5;
 var css_248z$4 = ".popover {\n  background: #fff;\n}";
 const splitButtonCss = css_248z$4;
 
-var css_248z$3 = ":host * {\n  hyphens: var(--hyphens);\n  font-family: var(--font-family);\n  line-height: var(--line-height);\n  word-break: break-word;\n}\n\n:host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5rem;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-primary);\n}\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\n.table {\n  padding: 0.5rem;\n}\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\ntable {\n  width: 100%;\n  border-spacing: 0;\n}\n\ntable,\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\nth {\n  background-color: var(--color-light);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5rem;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntr:nth-child(even) {\n  background-color: var(--color-mute);\n}\n\nth,\ntd {\n  padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  div.pagination kol-pagination {\n    display: flex;\n    align-items: center;\n  }\n}";
+var css_248z$3 = ":host * {\n  hyphens: var(--hyphens);\n  font-family: var(--font-family);\n  line-height: var(--line-height);\n  word-break: break-word;\n}\n\n:host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5rem;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-primary);\n}\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\n.table {\n  padding: 0.5rem;\n}\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\ntable {\n  width: 100%;\n  border-spacing: 0;\n}\n\ntable,\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\nth {\n  background-color: var(--color-light);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5rem;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntr:nth-child(even) {\n  background-color: var(--color-mute);\n}\n\nth,\ntd {\n  padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  div.pagination .kol-pagination {\n    display: flex;\n    align-items: center;\n  }\n}";
 const tableCss = css_248z$3;
 
-var css_248z$2 = "button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n  display: inline-flex;\n  gap: 2rem;\n  flex-wrap: wrap;\n}\n\nbutton {\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\nbutton:hover {\n  color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n  color: var(--color-primary);\n}\n\nbutton:not(.selected) kol-span-wc > span {\n  padding-bottom: 0.25em;\n}\n\nbutton.selected kol-span-wc > span {\n  border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n  gap: 0.5rem;\n}\n\n:host > div > div {\n  padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n  height: 100%;\n}\n\ndiv.grid {\n  height: 100%;\n}\n\n:host > .tabs-align-right {\n  display: grid;\n  grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n  display: grid;\n  order: 2;\n}\n\n:host > .tabs-align-left {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n  display: grid;\n  order: 0;\n}\n\n:host > .tabs-align-bottom {\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n  order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n  display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n  margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n  margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n  order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n  display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n  margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n  margin: 0px 1rem;\n}\n\n:host > div {\n  display: grid;\n}\n\n:host > div.tabs-align-left {\n  grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n  grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n  order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n  order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n  gap: inherit;\n}\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\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\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\n:host kol-button-group-wc button {\n  border: none;\n}";
+var css_248z$2 = "button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host .kol-button-group-wc {\n  display: inline-flex;\n  gap: 2rem;\n  flex-wrap: wrap;\n}\n\nbutton {\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\nbutton:hover {\n  color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n  color: var(--color-primary);\n}\n\nbutton:not(.selected) .kol-span-wc > span {\n  padding-bottom: 0.25em;\n}\n\nbutton.selected .kol-span-wc > span {\n  border-bottom: 0.25em solid;\n}\n\nbutton .kol-span-wc > span {\n  gap: 0.5rem;\n}\n\n:host > div > div {\n  padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n  height: 100%;\n}\n\ndiv.grid {\n  height: 100%;\n}\n\n:host > .tabs-align-right {\n  display: grid;\n  grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right .kol-button-group-wc {\n  display: grid;\n  order: 2;\n}\n\n:host > .tabs-align-left {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left .kol-button-group-wc {\n  display: grid;\n  order: 0;\n}\n\n:host > .tabs-align-bottom {\n  display: grid;\n  grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc {\n  order: 2;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc > div {\n  display: flex;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n  margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n  margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top .kol-button-group-wc {\n  order: 0;\n}\n\n:host > .tabs-align-top .kol-button-group-wc > div {\n  display: flex;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n  margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div {\n  margin: 0px 1rem;\n}\n\n:host > div {\n  display: grid;\n}\n\n:host > div.tabs-align-left {\n  grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n  grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-top .kol-button-group-wc {\n  order: 0;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n  order: 1;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n  gap: inherit;\n}\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\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\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\n:host .kol-button-group-wc button {\n  border: none;\n}";
 const tabsCss = css_248z$2;
 
-var css_248z$1 = "kol-input {\n  gap: 0.25rem;\n}\n\nkol-input .error {\n  order: 1;\n}\n\nkol-input label {\n  order: 2;\n}\n\nkol-input .input {\n  order: 3;\n}\n\nkol-input .counter {\n  order: 4;\n}\n\nkol-input .hint {\n  order: 5;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ntextarea {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\nkol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n  overflow: auto;\n}\n\ntextarea {\n  display: block;\n}\n\n.input {\n  position: relative;\n}";
+var css_248z$1 = ".kol-input {\n  gap: 0.25rem;\n}\n\n.kol-input .error {\n  order: 1;\n}\n\n.kol-input label {\n  order: 2;\n}\n\n.kol-input .input {\n  order: 3;\n}\n\n.kol-input .counter {\n  order: 4;\n}\n\n.kol-input .hint {\n  order: 5;\n  font-size: 0.9rem;\n  font-style: italic;\n}\n\ntextarea {\n  border: none;\n}\n\ninput::placeholder {\n  color: var(--color-subtle);\n}\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\n.input > .kol-icon {\n  width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n  padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n  padding-right: var(--spacing);\n}\n\n.input:hover {\n  border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n  cursor: not-allowed;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\n.kol-input.error {\n  border-left: 3px solid var(--color-danger);\n  padding-left: 1rem;\n}\n\n.kol-input.error .input:focus-within {\n  outline-color: var(--color-danger) !important;\n}\n\n.kol-input.error .kol-alert.error {\n  color: var(--color-danger);\n  font-weight: 700;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n  overflow: auto;\n}\n\ntextarea {\n  display: block;\n}\n\n.input {\n  position: relative;\n}";
 const textareaCss = css_248z$1;
 
 var css_248z = ":host {\n  top: 1rem;\n  right: 1rem;\n  width: 440px;\n}\n\n.toast {\n  margin-top: 1rem;\n}";