@public-ui/themes 1.7.13 → 1.7.15

package/dist/index.mjs

@@ -33,6 +33,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];
@@ -85,25 +88,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);
 	            }
 	        };
@@ -111,16 +122,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") {
@@ -160,10 +191,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) {}
 	          }
@@ -182,7 +215,6 @@ var loglevel = {exports: {}};
 	          // Use localStorage if available
 	          try {
 	              window.localStorage.removeItem(storageKey);
-	              return;
 	          } catch (ignore) {}
 
 	          // Use session cookie as fallback
@@ -192,6 +224,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
@@ -206,37 +250,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) {
@@ -247,12 +290,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);
 	    }
 
 	    /*
@@ -261,18 +320,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;
 	    };
@@ -299,7 +359,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";
@@ -448,8 +508,8 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding: 0;
 	}
 	*[tabindex]:focus,
-	kol-input:not(.checkbox, .radio) .input:focus-within,
-	kol-input:is(.checkbox, .radio) input:focus,
+	.kol-input:not(.checkbox, .radio) .input:focus-within,
+	.kol-input:is(.checkbox, .radio) input:focus,
 	summary:focus {
 		cursor: pointer;
 		outline-color: var(--color-ocean);
@@ -466,27 +526,27 @@ const BMF = KoliBri.createTheme("bmf", {
 			transform: rotate(360deg);
 		}
 	}
-	kol-heading-wc {
+	.kol-heading-wc {
 		font-weight: 700;
 	}
-	kol-tooltip-wc .tooltip-floating {
+	.kol-tooltip-wc .tooltip-floating {
 		border: 1px solid var(--color-metal);
 		border-radius: var(--border-radius);
 	}
-	kol-tooltip-wc .tooltip-arrow {
+	.kol-tooltip-wc .tooltip-arrow {
 		border: 1px solid var(--color-metal);
 	}
-	kol-tooltip-wc .tooltip-area {
+	.kol-tooltip-wc .tooltip-area {
 		background-color: var(--color-white);
 		color: var(--color-black);
 	}
-	kol-tooltip-wc .tooltip-content {
+	.kol-tooltip-wc .tooltip-content {
 		border-radius: var(--border-radius);
 		line-height: 1.5em;
 		padding: 0.5rem 0.75rem;
 	}
-	kol-span-wc,
-	kol-span-wc > span {
+	.kol-span-wc,
+	.kol-span-wc > span {
 		gap: 0.5em;
 	}`,
   "KOL-BUTTON": `:is(a, button) {
@@ -495,14 +555,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button):focus {
 		outline: none;
 	}
-	:is(a, button):focus kol-span-wc {
+	:is(a, button):focus .kol-span-wc {
 		outline-color: var(--color-ocean);
 		outline-offset: 2px;
 		outline-style: solid;
 		outline-width: 3px;
 		transition: outline-offset 0.2s linear;
 	}
-	:is(a, button) > kol-span-wc {
+	:is(a, button) > .kol-span-wc {
 		font-weight: 700;
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
@@ -514,121 +574,121 @@ const BMF = KoliBri.createTheme("bmf", {
 		transition-duration: 0.5s;
 		transition-property: background-color, color, border-color;
 	}
-	:is(a, button):disabled > kol-span-wc {
+	:is(a, button):disabled > .kol-span-wc {
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
-	.primary :is(a, button) > kol-span-wc,
-	.primary :is(a, button):disabled:hover > kol-span-wc {
+	.primary :is(a, button) > .kol-span-wc,
+	.primary :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-midnight);
 		border-color: var(--color-midnight);
 		color: var(--color-white);
 	}
-	.secondary :is(a, button) > kol-span-wc,
-	.secondary :is(a, button):disabled:hover > kol-span-wc,
-	.normal :is(a, button) > kol-span-wc,
-	.normal :is(a, button):disabled:hover > kol-span-wc {
+	.secondary :is(a, button) > .kol-span-wc,
+	.secondary :is(a, button):disabled:hover > .kol-span-wc,
+	.normal :is(a, button) > .kol-span-wc,
+	.normal :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-white);
 		border-color: var(--color-midnight);
 		color: var(--color-midnight);
 	}
-	.danger :is(a, button) > kol-span-wc,
-	.danger :is(a, button):disabled:hover > kol-span-wc {
+	.danger :is(a, button) > .kol-span-wc,
+	.danger :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-red);
 		border-color: var(--color-red);
 		color: var(--color-white);
 	}
-	.success :is(a, button) > kol-span-wc,
-	.success :is(a, button):disabled:hover > kol-span-wc {
+	.success :is(a, button) > .kol-span-wc,
+	.success :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-green);
 		border-color: var(--color-green);
 		color: var(--color-white);
 	}
-	.ghost :is(a, button) > kol-span-wc,
-	.ghost :is(a, button):disabled:hover > kol-span-wc {
+	.ghost :is(a, button) > .kol-span-wc,
+	.ghost :is(a, button):disabled:hover > .kol-span-wc {
 		border-color: var(--color-white);
 		background-color: var(--color-white);
 		box-shadow: none;
 		color: var(--color-midnight);
 	} /*-----------*/
-	.primary :is(a, button):active > kol-span-wc,
-	.primary :is(a, button):hover > kol-span-wc,
-	.secondary :is(a, button):active > kol-span-wc,
-	.secondary :is(a, button):hover > kol-span-wc,
-	.normal :is(a, button):active > kol-span-wc,
-	.normal :is(a, button):hover > kol-span-wc,
-	.danger :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):hover > kol-span-wc,
-	.success :is(a, button):active > kol-span-wc,
-	.success :is(a, button):hover > kol-span-wc,
-	.ghost :is(a, button):active > kol-span-wc,
-	.ghost :is(a, button):hover > kol-span-wc {
+	.primary :is(a, button):active > .kol-span-wc,
+	.primary :is(a, button):hover > .kol-span-wc,
+	.secondary :is(a, button):active > .kol-span-wc,
+	.secondary :is(a, button):hover > .kol-span-wc,
+	.normal :is(a, button):active > .kol-span-wc,
+	.normal :is(a, button):hover > .kol-span-wc,
+	.danger :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):hover > .kol-span-wc,
+	.success :is(a, button):active > .kol-span-wc,
+	.success :is(a, button):hover > .kol-span-wc,
+	.ghost :is(a, button):active > .kol-span-wc,
+	.ghost :is(a, button):hover > .kol-span-wc {
 		background-color: var(--color-ocean);
 		border-color: var(--color-ocean);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
 		color: var(--color-white);
 	}
-	.danger :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):hover > kol-span-wc {
+	.danger :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):hover > .kol-span-wc {
 		background-color: var(--color-crimson);
 		border-color: var(--color-crimson);
 	}
-	:is(a, button):disabled:hover > kol-span-wc,
-	:is(a, button):focus:hover > kol-span-wc {
+	:is(a, button):disabled:hover > .kol-span-wc,
+	:is(a, button):focus:hover > .kol-span-wc {
 		box-shadow: none;
 	}
-	.primary :is(a, button):active > kol-span-wc,
-	.secondary :is(a, button):active > kol-span-wc,
-	.normal :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):active > kol-span-wc,
-	.success :is(a, button):active > kol-span-wc,
-	.ghost :is(a, button):active > kol-span-wc {
+	.primary :is(a, button):active > .kol-span-wc,
+	.secondary :is(a, button):active > .kol-span-wc,
+	.normal :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):active > .kol-span-wc,
+	.success :is(a, button):active > .kol-span-wc,
+	.ghost :is(a, button):active > .kol-span-wc {
 		border-color: var(--color-white);
 		box-shadow: none;
 		outline: none;
 	}
-	:is(a, button).hide-label > kol-span-wc {
+	:is(a, button).hide-label > .kol-span-wc {
 		padding: 8px;
 		width: unset;
 	}
-	:is(a, button).hide-label > kol-span-wc > span > span {
+	:is(a, button).hide-label > .kol-span-wc > span > span {
 		display: none;
 	}
-	:is(a, button).loading > kol-span-wc kol-icon {
+	:is(a, button).loading > .kol-span-wc .kol-icon {
 		animation: spin 5s infinite linear;
 	}
   /** button with inline focus */
-	:is(a, button).focus-inline:focus > kol-span-wc {
+	:is(a, button).focus-inline:focus > .kol-span-wc {
 		outline-offset: -2px;
 	}
 	/** :is(a,button) with transparent background */
-	:is(a, button).transparent > kol-span-wc > span,
-	.ghost :is(a, button).transparent > kol-span-wc > span,
-	:is(a, button).transparent > kol-span-wc {
+	:is(a, button).transparent > .kol-span-wc > span,
+	.ghost :is(a, button).transparent > .kol-span-wc > span,
+	:is(a, button).transparent > .kol-span-wc {
 		background-color: transparent;
 		border-color: transparent;
 	}
 	/** CUSTOM_CLASS */
-	:is(a, button).icon-only > kol-span-wc {
+	:is(a, button).icon-only > .kol-span-wc {
 		padding: 8px;
 		width: unset;
 	}
-	:is(a, button).icon-only > kol-span-wc > span > span {
+	:is(a, button).icon-only > .kol-span-wc > span > span {
 		display: block;
 	}`,
-  "KOL-INPUT-TEXT": `kol-input {
+  "KOL-INPUT-TEXT": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -647,7 +707,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -675,37 +735,37 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, .input) {
+	.kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 	}`,
-  "KOL-INPUT-PASSWORD": `kol-input {
+  "KOL-INPUT-PASSWORD": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -724,7 +784,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -752,38 +812,38 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(button, input, label, option, select, textarea) {
+	.kol-input.disabled :is(button, input, label, option, select, textarea) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, select, textarea, .input) {
+	.kol-input.disabled :is(input, select, textarea, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-NUMBER": `kol-input {
+  "KOL-INPUT-NUMBER": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -802,7 +862,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -829,38 +889,38 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, .input) {
+	.kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-DATE": `kol-input {
+  "KOL-INPUT-DATE": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -879,7 +939,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -906,38 +966,38 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, .input) {
+	.kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-EMAIL": `kol-input {
+  "KOL-INPUT-EMAIL": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -956,7 +1016,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -984,43 +1044,43 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, .input) {
+	.kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-FILE": `kol-input {
+  "KOL-INPUT-FILE": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	kol-input .input input[type="file"] {
+	.kol-input .input input[type="file"] {
 		padding-top: calc(0.5em + 2px);
 	}
 	input {
@@ -1040,7 +1100,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -1068,49 +1128,49 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(button, input, label, option, select, textarea) {
+	.kol-input.disabled :is(button, input, label, option, select, textarea) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, select, textarea, .input) {
+	.kol-input.disabled :is(input, select, textarea, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-TEXTAREA": `kol-input {
+  "KOL-TEXTAREA": `.kol-input {
 		gap: 0.25em;
 		display: grid;
 		grid-template-areas: "error error" "label counter" "input input" "hint hint";
 		grid-template-columns: 1fr 115px;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 		grid-area: error;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 		grid-area: label;
 	}
-	kol-input .counter {
+	.kol-input .counter {
 		order: 2;
 		grid-area: counter;
 		justify-self: end;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 		grid-area: input;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -1130,7 +1190,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -1158,14 +1218,14 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
@@ -1189,10 +1249,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-grey);
 	}`,
   "KOL-ALERT": `.msg,
-	.msg {
-		border-width: 0;
-	}
-	kol-alert-wc {
+	.kol-alert-wc {
 		border-width: 2px;
 		border-style: solid;
 		border-radius: 5px;
@@ -1202,12 +1259,15 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: transparent;
 		background-color: white;
 	}
-	kol-alert-wc > .heading {
+	.msg {
+		border-width: 0;
+	}
+	.kol-alert-wc > .heading {
 		display: flex;
 		gap: 0.5em;
 		place-items: center;
 	}
-	kol-alert-wc > .heading > div {
+	.kol-alert-wc > .heading > div {
 		display: grid;
 		gap: var(--kolibri-spacing);
 	}
@@ -1217,14 +1277,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	.msg > .heading {
 		place-items: flex-start;
 	}
-	.msg > .heading > kol-icon {
+	.msg > .heading > .kol-icon {
 		place-self: baseline;
 	}
-	kol-alert-wc > .heading > div {
+	.kol-alert-wc > .heading > div {
 		display: grid;
 		gap: var(--spacing);
 	}
-	kol-alert-wc > .heading > kol-button-wc.close {
+	.kol-alert-wc > .heading > .kol-button-wc.close {
 		place-self: center;
 	}
 	.msg {
@@ -1263,7 +1323,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	.heading-icon {
 		color: white;
 	}
-	kol-alert-wc .heading .heading-icon {
+	.kol-alert-wc .heading .heading-icon {
 		padding: 0;
 	}
 	.msg > .heading > .heading-icon {
@@ -1273,23 +1333,23 @@ const BMF = KoliBri.createTheme("bmf", {
 	.msg > .heading > .heading-icon::part(icon) {
 		line-height: 1.375rem;
 	}
-	.msg > .heading > div > kol-heading-wc {
+	.msg > .heading > div > .kol-heading-wc {
 		line-height: 20px;
 		padding-top: 0.125rem;
 	}
-	.msg.default .heading > div > kol-heading-wc {
+	.msg.default .heading > div > .kol-heading-wc {
 		color: var(--color-grey);
 	}
-	.msg.error .heading > div > kol-heading-wc {
+	.msg.error .heading > div > .kol-heading-wc {
 		color: var(--color-red);
 	}
-	.msg.info .heading > div > kol-heading-wc {
+	.msg.info .heading > div > .kol-heading-wc {
 		color: var(--color-midnight);
 	}
-	.msg.success .heading > div > kol-heading-wc {
+	.msg.success .heading > div > .kol-heading-wc {
 		color: var(--color-green);
 	}
-	.msg.warning .heading > div > kol-heading-wc {
+	.msg.warning .heading > div > .kol-heading-wc {
 		color: var(--color-orange);
 	} /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/
 	.msg.default .close .icon {
@@ -1329,30 +1389,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		justify-self: right;
 		margin-top: -4px;
 	}
-	.card > .heading kol-heading-wc {
+	.card > .heading .kol-heading-wc {
 		width: 100%;
 		color: white;
 		display: flex;
 		font-size: 1.25rem;
 		line-height: 1.25rem;
 	}
-	.card > .heading kol-heading-wc > * {
+	.card > .heading .kol-heading-wc > * {
 		margin: auto 0;
 	}
-	.card > .heading kol-button-wc button:focus {
+	.card > .heading .kol-button-wc button:focus {
 		outline-color: var(--color-white);
 		outline-offset: -3px;
 		outline-style: solid;
 		outline-width: 3px;
 		transition: outline 0.1s linear;
 	}
-	.card > .heading kol-button-wc button:hover {
+	.card > .heading .kol-button-wc button:hover {
 		background-color: rgba(32, 32, 32, 0.2);
 	}
-	.card > .heading kol-button-wc button:active {
+	.card > .heading .kol-button-wc button:active {
 		background-color: rgba(32, 32, 32, 0.4);
 	}
-	.card > .heading kol-button-wc button:hover:focus {
+	.card > .heading .kol-button-wc button:hover:focus {
 		background-color: rgba(32, 32, 32, 0.1);
 	}
 	.card > .content {
@@ -1448,17 +1508,17 @@ const BMF = KoliBri.createTheme("bmf", {
 	.close > button {
 		padding: 8px;
 	}
-	.close > button kol-icon {
+	.close > button .kol-icon {
 		display: flex;
 		width: 1em;
 		height: 1em;
 		font-size: 1rem;
 	}
-	.close > button kol-icon::part(icon) {
+	.close > button .kol-icon::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 	}
-	.close > button kol-icon::part(icon)::before {
+	.close > button .kol-icon::part(icon)::before {
 		content: "\\f00d";
 	}
 	.close > button:active {
@@ -1504,30 +1564,30 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > span.smart-button {
 		align-items: center;
 	}
-	:host > span kol-button-wc:hover > button {
+	:host > span .kol-button-wc:hover > button {
 		background-color: var(--color-ocean);
 		color: var(--color-white);
 	}
-	:host > span kol-button-wc > button {
+	:host > span .kol-button-wc > button {
 		color: inherit;
 		font-size: 1rem;
 		border-top-right-radius: 0.3125rem;
 		border-bottom-right-radius: 0.3125rem;
 		padding: 2px;
 	}
-	:host > span kol-span-wc {
+	:host > span .kol-span-wc {
 		padding: 0.25rem 0.75rem;
 	}
-	:host > span > kol-span-wc {
+	:host > span > .kol-span-wc {
 		align-items: center;
 		font-style: normal;
 		gap: 0.5rem;
 	}
-	:host > span > kol-span-wc > span {
+	:host > span > .kol-span-wc > span {
 		display: flex;
 		gap: 0.25rem;
 	}`,
-  "KOL-BUTTON-GROUP": `:host > kol-button-group-wc {
+  "KOL-BUTTON-GROUP": `:host > .kol-button-group-wc {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.5em;
@@ -1548,7 +1608,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button):focus {
 		outline: none;
 	}
-	:is(a, button):focus kol-span-wc {
+	:is(a, button):focus .kol-span-wc {
 		border-radius: var(--border-radius);
 		outline: 2px solid;
 	}
@@ -1577,18 +1637,18 @@ const BMF = KoliBri.createTheme("bmf", {
   "KOL-DETAILS": `details > summary {
 		border-radius: var(--border-radius);
 	}
-	details kol-indented-text {
+	details .kol-indented-text-wc {
 		margin: 0.25em 0px 0px 0.65em;
 	}
-	kol-icon::part(icon) {
+	.kol-icon::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 		margin-right: 0.5rem;
 	}
-	details[open] kol-icon::part(icon):before {
+	details[open] .kol-icon::part(icon):before {
 		content: "\\f078";
 	}
-	details:not([open]) kol-icon::part(icon):before {
+	details:not([open]) .kol-icon::part(icon):before {
 		content: "\\f054";
 	}`,
   "KOL-SPIN": `.spin {
@@ -1705,19 +1765,19 @@ const BMF = KoliBri.createTheme("bmf", {
 		line-height: 1.5rem;
 		alignment-baseline: central;
 	}`,
-  "KOL-SELECT": `kol-input {
+  "KOL-SELECT": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -1736,17 +1796,17 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
 		padding-left: 1em;
 		padding-right: 1em;
 	}
-	.input.icon-left kol-icon:first-child {
+	.input.icon-left .kol-icon:first-child {
 		margin-right: 0.5em;
 	}
-	.input.icon-right kol-icon:last-child {
+	.input.icon-right .kol-icon:last-child {
 		margin-left: 0.5em;
 	}
 	.input > input:first-child {
@@ -1765,21 +1825,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(select, label, option) {
+	.kol-input.disabled :is(select, label, option) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(select, .input) {
+	.kol-input.disabled :is(select, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 	}
@@ -1802,19 +1862,19 @@ const BMF = KoliBri.createTheme("bmf", {
 		background: var(--color-ocean);
 		color: white;
 	}`,
-  "KOL-INPUT-COLOR": `kol-input {
+  "KOL-INPUT-COLOR": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -1840,7 +1900,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -1868,53 +1928,53 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, .input) {
+	.kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-ACCORDION": `kol-span-wc > span {
+  "KOL-ACCORDION": `.kol-span-wc > span {
 		display: flex;
 		place-items: baseline center;
 		text-align: left;
 	}
-	:host > div > kol-heading-wc button {
+	:host > div > .kol-heading-wc button {
 		border-radius: var(--border-radius);
 		min-height: 22px;
 		padding: 12px 8px;
 	}
-	:host > div > kol-heading-wc button kol-span-wc {
+	:host > div > .kol-heading-wc button .kol-span-wc {
 		font-weight: 700;
 		font-size: 1.125rem;
 		line-height: 20px;
 		gap: 0.5rem;
 	}
-	:host > div > kol-heading-wc button kol-span-wc > span {
+	:host > div > .kol-heading-wc button .kol-span-wc > span {
 		gap: 0.5em;
 	}
-	:host > div > kol-heading-wc button kol-icon::part(icon) {
+	:host > div > .kol-heading-wc button .kol-icon::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 		color: var(--color-midnight);
 	}
-	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
+	:host > div.open > .kol-heading-wc button .kol-icon::part(icon)::before {
 		content: "\\f078";
 	}
-	:host > div:not(.open) > kol-heading-wc button kol-icon::part(icon)::before {
+	:host > div:not(.open) > .kol-heading-wc button .kol-icon::part(icon)::before {
 		content: "\\f054";
 	}
 	:host > div {
@@ -1953,7 +2013,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		outline-color: var(--color-ocean);
 		outline-style: solid;
 		outline-width: 3px;
@@ -2001,8 +2061,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	td {
 		padding: 1em 0;
 	}
-	th kol-button,
-	td kol-button {
+	th .kol-button,
+	td .kol-button {
 		margin-top: -0.75rem;
 		margin-bottom: -0.75rem;
 	}
@@ -2026,7 +2086,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		:host > div:last-child > div:last-child {
 			grid-auto-flow: column;
 		}
-		:host > div:last-child kol-pagination {
+		:host > div:last-child .kol-pagination {
 			display: flex;
 			gap: 1rem;
 		}
@@ -2043,19 +2103,19 @@ const BMF = KoliBri.createTheme("bmf", {
 	ul {
 		list-style: none;
 	}
-	kol-link-wc,
+	.kol-link-wc,
 	a {
 		height: 100%;
 		min-height: 44px;
 		display: flex;
 		place-items: center;
 	}
-	.entry > kol-button-link-text-switch {
+	.entry > .kol-button-link-text-switch {
 		width: 100%;
 	}
 	.entry
-		> kol-button-link-text-switch
-		> :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+		> .kol-button-link-text-switch
+		> :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {
 		background-color: var(--color-white);
 		text-decoration: none;
 		color: var(--color-midnight);
@@ -2071,21 +2131,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		letter-spacing: 0.175px;
 	}
 	.entry
-		> kol-button-link-text-switch
-		> :is(kol-link-wc, kol-button-wc):first-child:is(a, button) {
+		> .kol-button-link-text-switch
+		> :is(.kol-link-wc, .kol-button-wc):first-child:is(a, button) {
 		color: var(--color-midnight);
 		text-decoration: none;
 	}
 	.entry
-		> kol-button-link-text-switch
-		> :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+		> .kol-button-link-text-switch
+		> :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {
 		border-left-color: var(--color-ocean);
 		background-color: var(--color-ocean);
 		letter-spacing: unset;
 	}
 	.entry
-		> kol-button-link-text-switch
-		> :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover
+		> .kol-button-link-text-switch
+		> :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child:hover
 		> :is(a, button, span) {
 		color: var(--color-white);
 		background-color: var(--color-ocean);
@@ -2093,54 +2153,54 @@ const BMF = KoliBri.createTheme("bmf", {
 		letter-spacing: unset;
 	}
 	:is(.active, .selected).list.entry
-		> kol-button-link-text-switch
-		> :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+		> .kol-button-link-text-switch
+		> :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {
 		background-color: var(--color-smoke);
 	}
 	:is(.active, .selected)
 		> .entry
-		> kol-button-link-text-switch
-		> :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+		> .kol-button-link-text-switch
+		> :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {
 		background-color: var(--color-ice);
 		color: var(--color-midnight);
 		font-weight: 700;
 	}
 	:is(.active, .selected)
 		> .entry
-		> kol-button-link-text-switch
-		> :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child
+		> .kol-button-link-text-switch
+		> :is(.kol-link-wc, .kol-button-wc, .kol-span-wc):first-child
 		> :is(a, button, span) {
 		font-weight: 700;
 	}
 	:is(.active, .selected)
 		> .entry
-		> kol-button-link-text-switch
-		> :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+		> .kol-button-link-text-switch
+		> :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child:hover {
 		color: var(--color-white);
 		letter-spacing: unset;
 	}
-	.entry > kol-button-link-text-switch > kol-span-wc > span,
+	.entry > .kol-button-link-text-switch > .kol-span-wc > span,
 	.entry :is(a, button) {
 		border-left-color: transparent;
 		border-left-style: solid;
 		border-left-width: 0.5rem;
 		padding: 0.75rem 0.5rem 0.75rem 0.25rem;
 	}
-	:is(.active, .selected) kol-button-link-text-switch :is(a, button),
+	:is(.active, .selected) .kol-button-link-text-switch :is(a, button),
 	[exportparts*="selected"] a {
 		border-left-color: var(--color-midnight);
 	}
-	:is(kol-button-wc button, kol-link-wc a) {
+	:is(.kol-button-wc button, .kol-link-wc a) {
 		color: var(--color-midnight);
 	}
-	kol-link-wc a {
+	.kol-link-wc a {
 		text-decoration: none;
 	}
-	kol-link-wc kol-icon {
+	.kol-link-wc .kol-icon {
 		display: none;
 	}
 	/** Compact mode */
-	.entry.hide-label :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+	.entry.hide-label :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {
 		place-items: center;
 	}
 	.entry.hide-label :is(a, button) {
@@ -2157,7 +2217,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		box-shadow: 0 0 0.25rem var(--color-grey);
 		border-radius: 0.25rem;
 	}
-	:host kol-heading-wc {
+	:host .kol-heading-wc {
 		line-height: 1.75rem;
 	}
 	:host div.header {
@@ -2174,53 +2234,53 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-top: 2px solid var(--color-ice);
 	}`,
   "KOL-INPUT-CHECKBOX": `/* INPUT */
-	:host kol-input {
+	:host .kol-input {
 		display: grid;
 		align-items: center;
 		justify-items: left;
 		width: 100%;
 		min-height: 44px;
 	}
-	:host kol-input.default:not(.hide-label) {
+	:host .kol-input.default:not(.hide-label) {
 		grid-template-columns: 1.5rem auto;
 		gap: 0.4em;
 	}
-	:host kol-input.switch:not(.hide-label) {
+	:host .kol-input.switch:not(.hide-label) {
 		grid-template-columns: 3.5rem auto;
 		gap: 0.4em;
 	}
-	:host kol-input > div.input {
+	:host .kol-input > div.input {
 		display: inherit;
 		min-height: 44px;
 		order: 2;
 	}
-	:host kol-input > div.input input {
+	:host .kol-input > div.input input {
 		margin: 0px;
 	}
-	:host kol-input:not(.disabled) :is(.input, label) {
+	:host .kol-input:not(.disabled) :is(.input, label) {
 		cursor: pointer;
 	}
-	:host kol-input.disabled :is(.input, label) {
+	:host .kol-input.disabled :is(.input, label) {
 		cursor: not-allowed;
 	}
-	:host kol-input > label {
+	:host .kol-input > label {
 		order: 3;
 	}
-	:host kol-input > kol-alert.error {
+	:host .kol-input > .kol-alert.error {
 		order: 1;
 		padding-top: 0.25em;
 		grid-column: span 2 / auto;
 	}
-	:host kol-input.error:not(.hidden-error) {
+	:host .kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	:host kol-input.error input:focus,
-	kol-input.error select:focus,
-	kol-input.error textarea:focus {
+	:host .kol-input.error input:focus,
+	.kol-input.error select:focus,
+	.kol-input.error textarea:focus {
 		outline-color: var(--color-red) !important;
 	}
-	:host kol-input.error kol-alert.error {
+	:host .kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
@@ -2234,14 +2294,14 @@ const BMF = KoliBri.createTheme("bmf", {
 		line-height: 24px;
 		font-size: 1rem;
 	}
-	:host kol-input.default .checkbox-container {
+	:host .kol-input.default .checkbox-container {
 		justify-content: flex-start;
 	}
-	:host kol-input.default input[type='checkbox']:indeterminate {
+	:host .kol-input.default input[type='checkbox']:indeterminate {
 		background-color: var(--color-midnight);
 		border-color: var(--color-midnight);
 	}
-	:host kol-input.default .icon {
+	:host .kol-input.default .icon {
 		color: var(--color-white);
 		margin: -0.125rem 0 0 0.25rem; /* visually align */
 	}
@@ -2255,30 +2315,30 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host input:active {
 		box-shadow: none;
 	}
-	:host kol-alert {
+	:host .kol-alert {
 		display: block;
 		width: 100%;
 	} /* CHECKBOX */
-	:host kol-input label span {
+	:host .kol-input label span {
 		margin-top: 0.125rem;
 	}
 	:host .required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	:host kol-input input[type="checkbox"] {
+	:host .kol-input input[type="checkbox"] {
 		appearance: none;
 		background-color: white;
 		transition: 0.5s;
 	}
-	:host kol-input input[type="checkbox"]:before {
+	:host .kol-input input[type="checkbox"]:before {
 		content: "";
 	}
-	:host kol-input input[type="checkbox"]:checked {
+	:host .kol-input input[type="checkbox"]:checked {
 		background-color: var(--color-midnight);
 		border-color: var(--color-midnight);
 	}
-	:host kol-input.default input[type="checkbox"] {
+	:host .kol-input.default input[type="checkbox"] {
 		border-radius: var(--border-radius);
 		height: calc(6 * var(--spacing));
 		min-width: calc(6 * var(--spacing));
@@ -2296,7 +2356,7 @@ const BMF = KoliBri.createTheme("bmf", {
 			content: '\\f068';
 		}
 	}
-	:host kol-input.switch input[type="checkbox"] {
+	:host .kol-input.switch input[type="checkbox"] {
 		min-width: 3.5em;
 		width: 3.5em;
 		background-color: var(--color-grey);
@@ -2306,7 +2366,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		position: relative;
 		outline: transparent solid 1px; /* Visible with forced colors */
 	}
-	:host kol-input.switch input[type="checkbox"]:before {
+	:host .kol-input.switch input[type="checkbox"]:before {
 		-webkit-transition: 0.5s;
 		-moz-transition: 0.5s;
 		-ms-transition: 0.5s;
@@ -2319,20 +2379,20 @@ const BMF = KoliBri.createTheme("bmf", {
 		background-color: white;
 		position: absolute;
 	}
-	:host kol-input.switch input[type="checkbox"]:checked {
+	:host .kol-input.switch input[type="checkbox"]:checked {
 		background-color: var(--color-midnight);
 	}
-	:host kol-input.switch input[type="checkbox"]:checked:before {
+	:host .kol-input.switch input[type="checkbox"]:checked:before {
 		-webkit-transform: translateX(2em);
 		-moz-transform: translateX(2em);
 		-ms-transform: translateX(2em);
 		transform: translateX(2em);
 		--tw-bg-opacity: 1;
 	}
-	:host kol-input.switch input[type="checkbox"]:indeterminate {
+	:host .kol-input.switch input[type="checkbox"]:indeterminate {
 		--tw-bg-opacity: 1;
 	}
-	:host kol-input.switch input[type="checkbox"]:indeterminate:before {
+	:host .kol-input.switch input[type="checkbox"]:indeterminate:before {
 		-webkit-transform: translateX(1em);
 		-moz-transform: translateX(1em);
 		-ms-transform: translateX(1em);
@@ -2371,14 +2431,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host .disabled {
 		opacity: 0.33;
 	}
-	:host kol-input.button {
+	:host .kol-input.button {
 		row-gap: 0.5rem;
 	}
-	:host kol-input.button.checked > .input,
-	:host kol-input.button.checked > label {
+	:host .kol-input.button.checked > .input,
+	:host .kol-input.button.checked > label {
 		background-color: var(--color-ice);
 	}
-	:host kol-input.button > label {
+	:host .kol-input.button > label {
 		background-color: var(--color-silver);
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
@@ -2388,7 +2448,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding-right: 12px;
 		width: 100%;
 	}
-	:host kol-input.button > .input {
+	:host .kol-input.button > .input {
 		background-color: var(--color-silver);
 		border-top-left-radius: var(--border-radius);
 		border-bottom-left-radius: var(--border-radius);
@@ -2396,14 +2456,14 @@ const BMF = KoliBri.createTheme("bmf", {
 		min-width: 32px;
 		place-content: center;
 	}
-	:host kol-input.button.hide-label > .input {
+	:host .kol-input.button.hide-label > .input {
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
 	}
-	:host kol-input.button > .input > div {
+	:host .kol-input.button > .input > div {
 		display: flex;
 	}
-	:host kol-input.button .icon {
+	:host .kol-input.button .icon {
 		height: auto;
 	}
 	.button:focus-within {
@@ -2414,7 +2474,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		outline-width: 3px;
 	}`,
   "KOL-INPUT-RADIO": `/* INPUT */
-	kol-input {
+	.kol-input {
 		display: grid;
 		gap: 0.4em;
 	}
@@ -2445,7 +2505,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	input:hover {
 		border-color: var(--color-midnight);
 	}
-	kol-alert {
+	.kol-alert {
 		display: block;
 		width: 100%;
 	}
@@ -2501,21 +2561,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
 	}
-	kol-alert.error {
+	.kol-alert.error {
 		order: 1;
 	}
 	fieldset legend {
 		order: 2;
 		display: contents;
 	}
-	fieldset kol-input {
+	fieldset .kol-input {
 		order: 3;
 	}
 	fieldset.error {
 		padding-left: 1em;
 		border-left: 3px solid var(--color-red);
 	}
-	kol-alert.error {
+	.kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
@@ -2524,7 +2584,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	fieldset.error textarea:focus {
 		outline-color: var(--color-red) !important;
 	}
-	fieldset.error kol-alert.error {
+	fieldset.error .kol-alert.error {
 		margin-left: -0.25em;
 		color: var(--color-red);
 		font-weight: 700;
@@ -2559,7 +2619,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
-	:host kol-button-group-wc {
+	:host .kol-button-group-wc {
 		display: inline-flex;
 		gap: 2rem;
 		flex-wrap: wrap;
@@ -2586,13 +2646,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		/* border-bottom: 0.025rem solid var(--color-midnight); */
 		color: var(--color-midnight);
 	}
-	button:not(.selected) kol-span-wc > span {
+	button:not(.selected) .kol-span-wc > span {
 		padding-bottom: 0.25em;
 	}
-	button.selected kol-span-wc > span {
+	button.selected .kol-span-wc > span {
 		border-bottom: 0.25em solid;
 	}
-	button kol-span-wc > span {
+	button .kol-span-wc > span {
 		gap: 0.5rem;
 	}
 	:host > div > div {
@@ -2621,7 +2681,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: grid;
 		grid-template-columns: 1fr auto;
 	}
-	:host > .tabs-align-right kol-button-group-wc {
+	:host > .tabs-align-right .kol-button-group-wc {
 		display: grid;
 		order: 2;
 	}
@@ -2629,7 +2689,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: grid;
 		grid-template-columns: auto 1fr;
 	}
-	:host > .tabs-align-left kol-button-group-wc {
+	:host > .tabs-align-left .kol-button-group-wc {
 		display: grid;
 		order: 0;
 	}
@@ -2637,32 +2697,32 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: grid;
 		grid-template-rows: 1fr auto;
 	}
-	:host > .tabs-align-bottom kol-button-group-wc {
+	:host > .tabs-align-bottom .kol-button-group-wc {
 		order: 2;
 	}
-	:host > .tabs-align-bottom kol-button-group-wc > div {
+	:host > .tabs-align-bottom .kol-button-group-wc > div {
 		display: flex;
 	}
-	:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {
+	:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {
 		margin: 0px 1em 0px 0px;
 	}
-	:host > .tabs-align-bottom > kol-button-group-wc > div > div {
+	:host > .tabs-align-bottom > .kol-button-group-wc > div > div {
 		margin: 0px 1em;
 	}
 	:host > .tabs-align-top {
 		display: grid;
 		grid-template-rows: auto 1fr;
 	}
-	:host > .tabs-align-top kol-button-group-wc {
+	:host > .tabs-align-top .kol-button-group-wc {
 		order: 0;
 	}
-	:host > .tabs-align-top kol-button-group-wc > div {
+	:host > .tabs-align-top .kol-button-group-wc > div {
 		display: flex;
 	}
-	:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {
+	:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {
 		margin: 0px 1em 0px 0px;
 	}
-	:host > .tabs-align-top > kol-button-group-wc > div > div {
+	:host > .tabs-align-top > .kol-button-group-wc > div > div {
 		margin: 0px 1em;
 	}
 	:host > div {
@@ -2674,34 +2734,34 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > div.tabs-align-right {
 		grid-template-columns: 1fr auto;
 	}
-	:host > .tabs-align-left kol-button-group-wc,
-	:host > .tabs-align-top kol-button-group-wc {
+	:host > .tabs-align-left .kol-button-group-wc,
+	:host > .tabs-align-top .kol-button-group-wc {
 		order: 0;
 	}
-	:host > .tabs-align-bottom kol-button-group-wc,
-	:host > .tabs-align-right kol-button-group-wc {
+	:host > .tabs-align-bottom .kol-button-group-wc,
+	:host > .tabs-align-right .kol-button-group-wc {
 		order: 1;
 	}
-	:host > .tabs-align-left kol-button-group-wc,
-	:host > .tabs-align-right kol-button-group-wc {
+	:host > .tabs-align-left .kol-button-group-wc,
+	:host > .tabs-align-right .kol-button-group-wc {
 		gap: inherit;
 	}
-	:host > div.tabs-align-left kol-button-group-wc > div,
-	:host > div.tabs-align-left kol-button-group-wc > div > div,
-	:host > div.tabs-align-right kol-button-group-wc > div,
-	:host > div.tabs-align-right kol-button-group-wc > div > div {
+	:host > div.tabs-align-left .kol-button-group-wc > div,
+	:host > div.tabs-align-left .kol-button-group-wc > div > div,
+	:host > div.tabs-align-right .kol-button-group-wc > div,
+	:host > div.tabs-align-right .kol-button-group-wc > div > div {
 		display: grid;
 	}
-	:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,
-	:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {
+	:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,
+	:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {
 		width: 100%;
 	}
-	:host > div.tabs-align-bottom kol-button-group-wc div,
-	:host > div.tabs-align-top kol-button-group-wc div {
+	:host > div.tabs-align-bottom .kol-button-group-wc div,
+	:host > div.tabs-align-top .kol-button-group-wc div {
 		display: flex;
 		flex-wrap: wrap;
 	}
-	:host kol-button-group-wc button {
+	:host .kol-button-group-wc button {
 		border: none;
 	}`,
   "KOL-PAGINATION": `:host {
@@ -2742,35 +2802,35 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding-bottom: 0.5rem;
 		color: var(--color-midnight);
 	}
-	kol-button::part(icon) {
+	.kol-button::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 	}
-	kol-button.first::part(icon):before {
+	.kol-button.first::part(icon):before {
 		content: "\\f100";
 	}
-	kol-button.previous::part(icon):before {
+	.kol-button.previous::part(icon):before {
 		content: "\\f104";
 	}
-	kol-button.next::part(icon):before {
+	.kol-button.next::part(icon):before {
 		content: "\\f105";
 	}
-	kol-button.last::part(icon):before {
+	.kol-button.last::part(icon):before {
 		content: "\\f101";
 	}`,
-  "KOL-INPUT-RANGE": `kol-input {
+  "KOL-INPUT-RANGE": `.kol-input {
 		gap: 0.25em;
 	}
-	kol-input .error {
+	.kol-input .error {
 		order: 1;
 	}
-	kol-input label {
+	.kol-input label {
 		order: 2;
 	}
-	kol-input .input {
+	.kol-input .input {
 		order: 3;
 	}
-	kol-input .hint {
+	.kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
@@ -2789,13 +2849,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 2px;
 		padding: 0 1em;
 	}
-	.input > kol-icon {
+	.input > .kol-icon {
 		width: 1em;
 	}
-	.input.icon-left > kol-icon:first-child {
+	.input.icon-left > .kol-icon:first-child {
 		margin-right: 0.5em;
 	}
-	.input.icon-right > kol-icon:last-child {
+	.input.icon-right > .kol-icon:last-child {
 		margin-left: 0.5em;
 	}
 	.input:is(.icon-left, .icon-right) {
@@ -2813,21 +2873,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	kol-input.error:not(.hidden-error) {
+	.kol-input.error:not(.hidden-error) {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error .input:focus-within {
+	.kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
-	kol-input.error kol-alert.error {
+	.kol-input.error .kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(input, label) {
+	.kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(.input) {
+	.kol-input.disabled :is(.input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
@@ -2838,14 +2898,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button):focus {
 		outline: none;
 	}
-	:is(a, button):focus kol-span-wc {
+	:is(a, button):focus .kol-span-wc {
 		outline-color: var(--color-ocean);
 		outline-offset: 2px;
 		outline-style: solid;
 		outline-width: 3px;
 		transition: outline-offset 0.2s linear;
 	}
-	:is(a, button) > kol-span-wc {
+	:is(a, button) > .kol-span-wc {
 		font-weight: 700;
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
@@ -2857,105 +2917,105 @@ const BMF = KoliBri.createTheme("bmf", {
 		transition-duration: 0.5s;
 		transition-property: background-color, color, border-color;
 	}
-	:is(a, button):disabled > kol-span-wc {
+	:is(a, button):disabled > .kol-span-wc {
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
-	.primary :is(a, button) > kol-span-wc,
-	.primary :is(a, button):disabled:hover > kol-span-wc {
+	.primary :is(a, button) > .kol-span-wc,
+	.primary :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-midnight);
 		border-color: var(--color-midnight);
 		color: var(--color-white);
 	}
-	.secondary :is(a, button) > kol-span-wc,
-	.secondary :is(a, button):disabled:hover > kol-span-wc,
-	.normal :is(a, button) > kol-span-wc,
-	.normal :is(a, button):disabled:hover > kol-span-wc {
+	.secondary :is(a, button) > .kol-span-wc,
+	.secondary :is(a, button):disabled:hover > .kol-span-wc,
+	.normal :is(a, button) > .kol-span-wc,
+	.normal :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-white);
 		border-color: var(--color-midnight);
 		color: var(--color-midnight);
 	}
-	.danger :is(a, button) > kol-span-wc,
-	.danger :is(a, button):disabled:hover > kol-span-wc {
+	.danger :is(a, button) > .kol-span-wc,
+	.danger :is(a, button):disabled:hover > .kol-span-wc {
 		background-color: var(--color-red);
 		border-color: var(--color-red);
 		color: var(--color-white);
 	}
-	.ghost :is(a, button) > kol-span-wc,
-	.ghost :is(a, button):disabled:hover > kol-span-wc {
+	.ghost :is(a, button) > .kol-span-wc,
+	.ghost :is(a, button):disabled:hover > .kol-span-wc {
 		border-color: var(--color-white);
 		background-color: var(--color-white);
 		box-shadow: none;
 		color: var(--color-midnight);
 	} /*-----------*/
-	.primary :is(a, button):active > kol-span-wc,
-	.primary :is(a, button):hover > kol-span-wc,
-	.secondary :is(a, button):active > kol-span-wc,
-	.secondary :is(a, button):hover > kol-span-wc,
-	.normal :is(a, button):active > kol-span-wc,
-	.normal :is(a, button):hover > kol-span-wc,
-	.danger :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):hover > kol-span-wc,
-	.ghost :is(a, button):active > kol-span-wc,
-	.ghost :is(a, button):hover > kol-span-wc {
+	.primary :is(a, button):active > .kol-span-wc,
+	.primary :is(a, button):hover > .kol-span-wc,
+	.secondary :is(a, button):active > .kol-span-wc,
+	.secondary :is(a, button):hover > .kol-span-wc,
+	.normal :is(a, button):active > .kol-span-wc,
+	.normal :is(a, button):hover > .kol-span-wc,
+	.danger :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):hover > .kol-span-wc,
+	.ghost :is(a, button):active > .kol-span-wc,
+	.ghost :is(a, button):hover > .kol-span-wc {
 		background-color: var(--color-ocean);
 		border-color: var(--color-ocean);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
 		color: var(--color-white);
 	}
-	.danger :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):hover > kol-span-wc {
+	.danger :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):hover > .kol-span-wc {
 		background-color: var(--color-crimson);
 		border-color: var(--color-crimson);
 	}
-	:is(a, button):disabled:hover > kol-span-wc,
-	:is(a, button):focus:hover > kol-span-wc {
+	:is(a, button):disabled:hover > .kol-span-wc,
+	:is(a, button):focus:hover > .kol-span-wc {
 		box-shadow: none;
 	}
-	.primary :is(a, button):active > kol-span-wc,
-	.secondary :is(a, button):active > kol-span-wc,
-	.normal :is(a, button):active > kol-span-wc,
-	.danger :is(a, button):active > kol-span-wc,
-	.ghost :is(a, button):active > kol-span-wc {
+	.primary :is(a, button):active > .kol-span-wc,
+	.secondary :is(a, button):active > .kol-span-wc,
+	.normal :is(a, button):active > .kol-span-wc,
+	.danger :is(a, button):active > .kol-span-wc,
+	.ghost :is(a, button):active > .kol-span-wc {
 		border-color: var(--color-white);
 		box-shadow: none;
 		outline: none;
 	}
-	:is(a, button).hide-label > kol-span-wc {
+	:is(a, button).hide-label > .kol-span-wc {
 		padding: 8px;
 		width: unset;
 	}
-	:is(a, button).hide-label > kol-span-wc > span > span {
+	:is(a, button).hide-label > .kol-span-wc > span > span {
 		display: none;
 	}
-	:is(a, button).loading > kol-span-wc kol-icon {
+	:is(a, button).loading > .kol-span-wc .kol-icon {
 		animation: spin 5s infinite linear;
 	}
 	/** small ghost button */
-	.ghost :is(a, button).small > kol-span-wc {
+	.ghost :is(a, button).small > .kol-span-wc {
 		border: none;
 		background-color: transparent;
 		box-shadow: none;
 	}
-	.ghost :is(a, button).small > kol-span-wc > span {
+	.ghost :is(a, button).small > .kol-span-wc > span {
 		border-radius: 1.5em;
 		border-style: solid;
 		border-width: 2px;
 		border-color: var(--color-white);
 		background-color: var(--color-white);
 	}
-	.ghost :is(a, button).small:active > kol-span-wc > span,
-	.ghost :is(a, button).small:hover > kol-span-wc > span,
-	.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
-	.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {
+	.ghost :is(a, button).small:active > .kol-span-wc > span,
+	.ghost :is(a, button).small:hover > .kol-span-wc > span,
+	.ghost :is(a, button).small.transparent:active > .kol-span-wc > span,
+	.ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {
 		background-color: var(--color-ocean);
 		border-color: var(--color-ocean);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
 		color: var(--color-white);
 	} /** :is(a,button) with transparent background */
-	:is(a, button).transparent > kol-span-wc > span,
-	.ghost :is(a, button).small.transparent > kol-span-wc > span,
-	:is(a, button).transparent > kol-span-wc {
+	:is(a, button).transparent > .kol-span-wc > span,
+	.ghost :is(a, button).small.transparent > .kol-span-wc > span,
+	:is(a, button).transparent > .kol-span-wc {
 		background-color: transparent;
 		border-color: transparent;
 	}`,
@@ -2969,7 +3029,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button):focus {
 		outline: none;
 	}
-	:is(a, button):focus kol-span-wc {
+	:is(a, button):focus .kol-span-wc {
 		border-radius: var(--border-radius);
 		outline: 2px solid;
 	}
@@ -2998,21 +3058,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-bottom: dashed var(--color-black) 1px;
 		text-decoration: none !important;
 	}`,
-  "KOL-BREADCRUMB": `li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
+  "KOL-BREADCRUMB": `li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {
 		font-size: 0.75rem;
 	}
-	li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon::part(icon) {
+	li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 		color: var(--color-grey);
 	}
-	li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon::part(icon)::before {
+	li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon)::before {
 		content: "\\f054";
 	}
-	kol-link::part(icon) {
+	.kol-link::part(icon) {
 		font-size: 1.25rem;
 	}
-	ul li > :is(span, kol-link) {
+	ul li > :is(span, .kol-link) {
 		line-height: 1.25rem;
 		height: 20px;
 	}
@@ -10113,7 +10173,7 @@ const BMF = KoliBri.createTheme("bmf", {
 			u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f250, u+f252,
 			u+f27a;
 	}`,
-  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+  "KOL-SKIP-NAV": `.kol-link-wc > a > .kol-span-wc {
 		border-radius: var(--a11y-min-size);
 		border-style: solid;
 		border-width: 2px;
@@ -10130,119 +10190,119 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`
 });
 
-var css_248z$2b = ":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}";
-const globalCss = css_248z$2b;
+var css_248z$2d = ":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$2d;
 
-var css_248z$2a = "abbr {\n  border-bottom: dashed var(--color-text) 1px;\n  text-decoration: none !important;\n}";
-const abbrCss = css_248z$2a;
+var css_248z$2c = "abbr {\n  border-bottom: dashed var(--color-text) 1px;\n  text-decoration: none !important;\n}";
+const abbrCss = css_248z$2c;
 
-var css_248z$29 = "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$29;
+var css_248z$2b = ".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$2b;
 
-var css_248z$28 = ".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}";
-const alertCss = css_248z$28;
+var css_248z$2a = ".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$2a;
 
-var css_248z$27 = ":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$27;
+var css_248z$29 = ":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$29;
 
-var css_248z$26 = "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}";
-const breadcrumbCss = css_248z$26;
+var css_248z$28 = "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$28;
 
-var css_248z$25 = ":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$25;
+var css_248z$27 = ":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$27;
 
-var css_248z$24 = ":host > kol-button-group-wc {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing);\n}";
-const buttonGroupCss = css_248z$24;
+var css_248z$26 = ":host > .kol-button-group-wc {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing);\n}";
+const buttonGroupCss = css_248z$26;
 
-var css_248z$23 = ":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$23;
+var css_248z$25 = ":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$25;
 
-var css_248z$22 = "/* 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$22;
+var css_248z$24 = "/* 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$24;
 
-var css_248z$21 = "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}";
-const detailsCss = css_248z$21;
+var css_248z$23 = "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$23;
 
-var css_248z$20 = "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}";
-const headingCss = css_248z$20;
+var css_248z$22 = "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}";
+const headingCss = css_248z$22;
 
-var css_248z$1$ = ":host {\n  width: 1em;\n  height: 1em;\n}\n\n:host > i {\n  width: 1em;\n  height: 1em;\n}";
-const iconCss = css_248z$1$;
+var css_248z$21 = ":host {\n  width: 1em;\n  height: 1em;\n}\n\n:host > i {\n  width: 1em;\n  height: 1em;\n}";
+const iconCss = css_248z$21;
 
-var css_248z$1_ = ":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$1_;
+var css_248z$20 = ":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$20;
 
-var css_248z$1Z = ":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}";
-const inputCheckboxCss = css_248z$1Z;
+var css_248z$1$ = ":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$1$;
 
-var css_248z$1Y = "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}";
-const inputColorCss = css_248z$1Y;
+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 .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$1_;
 
-var css_248z$1X = "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}";
-const inputDateCss = css_248z$1X;
+var css_248z$1Z = ".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$1Z;
 
-var css_248z$1W = "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}";
-const inputEmailCss = css_248z$1W;
+var css_248z$1Y = ".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$1Y;
 
-var css_248z$1V = "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}";
-const inputFileCss = css_248z$1V;
+var css_248z$1X = ".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$1X;
 
-var css_248z$1U = "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}";
-const inputNumberCss = css_248z$1U;
+var css_248z$1W = ".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$1W;
 
-var css_248z$1T = "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}";
-const inputPasswordCss = css_248z$1T;
+var css_248z$1V = ".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$1V;
 
-var css_248z$1S = "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}";
-const inputRadioCss = css_248z$1S;
+var css_248z$1U = "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$1U;
 
-var css_248z$1R = ".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}";
-const inputRangeCss = css_248z$1R;
+var css_248z$1T = ".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$1T;
 
-var css_248z$1Q = "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}";
-const inputTextCss = css_248z$1Q;
+var css_248z$1S = ".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$1S;
 
-var css_248z$1P = ":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$1P;
+var css_248z$1R = ":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$1R;
 
-var css_248z$1O = ":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$1O;
+var css_248z$1Q = ":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$1Q;
 
-var css_248z$1N = ":host .overlay .modal {\n  max-height: calc(100% - 32px);\n}";
-const modalCss = css_248z$1N;
+var css_248z$1P = ":host .overlay .modal {\n  max-height: calc(100% - 32px);\n}";
+const modalCss = css_248z$1P;
 
-var css_248z$1M = "* {\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}";
-const navCss = css_248z$1M;
+var css_248z$1O = "* {\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$1O;
 
-var css_248z$1L = ":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}";
-const paginationCss = css_248z$1L;
+var css_248z$1N = ":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}";
+const paginationCss = css_248z$1N;
 
-var css_248z$1K = ":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$1K;
+var css_248z$1M = ":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$1M;
 
-var css_248z$1J = "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}";
-const selectCss = css_248z$1J;
+var css_248z$1L = ".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$1L;
 
-var css_248z$1I = "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$1I;
+var css_248z$1K = ".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$1K;
 
-var css_248z$1H = ".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}";
-const spinCss = css_248z$1H;
+var css_248z$1J = ".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}";
+const spinCss = css_248z$1J;
 
-var css_248z$1G = ".popover {\n  background: #fff;\n}";
-const splitButtonCss = css_248z$1G;
+var css_248z$1I = ".popover {\n  background: #fff;\n}";
+const splitButtonCss = css_248z$1I;
 
-var css_248z$1F = ":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(caption: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$1F;
+var css_248z$1H = ":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$1H;
 
-var css_248z$1E = "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$1E;
+var css_248z$1G = "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$1G;
 
-var css_248z$1D = "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}";
-const textareaCss = css_248z$1D;
+var css_248z$1F = ".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$1F;
 
-var css_248z$1C = ":host {\n  top: 1rem;\n  right: 1rem;\n  width: 440px;\n}\n\n.toast {\n  margin-top: 1rem;\n}";
-const toastContainerCss = css_248z$1C;
+var css_248z$1E = ":host {\n  top: 1rem;\n  right: 1rem;\n  width: 440px;\n}\n\n.toast {\n  margin-top: 1rem;\n}";
+const toastContainerCss = css_248z$1E;
 
 const DEFAULT = KoliBri.createTheme("default", {
   GLOBAL: globalCss,
@@ -10285,69 +10345,73 @@ const DEFAULT = KoliBri.createTheme("default", {
   "KOL-TOAST-CONTAINER": toastContainerCss
 });
 
-var css_248z$1B = "kol-tooltip-wc .tooltip-area {\n  background-color: #f2f2f2;\n}\n\nkol-tooltip-wc .tooltip-arrow {\n  background-color: #626262;\n}\n\nkol-tooltip-wc .tooltip-content {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  border-radius: 2px;\n  border: 1px solid #626262;\n}\n\n:host {\n  --color-blue: #004494;\n  --color-yellow: #ffd617;\n  --color-grey: #404040;\n  --color-blue-130: #002f67;\n  --color-blue-120: #003776;\n  --color-blue-110: #003d84;\n  --color-blue-100: var(--color-blue);\n  --color-blue-75: #4073af;\n  --color-blue-50: #bfd0e4;\n  --color-blue-25: #bfd0e4;\n  --color-blue-5: #f2f5f9;\n  --color-yellow-120: #f8ae21;\n  --color-yellow-110: #fbc11d;\n  --color-yellow-100: var(--color-yellow);\n  --color-yellow-75: #ffde39;\n  --color-yellow-50: #ffe879;\n  --color-yellow-25: #fff4bb;\n  --color-grey-100: var(--color-grey);\n  --color-grey-75: #707070;\n  --color-grey-50: #9f9f9f;\n  --color-grey-25: #cfcfcf;\n  --color-grey-20: #d9d9d9;\n  --color-grey-15: #e3e3e3;\n  --color-grey-10: #ebebeb;\n  --color-grey-5: #f5f5f5;\n  --color-grey-3: #f9f9f9;\n  --color-blue-n: #006fb4;\n  --color-orange: #f29527;\n  --color-green: #467a39;\n  --color-red: #da2131;\n  --color-red-1xx: #981722;\n  --color-black: #000;\n  --color-white: #fff;\n  --font-family: Arial, sans-serif;\n  --font-size: 16px;\n  --font-weight: 400;\n  --font-weight-bold: 600;\n  --line-height: 1.5em;\n  --line-height-heading: 1.2em;\n  /* ?! */\n  --spacing-4xl: 64px;\n  --spacing-3xl: 48px;\n  --spacing-2xl: 40px;\n  --spacing-xl: 32px;\n  --spacing-l: 24px;\n  --spacing-m: 16px;\n  --spacing-s: 12px;\n  --spacing-xs: 8px;\n  --spacing-2xs: 4px;\n  /* ?! */\n}\n\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  display: inline-block;\n  font-family: var(--font-family);\n}\n\na,\nbutton {\n  font-size: var(--font-size);\n  outline: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold);\n  line-height: var(--line-height-heading);\n  margin: 0;\n  padding: 0;\n}\n\np {\n  font-weight: var(--font-weight);\n}\n\nkol-span-wc,\nkol-span-wc > span {\n  gap: 0.5em;\n}\n\n.required label span::after,\n.required legend span::after {\n  color: var(--color-red);\n  padding-left: 0.25em;\n}";
+var css_248z$1D = ".kol-tooltip-wc .tooltip-area {\n  background-color: #f2f2f2;\n}\n\n.kol-tooltip-wc .tooltip-arrow {\n  background-color: #626262;\n}\n\n.kol-tooltip-wc .tooltip-content {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  border-radius: 2px;\n  border: 1px solid #626262;\n}\n\n:host {\n  --color-blue: #004494;\n  --color-yellow: #ffd617;\n  --color-grey: #404040;\n  --color-blue-130: #002f67;\n  --color-blue-120: #003776;\n  --color-blue-110: #003d84;\n  --color-blue-100: var(--color-blue);\n  --color-blue-75: #4073af;\n  --color-blue-50: #bfd0e4;\n  --color-blue-25: #bfd0e4;\n  --color-blue-5: #f2f5f9;\n  --color-yellow-120: #f8ae21;\n  --color-yellow-110: #fbc11d;\n  --color-yellow-100: var(--color-yellow);\n  --color-yellow-75: #ffde39;\n  --color-yellow-50: #ffe879;\n  --color-yellow-25: #fff4bb;\n  --color-grey-100: var(--color-grey);\n  --color-grey-75: #707070;\n  --color-grey-50: #9f9f9f;\n  --color-grey-25: #cfcfcf;\n  --color-grey-20: #d9d9d9;\n  --color-grey-15: #e3e3e3;\n  --color-grey-10: #ebebeb;\n  --color-grey-5: #f5f5f5;\n  --color-grey-3: #f9f9f9;\n  --color-blue-n: #006fb4;\n  --color-orange: #f29527;\n  --color-green: #467a39;\n  --color-red: #da2131;\n  --color-red-1xx: #981722;\n  --color-black: #000;\n  --color-white: #fff;\n  --font-family: Arial, sans-serif;\n  --font-size: 16px;\n  --font-weight: 400;\n  --font-weight-bold: 600;\n  --line-height: 1.5em;\n  --line-height-heading: 1.2em;\n  /* ?! */\n  --spacing-4xl: 64px;\n  --spacing-3xl: 48px;\n  --spacing-2xl: 40px;\n  --spacing-xl: 32px;\n  --spacing-l: 24px;\n  --spacing-m: 16px;\n  --spacing-s: 12px;\n  --spacing-xs: 8px;\n  --spacing-2xs: 4px;\n  /* ?! */\n}\n\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  display: inline-block;\n  font-family: var(--font-family);\n}\n\na,\nbutton {\n  font-size: var(--font-size);\n  outline: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold);\n  line-height: var(--line-height-heading);\n  margin: 0;\n  padding: 0;\n}\n\np {\n  font-weight: var(--font-weight);\n}\n\n.kol-span-wc,\n.kol-span-wc > span {\n  gap: 0.5em;\n}\n\n.required label span::after,\n.required legend span::after {\n  color: var(--color-red);\n  padding-left: 0.25em;\n}";
+
+var css_248z$1C = ":host > div {\n  background-color: var(--color-grey-5);\n  border-color: var(--color-grey-25);\n  border-style: solid;\n  border-width: 1px;\n}\n\n:host > div .headline button {\n  text-align: left;\n  width: 100%;\n  padding: 0 var(--spacing-m);\n  display: flex;\n  place-items: center;\n}\n\n:host > div .headline button .kol-icon {\n  margin-bottom: 0.75rem;\n  margin-inline-end: 1rem;\n  margin-inline-start: 0;\n  margin-top: 0.75rem;\n}\n\n:host > div .headline button span {\n  color: var(--color-grey);\n  font-weight: var(--font-weight-bold);\n  padding: 0.75rem 0;\n  width: 100%;\n}\n\n:host > div[part*=open] .headline button span {\n  border-bottom: 1px solid var(--color-grey);\n}\n\n:host > div .headline button:focus,\n:host > div .headline button:hover {\n  background-color: var(--color-grey-25);\n}\n\n:host > div .headline button:focus {\n  outline: 2px solid var(--color-blue);\n  outline-offset: -2px;\n}\n\n.content {\n  padding: var(--spacing-s) var(--spacing-m);\n}";
+
+var css_248z$1B = ":host > div {\n  background-color: var(--color-white);\n}\n\n:host > div.card {\n  border-style: solid;\n  border-width: 2px;\n}\n\n:host > div.msg {\n  border: none;\n}\n\n:host .msg .heading .kol-icon {\n  font-size: 1.5em;\n  margin: var(--spacing-2xs);\n}\n\n:host .msg .heading > div {\n  padding: var(--spacing-2xs);\n}\n\n:host .card {\n  padding-bottom: 1.5rem;\n  padding-inline-end: 0.5rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1.5rem;\n}\n\n:host .card .heading {\n  gap: 0.5rem;\n}\n\n:host .card .content {\n  margin-left: 2.5rem;\n}\n\n:host .card .heading .kol-icon {\n  font-size: 2rem;\n}\n\n:host .default {\n  border-color: var(--color-grey);\n}\n\n:host .default .heading .kol-icon {\n  color: var(--color-grey);\n}\n\n:host .error {\n  border-color: var(--color-red);\n}\n\n:host .error .heading .kol-icon {\n  color: var(--color-red);\n}\n\n:host .info {\n  border-color: var(--color-blue);\n}\n\n:host .info .heading .kol-icon {\n  color: var(--color-blue);\n}\n\n:host .success {\n  border-color: var(--color-green);\n}\n\n:host .success .heading .kol-icon {\n  color: var(--color-green);\n}\n\n:host .warning {\n  border-color: var(--color-orange);\n}\n\n:host .warning .heading .kol-icon {\n  color: var(--color-orange);\n}";
 
-var css_248z$1A = ":host > div {\n  background-color: var(--color-grey-5);\n  border-color: var(--color-grey-25);\n  border-style: solid;\n  border-width: 1px;\n}\n\n:host > div .headline button {\n  text-align: left;\n  width: 100%;\n  padding: 0 var(--spacing-m);\n  display: flex;\n  place-items: center;\n}\n\n:host > div .headline button kol-icon {\n  margin-bottom: 0.75rem;\n  margin-inline-end: 1rem;\n  margin-inline-start: 0;\n  margin-top: 0.75rem;\n}\n\n:host > div .headline button span {\n  color: var(--color-grey);\n  font-weight: var(--font-weight-bold);\n  padding: 0.75rem 0;\n  width: 100%;\n}\n\n:host > div[part*=open] .headline button span {\n  border-bottom: 1px solid var(--color-grey);\n}\n\n:host > div .headline button:focus,\n:host > div .headline button:hover {\n  background-color: var(--color-grey-25);\n}\n\n:host > div .headline button:focus {\n  outline: 2px solid var(--color-blue);\n  outline-offset: -2px;\n}\n\n.content {\n  padding: var(--spacing-s) var(--spacing-m);\n}";
+var css_248z$1A = ":host > span {\n  font: normal normal var(--font-weight) 1em var(--font-family);\n  padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n  text-transform: uppercase;\n}";
 
-var css_248z$1z = ":host > div {\n  background-color: var(--color-white);\n}\n\n:host > div.card {\n  border-style: solid;\n  border-width: 2px;\n}\n\n:host > div.msg {\n  border: none;\n}\n\n:host .msg .heading kol-icon {\n  font-size: 1.5em;\n  margin: var(--spacing-2xs);\n}\n\n:host .msg .heading > div {\n  padding: var(--spacing-2xs);\n}\n\n:host .card {\n  padding-bottom: 1.5rem;\n  padding-inline-end: 0.5rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1.5rem;\n}\n\n:host .card .heading {\n  gap: 0.5rem;\n}\n\n:host .card .content {\n  margin-left: 2.5rem;\n}\n\n:host .card .heading kol-icon {\n  font-size: 2rem;\n}\n\n:host .default {\n  border-color: var(--color-grey);\n}\n\n:host .default .heading kol-icon {\n  color: var(--color-grey);\n}\n\n:host .error {\n  border-color: var(--color-red);\n}\n\n:host .error .heading kol-icon {\n  color: var(--color-red);\n}\n\n:host .info {\n  border-color: var(--color-blue);\n}\n\n:host .info .heading kol-icon {\n  color: var(--color-blue);\n}\n\n:host .success {\n  border-color: var(--color-green);\n}\n\n:host .success .heading kol-icon {\n  color: var(--color-green);\n}\n\n:host .warning {\n  border-color: var(--color-orange);\n}\n\n:host .warning .heading kol-icon {\n  color: var(--color-orange);\n}";
+var css_248z$1z = ":host {\n  font: normal normal 400 0.875rem/1rem arial, sans-serif;\n  font-weight: var(--font-weight-bold);\n}\n\n.kol-icon::part(icon separator)::before {\n  color: var(--color-blue);\n}\n\nli:last-child {\n  color: var(--color-grey-75);\n}\n\n.kol-icon[exportparts*=separator] {\n  margin-inline-end: 0.5rem;\n  margin-inline-start: 0.5rem;\n  padding: 0;\n}";
 
-var css_248z$1y = ":host > span {\n  font: normal normal var(--font-weight) 1em var(--font-family);\n  padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n  text-transform: uppercase;\n}";
+var css_248z$1y = "a,\nbutton {\n  appearance: none;\n  background: none;\n  outline: none;\n  text-decoration: none;\n}\n\na .kol-span-wc,\nbutton .kol-span-wc {\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n  min-height: 44px;\n  min-width: 44px;\n  padding: 0.25em 0.75em;\n}\n\na:focus .kol-span-wc,\nbutton:focus .kol-span-wc {\n  outline-offset: -4px;\n  outline-width: 2px;\n  outline-style: solid;\n}\n\nbutton.ghost:focus .kol-span-wc {\n  outline-offset: -2px;\n}\n\n.primary a .kol-span-wc,\n.primary button .kol-span-wc {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n}\n\n.primary a:focus .kol-span-wc,\n.primary button:focus .kol-span-wc {\n  outline-color: var(--color-white);\n}\n\n.primary a:hover .kol-span-wc,\n.primary button:hover .kol-span-wc {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.secondary a .kol-span-wc,\n.secondary button .kol-span-wc {\n  background-color: var(--color-white);\n  border-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n.secondary a:focus .kol-span-wc,\n.secondary button:focus .kol-span-wc {\n  outline-color: var(--color-blue);\n  outline-offset: -6px;\n}\n\n.secondary a:hover .kol-span-wc,\n.secondary button:hover .kol-span-wc {\n  border-color: var(--color-blue-130);\n  color: var(--color-blue-130);\n}\n\n.normal a .kol-span-wc,\n.normal button .kol-span-wc {\n  background-color: var(--color-yellow);\n  border-color: var(--color-yellow);\n  color: var(--color-black);\n}\n\n.normal a:hover .kol-span-wc,\n.normal button:hover .kol-span-wc {\n  background-color: var(--color-yellow-120);\n  border-color: var(--color-yellow-120);\n}\n\n.danger a .kol-span-wc,\n.danger button .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover .kol-span-wc,\n.danger button:hover .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a .kol-span-wc,\n.ghost button .kol-span-wc {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-blue);\n}\n\n.ghost a:focus .kol-span-wc,\n.ghost button:focus .kol-span-wc {\n  outline-color: var(--color-blue);\n}\n\n.ghost a:hover .kol-span-wc,\n.ghost button:hover .kol-span-wc {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$1x = ":host {\n  font: normal normal 400 0.875rem/1rem arial, sans-serif;\n  font-weight: var(--font-weight-bold);\n}\n\nkol-icon::part(icon separator)::before {\n  color: var(--color-blue);\n}\n\nli:last-child {\n  color: var(--color-grey-75);\n}\n\nkol-icon[exportparts*=separator] {\n  margin-inline-end: 0.5rem;\n  margin-inline-start: 0.5rem;\n  padding: 0;\n}";
+var css_248z$1x = ":host > .kol-button-group-wc {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-2xs);\n}";
 
-var css_248z$1w = "a,\nbutton {\n  appearance: none;\n  background: none;\n  outline: none;\n  text-decoration: none;\n}\n\na kol-span-wc,\nbutton kol-span-wc {\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n  min-height: 44px;\n  min-width: 44px;\n  padding: 0.25em 0.75em;\n}\n\na:focus kol-span-wc,\nbutton:focus kol-span-wc {\n  outline-offset: -4px;\n  outline-width: 2px;\n  outline-style: solid;\n}\n\nbutton.ghost:focus kol-span-wc {\n  outline-offset: -2px;\n}\n\n.primary a kol-span-wc,\n.primary button kol-span-wc {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n}\n\n.primary a:focus kol-span-wc,\n.primary button:focus kol-span-wc {\n  outline-color: var(--color-white);\n}\n\n.primary a:hover kol-span-wc,\n.primary button:hover kol-span-wc {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.secondary a kol-span-wc,\n.secondary button kol-span-wc {\n  background-color: var(--color-white);\n  border-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n.secondary a:focus kol-span-wc,\n.secondary button:focus kol-span-wc {\n  outline-color: var(--color-blue);\n  outline-offset: -6px;\n}\n\n.secondary a:hover kol-span-wc,\n.secondary button:hover kol-span-wc {\n  border-color: var(--color-blue-130);\n  color: var(--color-blue-130);\n}\n\n.normal a kol-span-wc,\n.normal button kol-span-wc {\n  background-color: var(--color-yellow);\n  border-color: var(--color-yellow);\n  color: var(--color-black);\n}\n\n.normal a:hover kol-span-wc,\n.normal button:hover kol-span-wc {\n  background-color: var(--color-yellow-120);\n  border-color: var(--color-yellow-120);\n}\n\n.danger a kol-span-wc,\n.danger button kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover kol-span-wc,\n.danger button:hover kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a kol-span-wc,\n.ghost button kol-span-wc {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-blue);\n}\n\n.ghost a:focus kol-span-wc,\n.ghost button:focus kol-span-wc {\n  outline-color: var(--color-blue);\n}\n\n.ghost a:hover kol-span-wc,\n.ghost button:hover kol-span-wc {\n  color: var(--color-blue-130);\n}";
+var css_248z$1w = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$1v = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
+var css_248z$1v = ":host > div {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  grid-template-rows: min-content 2fr min-content;\n  box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n}\n\n:host .kol-heading-wc {\n  display: inline-flex;\n  font-style: normal;\n  font-weight: 700;\n  font-size: 1.25em;\n  line-height: 1.75em;\n}\n\n:host div.header {\n  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n}\n\n:host div.content {\n  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: var(--spacing-xs) var(--spacing-m);\n}\n\n:host > div > div.content + div.footer {\n  border-top: 2px solid var(--color-blue);\n}";
 
-var css_248z$1u = ":host > div {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  grid-template-rows: min-content 2fr min-content;\n  box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n}\n\n:host kol-heading-wc {\n  display: inline-flex;\n  font-style: normal;\n  font-weight: 700;\n  font-size: 1.25em;\n  line-height: 1.75em;\n}\n\n:host div.header {\n  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n}\n\n:host div.content {\n  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: var(--spacing-xs) var(--spacing-m);\n}\n\n:host > div > div.content + div.footer {\n  border-top: 2px solid var(--color-blue);\n}";
+var css_248z$1u = "details > .kol-indented-text {\n  margin: 0.175rem;\n  padding: 0;\n}";
 
-var css_248z$1t = "details > kol-indented-text {\n  margin: 0.175rem;\n  padding: 0;\n}";
+var css_248z$1t = "h1 {\n  font-size: 2rem;\n  line-height: 2.5rem;\n}\n\nh2 {\n  font-size: 1.75rem;\n  line-height: 2rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\nh5 {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\nh6 {\n  color: rgb(234, 0, 255);\n}";
 
-var css_248z$1s = "h1 {\n  font-size: 2rem;\n  line-height: 2.5rem;\n}\n\nh2 {\n  font-size: 1.75rem;\n  line-height: 2rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n}\n\nh4 {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\nh5 {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\nh6 {\n  color: rgb(234, 0, 255);\n}";
+var css_248z$1s = ":host,\n:host > i {\n  height: 1em;\n  width: 1em;\n}";
 
-var css_248z$1r = ":host,\n:host > i {\n  height: 1em;\n  width: 1em;\n}";
+var css_248z$1r = ":host > div {\n  border-end-start-radius: 0;\n  border-inline-start: 10px solid var(--color-yellow);\n  border-start-start-radius: 0;\n  padding-bottom: 1rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1rem;\n  margin: 0;\n}";
 
-var css_248z$1q = ":host > div {\n  border-end-start-radius: 0;\n  border-inline-start: 10px solid var(--color-yellow);\n  border-start-start-radius: 0;\n  padding-bottom: 1rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1rem;\n  margin: 0;\n}";
+var css_248z$1q = ".checkbox-container {\n  justify-content: flex-start;\n}\n\ninput[type=checkbox] {\n  background-color: var(--color-white);\n  border-width: 2px;\n  border-style: solid;\n  color: var(--color-grey);\n  line-height: 1.5em;\n  font-size: 1rem;\n}\n\ninput[type=checkbox]:focus {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\ninput[type=checkbox] {\n  border-color: var(--color-grey-75);\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:hover {\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:checked:hover {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.error input[type=checkbox] {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:hover {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked:hover {\n  background-color: var(--color-red-1xx);\n  border-color: var(--color-red-1xx);\n}\n\n.error.required label > span::after {\n  color: var(--color-red);\n}\n\n.default .icon {\n  margin-left: 0.2rem;\n}\n\n.default.checked .icon {\n  color: var(--color-white);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n}\n\n.switch input[type=checkbox]::before,\n.switch input[type=checkbox]:indeterminate::before {\n  background-color: var(--color-grey-75);\n}\n\n.switch input[type=checkbox]:hover::before,\n.switch input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-blue);\n}\n\n.switch input[type=checkbox]:checked::before,\n.switch input[type=checkbox]:checked:hover::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]::before {\n  background-color: var(--color-red);\n}\n\n.switch.error input[type=checkbox]:checked::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-red-1xx);\n}\n\n.kol-input {\n  gap: var(--spacing-xs);\n}\n\n.button {\n  gap: var(--spacing-xs) 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\n.kol-input > .input {\n  order: 2;\n}\n\n.kol-input > label {\n  order: 3;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}\n\n.button:focus-within {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}";
 
-var css_248z$1p = ".checkbox-container {\n  justify-content: flex-start;\n}\n\ninput[type=checkbox] {\n  background-color: var(--color-white);\n  border-width: 2px;\n  border-style: solid;\n  color: var(--color-grey);\n  line-height: 1.5em;\n  font-size: 1rem;\n}\n\ninput[type=checkbox]:focus {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\ninput[type=checkbox] {\n  border-color: var(--color-grey-75);\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:hover {\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:checked:hover {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.error input[type=checkbox] {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:hover {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked:hover {\n  background-color: var(--color-red-1xx);\n  border-color: var(--color-red-1xx);\n}\n\n.error.required label > span::after {\n  color: var(--color-red);\n}\n\n.default .icon {\n  margin-left: 0.2rem;\n}\n\n.default.checked .icon {\n  color: var(--color-white);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n}\n\n.switch input[type=checkbox]::before,\n.switch input[type=checkbox]:indeterminate::before {\n  background-color: var(--color-grey-75);\n}\n\n.switch input[type=checkbox]:hover::before,\n.switch input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-blue);\n}\n\n.switch input[type=checkbox]:checked::before,\n.switch input[type=checkbox]:checked:hover::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]::before {\n  background-color: var(--color-red);\n}\n\n.switch.error input[type=checkbox]:checked::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-red-1xx);\n}\n\nkol-input {\n  gap: var(--spacing-xs);\n}\n\n.button {\n  gap: var(--spacing-xs) 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\nkol-input > .input {\n  order: 2;\n}\n\nkol-input > label {\n  order: 3;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}\n\n.button:focus-within {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}";
+var css_248z$1p = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1o = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1o = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1n = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1n = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1m = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1m = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  margin: 1px;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1l = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  margin: 1px;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1l = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1k = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1k = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1j = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1j = "fieldset {\n  border: 0;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.input-slot {\n  gap: 0.25rem;\n}\n\nfieldset .kol-alert {\n  order: 1;\n}\n\nfieldset .hint {\n  order: 2;\n}\n\nfieldset .kol-alert {\n  order: 3;\n}\n\nfieldset .kol-input {\n  order: 4;\n}\n\n.radio-input-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.radio-label {\n  padding-left: 0.5rem;\n}\n\ninput[type=radio] {\n  border: 2px solid var(--color-grey-75);\n}\n\ninput[type=radio]:before {\n  display: none;\n}\n\ninput[type=radio]:checked {\n  border-color: var(--color-blue);\n  border-width: 7px;\n}\n\ninput[type=radio]:focus {\n  outline: 2px solid var(--color-blue);\n  outline-offset: 2px;\n}\n\ninput[type=radio]:not(:disabled):hover {\n  border-color: var(--color-blue);\n}\n\nlabel,\nlegend {\n  color: var(--color-grey);\n}\n\nlegend {\n  font-weight: var(--font-weight-bold);\n}\n\n.error input[type=radio] {\n  border: 2px solid var(--color-red);\n}\n\n.error input[type=radio]:before {\n  display: none;\n}\n\n.error input[type=radio]:checked {\n  border-color: var(--color-red);\n  border-width: 7px;\n}\n\n.error input[type=radio]:not(:disabled):hover {\n  border-color: var(--color-red-1xx);\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-xs));\n  order: 1;\n  width: 100%;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
 
-var css_248z$1i = "fieldset {\n  border: 0;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.input-slot {\n  gap: 0.25rem;\n}\n\nfieldset kol-alert {\n  order: 1;\n}\n\nfieldset .hint {\n  order: 2;\n}\n\nfieldset kol-alert {\n  order: 3;\n}\n\nfieldset kol-input {\n  order: 4;\n}\n\n.radio-input-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.radio-label {\n  padding-left: 0.5rem;\n}\n\ninput[type=radio] {\n  border: 2px solid var(--color-grey-75);\n}\n\ninput[type=radio]:before {\n  display: none;\n}\n\ninput[type=radio]:checked {\n  border-color: var(--color-blue);\n  border-width: 7px;\n}\n\ninput[type=radio]:focus {\n  outline: 2px solid var(--color-blue);\n  outline-offset: 2px;\n}\n\ninput[type=radio]:not(:disabled):hover {\n  border-color: var(--color-blue);\n}\n\nlabel,\nlegend {\n  color: var(--color-grey);\n}\n\nlegend {\n  font-weight: var(--font-weight-bold);\n}\n\n.error input[type=radio] {\n  border: 2px solid var(--color-red);\n}\n\n.error input[type=radio]:before {\n  display: none;\n}\n\n.error input[type=radio]:checked {\n  border-color: var(--color-red);\n  border-width: 7px;\n}\n\n.error input[type=radio]:not(:disabled):hover {\n  border-color: var(--color-red-1xx);\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-xs));\n  order: 1;\n  width: 100%;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
+var css_248z$1i = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput:not([type=range]):focus,\nselect:focus,\ntextarea:focus {\n  border-top: 1px solid var(--color-blue);\n  border-bottom: 1px solid var(--color-blue);\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1h = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput:not([type=range]):focus,\nselect:focus,\ntextarea:focus {\n  border-top: 1px solid var(--color-blue);\n  border-bottom: 1px solid var(--color-blue);\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1h = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput:not([type=range]):focus,\nselect:focus,\ntextarea:focus {\n  border-top: 1px solid var(--color-blue);\n  border-bottom: 1px solid var(--color-blue);\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1g = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput:not([type=range]):focus,\nselect:focus,\ntextarea:focus {\n  border-top: 1px solid var(--color-blue);\n  border-bottom: 1px solid var(--color-blue);\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1g = "a,\nbutton {\n  appearance: none;\n  background: none;\n  outline: none;\n  text-decoration: none;\n}\n\na .kol-span-wc,\nbutton .kol-span-wc {\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n  min-height: 44px;\n  min-width: 44px;\n  padding: 0.25em 0.75em;\n}\n\na:focus .kol-span-wc,\nbutton:focus .kol-span-wc {\n  outline-offset: -4px;\n  outline-width: 2px;\n  outline-style: solid;\n}\n\nbutton.ghost:focus .kol-span-wc {\n  outline-offset: -2px;\n}\n\n.primary a .kol-span-wc,\n.primary button .kol-span-wc {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n}\n\n.primary a:focus .kol-span-wc,\n.primary button:focus .kol-span-wc {\n  outline-color: var(--color-white);\n}\n\n.primary a:hover .kol-span-wc,\n.primary button:hover .kol-span-wc {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.secondary a .kol-span-wc,\n.secondary button .kol-span-wc {\n  background-color: var(--color-white);\n  border-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n.secondary a:focus .kol-span-wc,\n.secondary button:focus .kol-span-wc {\n  outline-color: var(--color-blue);\n  outline-offset: -6px;\n}\n\n.secondary a:hover .kol-span-wc,\n.secondary button:hover .kol-span-wc {\n  border-color: var(--color-blue-130);\n  color: var(--color-blue-130);\n}\n\n.normal a .kol-span-wc,\n.normal button .kol-span-wc {\n  background-color: var(--color-yellow);\n  border-color: var(--color-yellow);\n  color: var(--color-black);\n}\n\n.normal a:hover .kol-span-wc,\n.normal button:hover .kol-span-wc {\n  background-color: var(--color-yellow-120);\n  border-color: var(--color-yellow-120);\n}\n\n.danger a .kol-span-wc,\n.danger button .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover .kol-span-wc,\n.danger button:hover .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a .kol-span-wc,\n.ghost button .kol-span-wc {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-blue);\n}\n\n.ghost a:focus .kol-span-wc,\n.ghost button:focus .kol-span-wc {\n  outline-color: var(--color-blue);\n}\n\n.ghost a:hover .kol-span-wc,\n.ghost button:hover .kol-span-wc {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$1f = "a,\nbutton {\n  appearance: none;\n  background: none;\n  outline: none;\n  text-decoration: none;\n}\n\na kol-span-wc,\nbutton kol-span-wc {\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n  min-height: 44px;\n  min-width: 44px;\n  padding: 0.25em 0.75em;\n}\n\na:focus kol-span-wc,\nbutton:focus kol-span-wc {\n  outline-offset: -4px;\n  outline-width: 2px;\n  outline-style: solid;\n}\n\nbutton.ghost:focus kol-span-wc {\n  outline-offset: -2px;\n}\n\n.primary a kol-span-wc,\n.primary button kol-span-wc {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n}\n\n.primary a:focus kol-span-wc,\n.primary button:focus kol-span-wc {\n  outline-color: var(--color-white);\n}\n\n.primary a:hover kol-span-wc,\n.primary button:hover kol-span-wc {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.secondary a kol-span-wc,\n.secondary button kol-span-wc {\n  background-color: var(--color-white);\n  border-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n.secondary a:focus kol-span-wc,\n.secondary button:focus kol-span-wc {\n  outline-color: var(--color-blue);\n  outline-offset: -6px;\n}\n\n.secondary a:hover kol-span-wc,\n.secondary button:hover kol-span-wc {\n  border-color: var(--color-blue-130);\n  color: var(--color-blue-130);\n}\n\n.normal a kol-span-wc,\n.normal button kol-span-wc {\n  background-color: var(--color-yellow);\n  border-color: var(--color-yellow);\n  color: var(--color-black);\n}\n\n.normal a:hover kol-span-wc,\n.normal button:hover kol-span-wc {\n  background-color: var(--color-yellow-120);\n  border-color: var(--color-yellow-120);\n}\n\n.danger a kol-span-wc,\n.danger button kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover kol-span-wc,\n.danger button:hover kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a kol-span-wc,\n.ghost button kol-span-wc {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-blue);\n}\n\n.ghost a:focus kol-span-wc,\n.ghost button:focus kol-span-wc {\n  outline-color: var(--color-blue);\n}\n\n.ghost a:hover kol-span-wc,\n.ghost button:hover kol-span-wc {\n  color: var(--color-blue-130);\n}";
+var css_248z$1f = "a,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$1e = "a,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
+var css_248z$1e = ".list {\n  display: flex;\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n}\n\n.list.vertical {\n  flex-direction: column;\n}\n\n.entry {\n  display: flex;\n}\n\n.entry .kol-button-wc:first-child,\n.entry .kol-link-wc,\n.entry .kol-span-wc {\n  flex-grow: 1;\n}\n\n/* custom. */\nnav {\n  background-color: var(--color-blue);\n}\n\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.expand-button button {\n  background-color: var(--color-blue-130);\n  margin: auto;\n  height: 100%;\n}\n\n.kol-span-wc {\n  border-color: transparent;\n  border-style: solid;\n  border-width: 2px;\n  color: var(--color-white);\n  font-size: 18px;\n  justify-items: start;\n  padding: 1rem;\n  height: 100%;\n}\n\nli > ul,\nli + li {\n  border-color: var(--color-blue-75);\n  border-style: solid;\n  border-width: 0;\n  border-top-width: 2px;\n}\n\na {\n  text-decoration: none;\n}\n\n:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n  border-color: var(--color-white);\n}\n\n:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n  text-decoration: underline;\n}\n\ndiv > .expand-button .kol-icon::part(icon)::before {\n  content: \"\\eab6\";\n}\n\n.expanded > div > .expand-button .kol-icon::part(icon)::before {\n  content: \"\\eab4\";\n}";
 
-var css_248z$1d = ".list {\n  display: flex;\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n}\n\n.list.vertical {\n  flex-direction: column;\n}\n\n.entry {\n  display: flex;\n}\n\n.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc {\n  flex-grow: 1;\n}\n\n/* custom. */\nnav {\n  background-color: var(--color-blue);\n}\n\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.expand-button button {\n  background-color: var(--color-blue-130);\n  margin: auto;\n  height: 100%;\n}\n\nkol-span-wc {\n  border-color: transparent;\n  border-style: solid;\n  border-width: 2px;\n  color: var(--color-white);\n  font-size: 18px;\n  justify-items: start;\n  padding: 1rem;\n  height: 100%;\n}\n\nli > ul,\nli + li {\n  border-color: var(--color-blue-75);\n  border-style: solid;\n  border-width: 0;\n  border-top-width: 2px;\n}\n\na {\n  text-decoration: none;\n}\n\n:is(kol-button-wc, kol-link-wc):focus-within kol-span-wc {\n  border-color: var(--color-white);\n}\n\n:is(kol-button-wc, kol-link-wc):focus-within kol-span-wc,\n:is(kol-button-wc, kol-link-wc):hover kol-span-wc {\n  text-decoration: underline;\n}\n\ndiv > .expand-button kol-icon::part(icon)::before {\n  content: \"\\eab6\";\n}\n\n.expanded > div > .expand-button kol-icon::part(icon)::before {\n  content: \"\\eab4\";\n}";
+var css_248z$1d = ":host {\n  display: grid;\n  gap: var(--spacing-m);\n}\n\n:host .navigation-list {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.selected button {\n  min-width: 44px;\n  min-height: 44px;\n  display: grid;\n  line-height: 1.5rem;\n  font-family: var(--font-family);\n  cursor: not-allowed;\n  font-weight: 700;\n  padding: 10px 12px;\n  border: none;\n  font-size: 16px;\n  font-style: normal;\n  text-align: center;\n  text-decoration: underline;\n  text-transform: uppercase;\n  width: inherit;\n  color: var(--color-white);\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}";
 
-var css_248z$1c = ":host {\n  display: grid;\n  gap: var(--spacing-m);\n}\n\n:host .navigation-list {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.selected button {\n  min-width: 44px;\n  min-height: 44px;\n  display: grid;\n  line-height: 1.5rem;\n  font-family: var(--font-family);\n  cursor: not-allowed;\n  font-weight: 700;\n  padding: 10px 12px;\n  border: none;\n  font-size: 16px;\n  font-style: normal;\n  text-align: center;\n  text-decoration: underline;\n  text-transform: uppercase;\n  width: inherit;\n  color: var(--color-white);\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}";
+var css_248z$1c = ":host progress,\n:host span {\n  display: block;\n  height: 0px;\n  overflow: hidden;\n  width: 0px;\n}\n\nsvg line:first-child,\nsvg circle:first-child {\n  fill: transparent;\n  stroke: var(--color-grey-25);\n}\n\nsvg line:last-child,\nsvg circle:last-child {\n  stroke: var(--color-blue-130);\n  fill: transparent;\n}\n\nprogress {\n  display: none;\n}";
 
-var css_248z$1b = ":host progress,\n:host span {\n  display: block;\n  height: 0px;\n  overflow: hidden;\n  width: 0px;\n}\n\nsvg line:first-child,\nsvg circle:first-child {\n  fill: transparent;\n  stroke: var(--color-grey-25);\n}\n\nsvg line:last-child,\nsvg circle:last-child {\n  stroke: var(--color-blue-130);\n  fill: transparent;\n}\n\nprogress {\n  display: none;\n}";
+var css_248z$1b = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$1a = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$1a = ".kol-link-wc > a > .kol-span-wc {\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0.25em 0.75em;\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n  cursor: pointer;\n}";
 
-var css_248z$19 = "kol-link-wc > a > kol-span-wc {\n  border-radius: 0;\n  border-style: solid;\n  border-width: 2px;\n  font-weight: var(--font-weight-bold);\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0.25em 0.75em;\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n  color: var(--color-white);\n  cursor: pointer;\n}";
+var css_248z$19 = ".popover {\n  background: #fff;\n}";
 
-var css_248z$18 = ".popover {\n  background: #fff;\n}";
+var css_248z$18 = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5em;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-midnight);\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\nth {\n  background-color: var(--color-white);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5em;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n  background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n  padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  :host > div:last-child,\n  :host > div:last-child > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div:last-child .kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
 
-var css_248z$17 = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5em;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-midnight);\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\nth {\n  background-color: var(--color-white);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5em;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n  background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n  padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  :host > div:last-child,\n  :host > div:last-child > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div:last-child kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
+var css_248z$17 = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\n.kol-button-group-wc {\n  border-bottom: 1px solid var(--color-grey-25);\n  margin-bottom: -1px;\n}\n\n.kol-button-group-wc button {\n  border: none;\n  margin-bottom: -1px;\n}\n\n.kol-button-group-wc button .kol-span-wc {\n  padding: 0.5rem;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.kol-button-group-wc button.selected .kol-span-wc {\n  border-color: var(--color-grey-25);\n  border-style: solid;\n  border-width: 1px;\n  border-bottom-color: white;\n  border-top-color: var(--color-blue);\n  box-shadow: 0 -3px var(--color-blue);\n  font-weight: var(--font-weight-bold);\n  color: var(--color-blue);\n}\n\n.kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n  color: var(--color-blue-130);\n}\n\n.kol-button-group-wc button:focus .kol-span-wc {\n  outline-color: var(--color-blue-130);\n  outline-style: solid;\n  outline-width: 2px;\n}";
 
-var css_248z$16 = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\n.counter {\n  order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$16 = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\n.counter {\n  order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
 var css_248z$15 = ":host {\n  top: 1rem;\n  right: 1rem;\n  width: 440px;\n}";
 
@@ -10356,106 +10420,106 @@ var css_248z$14 = ".spin span:nth-child(1) {\n  background-color: var(--color-bl
 var css_248z$13 = ":host {\n  display: block;\n}\n\n.toast {\n  background: #fff;\n  margin-top: 1rem;\n}\n\n.alert {\n  display: block;\n}";
 
 const ECL_EC = KoliBri.createTheme("ecl-ec", {
-  GLOBAL: css_248z$1B,
-  "KOL-HEADING": css_248z$1s,
-  "KOL-ACCORDION": css_248z$1A,
-  "KOL-INDENTED-TEXT": css_248z$1q,
-  "KOL-BUTTON": css_248z$1w,
-  "KOL-LINK-BUTTON": css_248z$1f,
-  "KOL-BADGE": css_248z$1y,
-  "KOL-ALERT": css_248z$1z,
+  GLOBAL: css_248z$1D,
+  "KOL-HEADING": css_248z$1t,
+  "KOL-ACCORDION": css_248z$1C,
+  "KOL-INDENTED-TEXT": css_248z$1r,
+  "KOL-BUTTON": css_248z$1y,
+  "KOL-LINK-BUTTON": css_248z$1g,
+  "KOL-BADGE": css_248z$1A,
+  "KOL-ALERT": css_248z$1B,
   "KOL-TABS": css_248z$17,
-  "KOL-LINK": css_248z$1e,
-  "KOL-BUTTON-LINK": css_248z$1v,
-  "KOL-BREADCRUMB": css_248z$1x,
-  "KOL-DETAILS": css_248z$1t,
-  "KOL-PROGRESS": css_248z$1b,
+  "KOL-LINK": css_248z$1f,
+  "KOL-BUTTON-LINK": css_248z$1w,
+  "KOL-BREADCRUMB": css_248z$1z,
+  "KOL-DETAILS": css_248z$1u,
+  "KOL-PROGRESS": css_248z$1c,
   "KOL-SPIN": css_248z$14,
-  "KOL-PAGINATION": css_248z$1c,
-  "KOL-INPUT-CHECKBOX": css_248z$1p,
-  "KOL-INPUT-COLOR": css_248z$1o,
-  "KOL-CARD": css_248z$1u,
-  "KOL-BUTTON-GROUP": css_248z$1w,
-  "KOL-INPUT-RADIO": css_248z$1i,
-  "KOL-INPUT-RANGE": css_248z$1h,
-  "KOL-INPUT-TEXT": css_248z$1g,
-  "KOL-INPUT-PASSWORD": css_248z$1j,
-  "KOL-INPUT-NUMBER": css_248z$1k,
-  "KOL-INPUT-DATE": css_248z$1n,
-  "KOL-INPUT-EMAIL": css_248z$1m,
-  "KOL-INPUT-FILE": css_248z$1l,
-  "KOL-SELECT": css_248z$1a,
+  "KOL-PAGINATION": css_248z$1d,
+  "KOL-INPUT-CHECKBOX": css_248z$1q,
+  "KOL-INPUT-COLOR": css_248z$1p,
+  "KOL-CARD": css_248z$1v,
+  "KOL-BUTTON-GROUP": css_248z$1x,
+  "KOL-INPUT-RADIO": css_248z$1j,
+  "KOL-INPUT-RANGE": css_248z$1i,
+  "KOL-INPUT-TEXT": css_248z$1h,
+  "KOL-INPUT-PASSWORD": css_248z$1k,
+  "KOL-INPUT-NUMBER": css_248z$1l,
+  "KOL-INPUT-DATE": css_248z$1o,
+  "KOL-INPUT-EMAIL": css_248z$1n,
+  "KOL-INPUT-FILE": css_248z$1m,
+  "KOL-SELECT": css_248z$1b,
   "KOL-TEXTAREA": css_248z$16,
-  "KOL-ICON": css_248z$1r,
-  "KOL-TABLE": css_248z$17,
-  "KOL-NAV": css_248z$1d,
-  "KOL-SKIP-NAV": css_248z$19,
-  "KOL-SPLIT-BUTTON": css_248z$18,
+  "KOL-ICON": css_248z$1s,
+  "KOL-TABLE": css_248z$18,
+  "KOL-NAV": css_248z$1e,
+  "KOL-SKIP-NAV": css_248z$1a,
+  "KOL-SPLIT-BUTTON": css_248z$19,
   "KOL-TOAST-CONTAINER": css_248z$15,
   "KOL-TOAST": css_248z$13
 });
 
-var css_248z$12 = "kol-tooltip-wc .tooltip-area {\n  background-color: #f2f2f2;\n}\n\nkol-tooltip-wc .tooltip-arrow {\n  background-color: #626262;\n}\n\nkol-tooltip-wc .tooltip-content {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  border-radius: 2px;\n  border: 1px solid #626262;\n}\n\n:host {\n  --color-blue: #0e47cb;\n  --color-blue-140: #082b7a;\n  --color-blue-130: #082b7a;\n  --color-blue-120: #0b39a2;\n  --color-blue-110: #0d40b7;\n  --color-blue-100: #0e47cb;\n  --color-blue-80: #3e6cd5;\n  --color-blue-60: #6e91e0;\n  --color-blue-40: #9fb5ea;\n  --color-blue-20: #cfdaf5;\n  --color-blue-10: #e7edfa;\n  --color-blue-5: #f3f6fc;\n  --color-yellow: #ffcc00;\n  --color-yellow-140: #997a00;\n  --color-yellow-130: #b38f00;\n  --color-yellow-120: #cca300;\n  --color-yellow-110: #e6b800;\n  --color-yellow-100: #ffcc00;\n  --color-yellow-80: #ffd633;\n  --color-yellow-60: #ffe066;\n  --color-yellow-40: #ffeb99;\n  --color-yellow-20: #fff5cc;\n  --color-yellow-10: #fffae6;\n  --color-yellow-5: #fffcf2;\n  --color-grey: #262b38;\n  --color-grey-140: #171a22;\n  --color-grey-130: #1b1e27;\n  --color-grey-120: #1e222d;\n  --color-grey-110: #222732;\n  --color-grey-100: #262b38;\n  --color-grey-80: #515560;\n  --color-grey-75: #515560;\n  --color-grey-60: #7d8088;\n  --color-grey-40: #a8aaaf;\n  --color-grey-20: #d4d5d7;\n  --color-grey-10: #e9eaeb;\n  --color-grey-5: #f4f5f5;\n  --color-grey-3: #f9f9f9;\n  --color-orange: #ff6200;\n  --color-orange-140: #993b00;\n  --color-orange-130: #b34500;\n  --color-orange-120: #cc4e00;\n  --color-orange-110: #e65800;\n  --color-orange-100: #e65800;\n  --color-orange-80: #ff8133;\n  --color-orange-60: #ff914d;\n  --color-orange-40: #ffb180;\n  --color-orange-20: #ffd0b3;\n  --color-orange-10: #ffefe6;\n  --color-orange-5: #fff7f2;\n  --color-green: #00c991;\n  --color-green-140: #007957;\n  --color-green-130: #008d66;\n  --color-green-120: #008d66;\n  --color-green-110: #00b583;\n  --color-green-100: #00c991;\n  --color-green-80: #00c991;\n  --color-green-60: #66dfbd;\n  --color-green-40: #99e9d3;\n  --color-green-20: #ccf4e9;\n  --color-green-10: #e6faf4;\n  --color-green-5: #f2fcf9;\n  --color-red: #ef0044;\n  --color-red-140: #8f0029;\n  --color-red-130: #a70030;\n  --color-red-120: #bf0036;\n  --color-red-110: #d7003d;\n  --color-red-100: #ef0044;\n  --color-red-80: #f23369;\n  --color-red-60: #f5668f;\n  --color-red-40: #f999b4;\n  --color-red-20: #fcccda;\n  --color-red-10: #fde6ec;\n  --color-red-5: #fef2f5;\n  --color-accent-blue-100: #00e9ff;\n  --color-accent-blue-30: #b3f8ff;\n  --color-purple: #510dcd;\n  --color-purple-140: #31087b;\n  --color-purple-130: #390990;\n  --color-purple-120: #410aa4;\n  --color-purple-110: #490cb9;\n  --color-purple-100: #510dcd;\n  --color-purple-80: #743dd7;\n  --color-purple-60: #976ee1;\n  --color-purple-40: #bf9af1;\n  --color-purple-20: #dccff5;\n  --color-purple-10: #eee7fa;\n  --color-purple-5: #eee7fa;\n  --color-white: #fff;\n  --color-black: #000;\n  --font-family: Arial, sans-serif;\n  --font-size: 16px;\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n  --line-height-regular: 1.5em;\n  --line-height-heading: 1.2em;\n  --spacing-4xl: 64px;\n  --spacing-3xl: 48px;\n  --spacing-2xl: 40px;\n  --spacing-xl: 32px;\n  --spacing-l: 24px;\n  --spacing-m: 16px;\n  --spacing-s: 12px;\n  --spacing-xs: 8px;\n  --spacing-2xs: 4px;\n  /* ?! */\n}\n\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  display: inline-block;\n  font-family: var(--font-family);\n}\n\na,\nbutton {\n  font-size: var(--font-size);\n  outline: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold);\n  line-height: var(--line-height-heading);\n  margin: 0;\n  padding: 0;\n}\n\np {\n  font-weight: var(--font-weight);\n}\n\nkol-span-wc,\nkol-span-wc > span {\n  gap: 0.5em;\n}\n\n.required label span::after,\n.required legend span::after {\n  color: var(--color-red);\n  padding-left: 0.25em;\n}\n\np.l,\np.lead {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\np,\np.m,\np.medium {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\np.s,\np.small {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\np.xs,\np.extra-small {\n  font-size: 0.75rem;\n  line-height: 1.25rem;\n}";
+var css_248z$12 = ".kol-tooltip-wc .tooltip-area {\n  background-color: #f2f2f2;\n}\n\n.kol-tooltip-wc .tooltip-arrow {\n  background-color: #626262;\n}\n\n.kol-tooltip-wc .tooltip-content {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  border-radius: 2px;\n  border: 1px solid #626262;\n}\n\n:host {\n  --color-blue: #0e47cb;\n  --color-blue-140: #082b7a;\n  --color-blue-130: #082b7a;\n  --color-blue-120: #0b39a2;\n  --color-blue-110: #0d40b7;\n  --color-blue-100: #0e47cb;\n  --color-blue-80: #3e6cd5;\n  --color-blue-60: #6e91e0;\n  --color-blue-40: #9fb5ea;\n  --color-blue-20: #cfdaf5;\n  --color-blue-10: #e7edfa;\n  --color-blue-5: #f3f6fc;\n  --color-yellow: #ffcc00;\n  --color-yellow-140: #997a00;\n  --color-yellow-130: #b38f00;\n  --color-yellow-120: #cca300;\n  --color-yellow-110: #e6b800;\n  --color-yellow-100: #ffcc00;\n  --color-yellow-80: #ffd633;\n  --color-yellow-60: #ffe066;\n  --color-yellow-40: #ffeb99;\n  --color-yellow-20: #fff5cc;\n  --color-yellow-10: #fffae6;\n  --color-yellow-5: #fffcf2;\n  --color-grey: #262b38;\n  --color-grey-140: #171a22;\n  --color-grey-130: #1b1e27;\n  --color-grey-120: #1e222d;\n  --color-grey-110: #222732;\n  --color-grey-100: #262b38;\n  --color-grey-80: #515560;\n  --color-grey-75: #515560;\n  --color-grey-60: #7d8088;\n  --color-grey-40: #a8aaaf;\n  --color-grey-20: #d4d5d7;\n  --color-grey-10: #e9eaeb;\n  --color-grey-5: #f4f5f5;\n  --color-grey-3: #f9f9f9;\n  --color-orange: #ff6200;\n  --color-orange-140: #993b00;\n  --color-orange-130: #b34500;\n  --color-orange-120: #cc4e00;\n  --color-orange-110: #e65800;\n  --color-orange-100: #e65800;\n  --color-orange-80: #ff8133;\n  --color-orange-60: #ff914d;\n  --color-orange-40: #ffb180;\n  --color-orange-20: #ffd0b3;\n  --color-orange-10: #ffefe6;\n  --color-orange-5: #fff7f2;\n  --color-green: #00c991;\n  --color-green-140: #007957;\n  --color-green-130: #008d66;\n  --color-green-120: #008d66;\n  --color-green-110: #00b583;\n  --color-green-100: #00c991;\n  --color-green-80: #00c991;\n  --color-green-60: #66dfbd;\n  --color-green-40: #99e9d3;\n  --color-green-20: #ccf4e9;\n  --color-green-10: #e6faf4;\n  --color-green-5: #f2fcf9;\n  --color-red: #ef0044;\n  --color-red-140: #8f0029;\n  --color-red-130: #a70030;\n  --color-red-120: #bf0036;\n  --color-red-110: #d7003d;\n  --color-red-100: #ef0044;\n  --color-red-80: #f23369;\n  --color-red-60: #f5668f;\n  --color-red-40: #f999b4;\n  --color-red-20: #fcccda;\n  --color-red-10: #fde6ec;\n  --color-red-5: #fef2f5;\n  --color-accent-blue-100: #00e9ff;\n  --color-accent-blue-30: #b3f8ff;\n  --color-purple: #510dcd;\n  --color-purple-140: #31087b;\n  --color-purple-130: #390990;\n  --color-purple-120: #410aa4;\n  --color-purple-110: #490cb9;\n  --color-purple-100: #510dcd;\n  --color-purple-80: #743dd7;\n  --color-purple-60: #976ee1;\n  --color-purple-40: #bf9af1;\n  --color-purple-20: #dccff5;\n  --color-purple-10: #eee7fa;\n  --color-purple-5: #eee7fa;\n  --color-white: #fff;\n  --color-black: #000;\n  --font-family: Arial, sans-serif;\n  --font-size: 16px;\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n  --line-height-regular: 1.5em;\n  --line-height-heading: 1.2em;\n  --spacing-4xl: 64px;\n  --spacing-3xl: 48px;\n  --spacing-2xl: 40px;\n  --spacing-xl: 32px;\n  --spacing-l: 24px;\n  --spacing-m: 16px;\n  --spacing-s: 12px;\n  --spacing-xs: 8px;\n  --spacing-2xs: 4px;\n  /* ?! */\n}\n\n:host {\n  background-color: transparent;\n  /* Reset global background-color defined by components */\n  display: inline-block;\n  font-family: var(--font-family);\n}\n\na,\nbutton {\n  font-size: var(--font-size);\n  outline: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold);\n  line-height: var(--line-height-heading);\n  margin: 0;\n  padding: 0;\n}\n\np {\n  font-weight: var(--font-weight);\n}\n\n.kol-span-wc,\n.kol-span-wc > span {\n  gap: 0.5em;\n}\n\n.required label span::after,\n.required legend span::after {\n  color: var(--color-red);\n  padding-left: 0.25em;\n}\n\np.l,\np.lead {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\np,\np.m,\np.medium {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\np.s,\np.small {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\np.xs,\np.extra-small {\n  font-size: 0.75rem;\n  line-height: 1.25rem;\n}";
 
-var css_248z$11 = ".accordion,\ndiv[part*=accordion] {\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  margin: 0;\n  overflow: hidden;\n}\n\n.headline {\n  font-size: 2em;\n}\n\ndiv[part*=close] .headline button {\n  border-radius: 8px;\n}\n\ndiv[part*=open] .headline button {\n  border-start-end-radius: 8px;\n  border-start-start-radius: 8px;\n}\n\n.headline button {\n  outline-offset: -1px;\n  border: 0;\n  border-bottom-color: #cfdaf5;\n  border-bottom-style: solid;\n  border-bottom-width: 2px;\n  color: #171a22;\n  position: relative;\n  display: block;\n  font: normal normal 400 1.125rem/1.75rem arial, sans-serif;\n  padding: 1.5rem;\n  text-align: start;\n  width: 100%;\n}\n\n.headline button::before {\n  background-color: #fc0;\n  border-end-end-radius: 2px;\n  border-end-start-radius: 2px;\n  content: \"\";\n  height: 4px;\n  position: absolute;\n  left: 1.5rem;\n  top: 0;\n  width: 32px;\n}\n\n.headline button kol-icon {\n  margin-right: 0.75rem;\n}\n\n.headline button kol-icon::part(icon)::before {\n  color: #0e47cb;\n  font-weight: 900;\n  font-family: \"Font Awesome 6 Free\";\n}\n\n.open .headline button kol-icon::part(icon)::before {\n  content: \"\\f077\";\n}\n\n:not(.open) .headline button kol-icon::part(icon)::before {\n  content: \"\\f078\";\n}\n\n.content,\ndiv[part=content] {\n  -webkit-border-start: 4px solid #0e47cb;\n  -webkit-margin-start: 0;\n  border-bottom: 2px solid #cfdaf5;\n  border-inline-start: 4px solid #0e47cb;\n  color: #515560;\n  font: normal normal 400 1rem/1.5rem arial, sans-serif;\n  margin-inline-start: 0;\n  padding: 1.5rem;\n}\n\nkol-span-wc > span {\n  align-items: baseline;\n}";
+var css_248z$11 = ".accordion,\ndiv[part*=accordion] {\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  margin: 0;\n  overflow: hidden;\n}\n\n.headline {\n  font-size: 2em;\n}\n\ndiv[part*=close] .headline button {\n  border-radius: 8px;\n}\n\ndiv[part*=open] .headline button {\n  border-start-end-radius: 8px;\n  border-start-start-radius: 8px;\n}\n\n.headline button {\n  outline-offset: -1px;\n  border: 0;\n  border-bottom-color: #cfdaf5;\n  border-bottom-style: solid;\n  border-bottom-width: 2px;\n  color: #171a22;\n  position: relative;\n  display: block;\n  font: normal normal 400 1.125rem/1.75rem arial, sans-serif;\n  padding: 1.5rem;\n  text-align: start;\n  width: 100%;\n}\n\n.headline button::before {\n  background-color: #fc0;\n  border-end-end-radius: 2px;\n  border-end-start-radius: 2px;\n  content: \"\";\n  height: 4px;\n  position: absolute;\n  left: 1.5rem;\n  top: 0;\n  width: 32px;\n}\n\n.headline button .kol-icon {\n  margin-right: 0.75rem;\n}\n\n.headline button .kol-icon::part(icon)::before {\n  color: #0e47cb;\n  font-weight: 900;\n  font-family: \"Font Awesome 6 Free\";\n}\n\n.open .headline button .kol-icon::part(icon)::before {\n  content: \"\\f077\";\n}\n\n:not(.open) .headline button .kol-icon::part(icon)::before {\n  content: \"\\f078\";\n}\n\n.content,\ndiv[part=content] {\n  -webkit-border-start: 4px solid #0e47cb;\n  -webkit-margin-start: 0;\n  border-bottom: 2px solid #cfdaf5;\n  border-inline-start: 4px solid #0e47cb;\n  color: #515560;\n  font: normal normal 400 1rem/1.5rem arial, sans-serif;\n  margin-inline-start: 0;\n  padding: 1.5rem;\n}\n\n.kol-span-wc > span {\n  align-items: baseline;\n}";
 
-var css_248z$10 = ":host > div {\n  background-color: var(--color-white);\n}\n\n:host > div.card {\n  border-style: solid;\n  border-width: 2px;\n}\n\n:host > div.msg {\n  border: none;\n}\n\n:host .msg .heading kol-icon {\n  font-size: 1.5em;\n  margin: var(--spacing-2xs);\n}\n\n:host .msg .heading > div {\n  padding: var(--spacing-2xs);\n}\n\n:host .card {\n  padding-bottom: 1.5rem;\n  padding-inline-end: 0.5rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1.5rem;\n}\n\n:host .card .heading {\n  gap: 0.5rem;\n}\n\n:host .card .content {\n  margin-left: 2.5rem;\n}\n\n:host .card .heading kol-icon {\n  font-size: 2rem;\n}\n\n:host .default {\n  border-color: var(--color-grey);\n}\n\n:host .default .heading kol-icon {\n  color: var(--color-grey);\n}\n\n:host .error {\n  border-color: var(--color-red);\n}\n\n:host .error .heading kol-icon {\n  color: var(--color-red);\n}\n\n:host .info {\n  border-color: var(--color-blue);\n}\n\n:host .info .heading kol-icon {\n  color: var(--color-blue);\n}\n\n:host .success {\n  border-color: var(--color-green);\n}\n\n:host .success .heading kol-icon {\n  color: var(--color-green);\n}\n\n:host .warning {\n  border-color: var(--color-orange);\n}\n\n:host .warning .heading kol-icon {\n  color: var(--color-orange);\n}";
+var css_248z$10 = ":host > div {\n  background-color: var(--color-white);\n}\n\n:host > div.card {\n  border-style: solid;\n  border-width: 2px;\n}\n\n:host > div.msg {\n  border: none;\n}\n\n:host .msg .heading .kol-icon {\n  font-size: 1.5em;\n  margin: var(--spacing-2xs);\n}\n\n:host .msg .heading > div {\n  padding: var(--spacing-2xs);\n}\n\n:host .card {\n  padding-bottom: 1.5rem;\n  padding-inline-end: 0.5rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1.5rem;\n}\n\n:host .card .heading {\n  gap: 0.5rem;\n}\n\n:host .card .content {\n  margin-left: 2.5rem;\n}\n\n:host .card .heading .kol-icon {\n  font-size: 2rem;\n}\n\n:host .default {\n  border-color: var(--color-grey);\n}\n\n:host .default .heading .kol-icon {\n  color: var(--color-grey);\n}\n\n:host .error {\n  border-color: var(--color-red);\n}\n\n:host .error .heading .kol-icon {\n  color: var(--color-red);\n}\n\n:host .info {\n  border-color: var(--color-blue);\n}\n\n:host .info .heading .kol-icon {\n  color: var(--color-blue);\n}\n\n:host .success {\n  border-color: var(--color-green);\n}\n\n:host .success .heading .kol-icon {\n  color: var(--color-green);\n}\n\n:host .warning {\n  border-color: var(--color-orange);\n}\n\n:host .warning .heading .kol-icon {\n  color: var(--color-orange);\n}";
 
 var css_248z$$ = ":host > span {\n  font: normal normal var(--font-weight) 0.875rem/1em var(--font-family);\n  padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n  text-transform: uppercase;\n}";
 
-var css_248z$_ = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\na:focus,\nbutton:focus {\n  outline: none;\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  min-height: 44px;\n  min-width: 44px;\n  border-radius: 4px;\n  font: normal normal 400 1rem/1.25rem arial, sans-serif;\n  font-weight: 400;\n  margin: 0;\n  padding: 0.75rem;\n}\n\na:focus-visible > kol-span-wc,\nbutton:focus-visible > kol-span-wc {\n  outline-offset: -4px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\na:active > kol-span-wc,\nbutton:active > kol-span-wc,\na:hover > kol-span-wc,\nbutton:hover > kol-span-wc {\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n}\n\n.primary a > kol-span-wc,\n.primary button > kol-span-wc {\n  background-color: #0e47cb;\n  color: #fff;\n}\n\n.primary a:focus-visible > kol-span-wc,\n.primary button:focus-visible > kol-span-wc {\n  outline-color: #fff;\n}\n\n.primary a:hover > kol-span-wc,\n.primary button:hover > kol-span-wc {\n  background-color: #3e6cd5;\n}\n\n.secondary a > kol-span-wc,\n.secondary button > kol-span-wc {\n  background-color: #fff;\n  border: 2px solid #0e47cb;\n  color: #0e47cb;\n  padding: calc(0.75rem - 2px) calc(1rem - 2px);\n}\n\n.secondary a:focus-visible > kol-span-wc,\n.secondary button:focus-visible > kol-span-wc {\n  box-shadow: inset 0 0 0 4px #0e47cb;\n  outline-color: #fff;\n}\n\n.secondary a:hover > kol-span-wc,\n.secondary button:hover > kol-span-wc {\n  border-color: #0e47cb;\n  color: #0e47cb;\n}\n\n.normal a > kol-span-wc,\n.normal button > kol-span-wc {\n  background-color: #fc0;\n  color: #171a22;\n}\n\n.normal a:focus-visible > kol-span-wc,\n.normal button:focus-visible > kol-span-wc {\n  outline-color: #000;\n}\n\n.normal a:hover > kol-span-wc,\n.normal button:hover > kol-span-wc {\n  background-color: #fc0;\n  border-color: #fc0;\n}\n\n.danger a kol-span-wc,\n.danger button kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover kol-span-wc,\n.danger button:hover kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a > kol-span-wc,\n.ghost button > kol-span-wc {\n  color: #0e47cb;\n}\n\n.ghost a:focus-visible > kol-span-wc,\n.ghost button:focus-visible > kol-span-wc {\n  outline-color: #0e47cb;\n}\n\n.ghost a:hover > kol-span-wc,\n.ghost button:hover > kol-span-wc {\n  color: #0e47cb;\n}";
+var css_248z$_ = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\na:focus,\nbutton:focus {\n  outline: none;\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  min-height: 44px;\n  min-width: 44px;\n  border-radius: 4px;\n  font: normal normal 400 1rem/1.25rem arial, sans-serif;\n  font-weight: 400;\n  margin: 0;\n  padding: 0.75rem;\n}\n\na:focus-visible > .kol-span-wc,\nbutton:focus-visible > .kol-span-wc {\n  outline-offset: -4px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\na:active > .kol-span-wc,\nbutton:active > .kol-span-wc,\na:hover > .kol-span-wc,\nbutton:hover > .kol-span-wc {\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n}\n\n.primary a > .kol-span-wc,\n.primary button > .kol-span-wc {\n  background-color: #0e47cb;\n  color: #fff;\n}\n\n.primary a:focus-visible > .kol-span-wc,\n.primary button:focus-visible > .kol-span-wc {\n  outline-color: #fff;\n}\n\n.primary a:hover > .kol-span-wc,\n.primary button:hover > .kol-span-wc {\n  background-color: #3e6cd5;\n}\n\n.secondary a > .kol-span-wc,\n.secondary button > .kol-span-wc {\n  background-color: #fff;\n  border: 2px solid #0e47cb;\n  color: #0e47cb;\n  padding: calc(0.75rem - 2px) calc(1rem - 2px);\n}\n\n.secondary a:focus-visible > .kol-span-wc,\n.secondary button:focus-visible > .kol-span-wc {\n  box-shadow: inset 0 0 0 4px #0e47cb;\n  outline-color: #fff;\n}\n\n.secondary a:hover > .kol-span-wc,\n.secondary button:hover > .kol-span-wc {\n  border-color: #0e47cb;\n  color: #0e47cb;\n}\n\n.normal a > .kol-span-wc,\n.normal button > .kol-span-wc {\n  background-color: #fc0;\n  color: #171a22;\n}\n\n.normal a:focus-visible > .kol-span-wc,\n.normal button:focus-visible > .kol-span-wc {\n  outline-color: #000;\n}\n\n.normal a:hover > .kol-span-wc,\n.normal button:hover > .kol-span-wc {\n  background-color: #fc0;\n  border-color: #fc0;\n}\n\n.danger a .kol-span-wc,\n.danger button .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover .kol-span-wc,\n.danger button:hover .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a > .kol-span-wc,\n.ghost button > .kol-span-wc {\n  color: #0e47cb;\n}\n\n.ghost a:focus-visible > .kol-span-wc,\n.ghost button:focus-visible > .kol-span-wc {\n  outline-color: #0e47cb;\n}\n\n.ghost a:hover > .kol-span-wc,\n.ghost button:hover > .kol-span-wc {\n  color: #0e47cb;\n}";
 
-var css_248z$Z = ":host > kol-button-group-wc {\n  gap: var(--spacing-2xs);\n}";
+var css_248z$Z = ":host > .kol-button-group-wc {\n  gap: var(--spacing-2xs);\n}";
 
 var css_248z$Y = "a,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$X = ":host > div {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  grid-template-rows: min-content 2fr min-content;\n  box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n}\n\n:host kol-heading-wc {\n  display: inline-flex;\n  font-style: normal;\n  font-weight: 700;\n  font-size: 1.25em;\n  line-height: 1.75em;\n}\n\n:host div.header {\n  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n}\n\n:host div.content {\n  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: var(--spacing-xs) var(--spacing-m);\n}\n\n:host > div > div.content + div.footer {\n  border-top: 2px solid var(--color-blue);\n}";
+var css_248z$X = ":host > div {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  grid-template-rows: min-content 2fr min-content;\n  box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n}\n\n:host .kol-heading-wc {\n  display: inline-flex;\n  font-style: normal;\n  font-weight: 700;\n  font-size: 1.25em;\n  line-height: 1.75em;\n}\n\n:host div.header {\n  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n}\n\n:host div.content {\n  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n  overflow: hidden;\n}\n\n:host div.footer {\n  padding: var(--spacing-xs) var(--spacing-m);\n}\n\n:host > div > div.content + div.footer {\n  border-top: 2px solid var(--color-blue);\n}";
 
 var css_248z$W = "h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold);\n}\n\nh1 {\n  font-size: 2.625rem;\n  line-height: 3.25rem;\n}\n\nh2 {\n  font-size: 2.25rem;\n  line-height: 2.75rem;\n}\n\nh3 {\n  font-size: 2rem;\n  line-height: 2.5rem;\n}\n\nh4 {\n  font-size: 1.75rem;\n  line-height: 2rem;\n}\n\nh5 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n}\n\nh6 {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}";
 
 var css_248z$V = ":host > div {\n  -webkit-border-start: 8px solid #0e47cb;\n  -webkit-padding-start: 1.5rem;\n  border-end-start-radius: 4px;\n  border-inline-start: 8px solid #0e47cb;\n  border-start-start-radius: 4px;\n  display: inline-block;\n  padding-bottom: 1rem;\n  padding-inline-start: 1.5rem;\n  padding-top: 1rem;\n}";
 
-var css_248z$U = ".checkbox-container {\n  justify-content: flex-start;\n}\n\ninput[type=checkbox] {\n  background-color: var(--color-white);\n  border-width: 2px;\n  border-style: solid;\n  color: var(--color-grey);\n  line-height: 1.5em;\n  font-size: 1rem;\n}\n\ninput[type=checkbox]:focus {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\ninput[type=checkbox] {\n  border-color: var(--color-grey-75);\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:hover {\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:checked:hover {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.error input[type=checkbox] {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:hover {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked:hover {\n  background-color: var(--color-red-1xx);\n  border-color: var(--color-red-1xx);\n}\n\n.error.required label > span::after {\n  color: var(--color-red);\n}\n\n.default .icon {\n  margin-left: 0.2rem;\n}\n\n.default.checked .icon {\n  color: var(--color-white);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n}\n\n.switch input[type=checkbox]::before,\n.switch input[type=checkbox]:indeterminate::before {\n  background-color: var(--color-grey-75);\n}\n\n.switch input[type=checkbox]:hover::before,\n.switch input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-blue);\n}\n\n.switch input[type=checkbox]:checked::before,\n.switch input[type=checkbox]:checked:hover::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]::before {\n  background-color: var(--color-red);\n}\n\n.switch.error input[type=checkbox]:checked::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-red-1xx);\n}\n\nkol-input {\n  gap: var(--spacing-xs);\n}\n\n.button {\n  gap: var(--spacing-xs) 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\nkol-input > .input {\n  order: 2;\n}\n\nkol-input > label {\n  order: 3;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
+var css_248z$U = ".checkbox-container {\n  justify-content: flex-start;\n}\n\ninput[type=checkbox] {\n  background-color: var(--color-white);\n  border-width: 2px;\n  border-style: solid;\n  color: var(--color-grey);\n  line-height: 1.5em;\n  font-size: 1rem;\n}\n\ninput[type=checkbox]:focus {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\ninput[type=checkbox] {\n  border-color: var(--color-grey-75);\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:hover {\n  border-color: var(--color-blue);\n}\n\ninput[type=checkbox]:checked:hover {\n  background-color: var(--color-blue-130);\n  border-color: var(--color-blue-130);\n}\n\n.error input[type=checkbox] {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:hover {\n  border-color: var(--color-red);\n}\n\n.error input[type=checkbox]:checked:hover {\n  background-color: var(--color-red-1xx);\n  border-color: var(--color-red-1xx);\n}\n\n.error.required label > span::after {\n  color: var(--color-red);\n}\n\n.default .icon {\n  margin-left: 0.2rem;\n}\n\n.default.checked .icon {\n  color: var(--color-white);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n}\n\n.switch input[type=checkbox]::before,\n.switch input[type=checkbox]:indeterminate::before {\n  background-color: var(--color-grey-75);\n}\n\n.switch input[type=checkbox]:hover::before,\n.switch input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-blue);\n}\n\n.switch input[type=checkbox]:checked::before,\n.switch input[type=checkbox]:checked:hover::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]::before {\n  background-color: var(--color-red);\n}\n\n.switch.error input[type=checkbox]:checked::before {\n  background-color: var(--color-white);\n}\n\n.switch.error input[type=checkbox]:indeterminate:hover::before {\n  background-color: var(--color-red-1xx);\n}\n\n.kol-input {\n  gap: var(--spacing-xs);\n}\n\n.button {\n  gap: var(--spacing-xs) 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\n.kol-input > .input {\n  order: 2;\n}\n\n.kol-input > label {\n  order: 3;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
 
-var css_248z$T = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}\n\n.button:focus-within {\n  outline-color: var(--color-blue-130);\n  outline-style: solid;\n  outline-width: 2px;\n}";
+var css_248z$T = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}\n\n.button:focus-within {\n  outline-color: var(--color-blue-130);\n  outline-style: solid;\n  outline-width: 2px;\n}";
 
-var css_248z$S = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$S = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$R = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$R = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$Q = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  margin: 1px;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$Q = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  margin: 1px;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$P = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$P = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$O = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$O = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$N = "fieldset {\n  border: 0;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\nfieldset kol-alert {\n  order: 1;\n}\n\nfieldset .hint {\n  order: 2;\n}\n\nfieldset kol-alert {\n  order: 3;\n}\n\nfieldset kol-input {\n  order: 4;\n}\n\n.radio-input-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.radio-label {\n  padding-left: 0.5rem;\n}\n\ninput[type=radio] {\n  outline: 2px solid var(--color-grey-75);\n  outline-offset: 2px;\n}\n\ninput[type=radio]:before {\n  display: none;\n}\n\ninput[type=radio]:checked {\n  border-color: var(--color-blue);\n  border-width: 7px;\n}\n\ninput[type=radio]:focus {\n  outline-color: var(--color-blue);\n}\n\ninput[type=radio]:not(:disabled):hover {\n  border-color: var(--color-blue);\n}\n\nlabel,\nlegend {\n  color: var(--color-grey);\n}\n\nlegend {\n  font-weight: var(--font-weight-bold);\n}\n\n.error input[type=radio] {\n  border: 2px solid var(--color-red);\n}\n\n.error input[type=radio]:before {\n  display: none;\n}\n\n.error input[type=radio]:checked {\n  border-color: var(--color-red);\n  border-width: 7px;\n}\n\n.error input[type=radio]:not(:disabled):hover {\n  border-color: var(--color-red-1xx);\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-xs));\n  order: 1;\n  width: 100%;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
+var css_248z$N = "fieldset {\n  border: 0;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\nfieldset .kol-alert {\n  order: 1;\n}\n\nfieldset .hint {\n  order: 2;\n}\n\nfieldset .kol-alert {\n  order: 3;\n}\n\nfieldset .kol-input {\n  order: 4;\n}\n\n.radio-input-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.radio-label {\n  padding-left: 0.5rem;\n}\n\ninput[type=radio] {\n  outline: 2px solid var(--color-grey-75);\n  outline-offset: 2px;\n}\n\ninput[type=radio]:before {\n  display: none;\n}\n\ninput[type=radio]:checked {\n  border-color: var(--color-blue);\n  border-width: 7px;\n}\n\ninput[type=radio]:focus {\n  outline-color: var(--color-blue);\n}\n\ninput[type=radio]:not(:disabled):hover {\n  border-color: var(--color-blue);\n}\n\nlabel,\nlegend {\n  color: var(--color-grey);\n}\n\nlegend {\n  font-weight: var(--font-weight-bold);\n}\n\n.error input[type=radio] {\n  border: 2px solid var(--color-red);\n}\n\n.error input[type=radio]:before {\n  display: none;\n}\n\n.error input[type=radio]:checked {\n  border-color: var(--color-red);\n  border-width: 7px;\n}\n\n.error input[type=radio]:not(:disabled):hover {\n  border-color: var(--color-red-1xx);\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-xs));\n  order: 1;\n  width: 100%;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 4;\n}";
 
 var css_248z$M = ".inputs-wrapper {\n  gap: 1rem;\n}";
 
-var css_248z$L = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$L = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 44px !important;\n  min-height: 44px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
-var css_248z$K = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\na:focus,\nbutton:focus {\n  outline: none;\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  min-height: 44px;\n  min-width: 44px;\n  border-radius: 4px;\n  font: normal normal 400 1rem/1.25rem arial, sans-serif;\n  font-weight: 400;\n  margin: 0;\n  padding: 0.75rem;\n}\n\na:focus-visible > kol-span-wc,\nbutton:focus-visible > kol-span-wc {\n  outline-offset: -4px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\na:active > kol-span-wc,\nbutton:active > kol-span-wc,\na:hover > kol-span-wc,\nbutton:hover > kol-span-wc {\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n}\n\n.primary a > kol-span-wc,\n.primary button > kol-span-wc {\n  background-color: #0e47cb;\n  color: #fff;\n}\n\n.primary a:focus-visible > kol-span-wc,\n.primary button:focus-visible > kol-span-wc {\n  outline-color: #fff;\n}\n\n.primary a:hover > kol-span-wc,\n.primary button:hover > kol-span-wc {\n  background-color: #3e6cd5;\n}\n\n.secondary a > kol-span-wc,\n.secondary button > kol-span-wc {\n  background-color: #fff;\n  border: 2px solid #0e47cb;\n  color: #0e47cb;\n  padding: calc(0.75rem - 2px) calc(1rem - 2px);\n}\n\n.secondary a:focus-visible > kol-span-wc,\n.secondary button:focus-visible > kol-span-wc {\n  box-shadow: inset 0 0 0 4px #0e47cb;\n  outline-color: #fff;\n}\n\n.secondary a:hover > kol-span-wc,\n.secondary button:hover > kol-span-wc {\n  border-color: #0e47cb;\n  color: #0e47cb;\n}\n\n.normal a > kol-span-wc,\n.normal button > kol-span-wc {\n  background-color: #fc0;\n  color: #171a22;\n}\n\n.normal a:focus-visible > kol-span-wc,\n.normal button:focus-visible > kol-span-wc {\n  outline-color: #000;\n}\n\n.normal a:hover > kol-span-wc,\n.normal button:hover > kol-span-wc {\n  background-color: #fc0;\n  border-color: #fc0;\n}\n\n.danger a kol-span-wc,\n.danger button kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover kol-span-wc,\n.danger button:hover kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a > kol-span-wc,\n.ghost button > kol-span-wc {\n  color: #0e47cb;\n}\n\n.ghost a:focus-visible > kol-span-wc,\n.ghost button:focus-visible > kol-span-wc {\n  outline-color: #0e47cb;\n}\n\n.ghost a:hover > kol-span-wc,\n.ghost button:hover > kol-span-wc {\n  color: #0e47cb;\n}";
+var css_248z$K = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\na,\nbutton {\n  appearance: none;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\na:focus,\nbutton:focus {\n  outline: none;\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  min-height: 44px;\n  min-width: 44px;\n  border-radius: 4px;\n  font: normal normal 400 1rem/1.25rem arial, sans-serif;\n  font-weight: 400;\n  margin: 0;\n  padding: 0.75rem;\n}\n\na:focus-visible > .kol-span-wc,\nbutton:focus-visible > .kol-span-wc {\n  outline-offset: -4px;\n  outline-style: solid;\n  outline-width: 2px;\n}\n\na:active > .kol-span-wc,\nbutton:active > .kol-span-wc,\na:hover > .kol-span-wc,\nbutton:hover > .kol-span-wc {\n  box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n}\n\n.primary a > .kol-span-wc,\n.primary button > .kol-span-wc {\n  background-color: #0e47cb;\n  color: #fff;\n}\n\n.primary a:focus-visible > .kol-span-wc,\n.primary button:focus-visible > .kol-span-wc {\n  outline-color: #fff;\n}\n\n.primary a:hover > .kol-span-wc,\n.primary button:hover > .kol-span-wc {\n  background-color: #3e6cd5;\n}\n\n.secondary a > .kol-span-wc,\n.secondary button > .kol-span-wc {\n  background-color: #fff;\n  border: 2px solid #0e47cb;\n  color: #0e47cb;\n  padding: calc(0.75rem - 2px) calc(1rem - 2px);\n}\n\n.secondary a:focus-visible > .kol-span-wc,\n.secondary button:focus-visible > .kol-span-wc {\n  box-shadow: inset 0 0 0 4px #0e47cb;\n  outline-color: #fff;\n}\n\n.secondary a:hover > .kol-span-wc,\n.secondary button:hover > .kol-span-wc {\n  border-color: #0e47cb;\n  color: #0e47cb;\n}\n\n.normal a > .kol-span-wc,\n.normal button > .kol-span-wc {\n  background-color: #fc0;\n  color: #171a22;\n}\n\n.normal a:focus-visible > .kol-span-wc,\n.normal button:focus-visible > .kol-span-wc {\n  outline-color: #000;\n}\n\n.normal a:hover > .kol-span-wc,\n.normal button:hover > .kol-span-wc {\n  background-color: #fc0;\n  border-color: #fc0;\n}\n\n.danger a .kol-span-wc,\n.danger button .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n  color: var(--color-white);\n}\n\n.danger a:hover .kol-span-wc,\n.danger button:hover .kol-span-wc {\n  background-color: var(--color-red);\n  border-color: var(--color-red);\n}\n\n.ghost a > .kol-span-wc,\n.ghost button > .kol-span-wc {\n  color: #0e47cb;\n}\n\n.ghost a:focus-visible > .kol-span-wc,\n.ghost button:focus-visible > .kol-span-wc {\n  outline-color: #0e47cb;\n}\n\n.ghost a:hover > .kol-span-wc,\n.ghost button:hover > .kol-span-wc {\n  color: #0e47cb;\n}";
 
 var css_248z$J = "a,\nbutton {\n  appearance: none;\n  color: var(--color-blue);\n  text-decoration: underline;\n}\n\na:hover,\nbutton:hover {\n  color: var(--color-blue-130);\n}";
 
-var css_248z$I = ".list {\n  display: flex;\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n}\n\n.list.vertical {\n  flex-direction: column;\n}\n\n.entry {\n  display: flex;\n}\n\n.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc {\n  flex-grow: 1;\n}\n\n/* custom. */\nnav {\n  background-color: var(--color-blue);\n}\n\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.expand-button button {\n  background-color: var(--color-blue-130);\n  margin: auto;\n  height: 100%;\n}\n\nkol-span-wc {\n  border-color: transparent;\n  border-style: solid;\n  border-width: 2px;\n  color: var(--color-white);\n  font-size: 18px;\n  justify-items: start;\n  padding: 1rem;\n  height: 100%;\n}\n\nli > ul,\nli + li {\n  border-color: var(--color-blue-75);\n  border-style: solid;\n  border-width: 0;\n  border-top-width: 2px;\n}\n\na {\n  text-decoration: none;\n}\n\n:is(kol-button-wc, kol-link-wc):focus-within kol-span-wc {\n  border-color: var(--color-white);\n}\n\n:is(kol-button-wc, kol-link-wc):focus-within kol-span-wc,\n:is(kol-button-wc, kol-link-wc):hover kol-span-wc {\n  text-decoration: underline;\n}\n\ndiv > .expand-button kol-icon::part(icon)::before {\n  content: \"\\eab6\";\n}\n\n.expanded > div > .expand-button kol-icon::part(icon)::before {\n  content: \"\\eab4\";\n}";
+var css_248z$I = ".list {\n  display: flex;\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n}\n\n.list.vertical {\n  flex-direction: column;\n}\n\n.entry {\n  display: flex;\n}\n\n.entry .kol-button-wc:first-child,\n.entry .kol-link-wc,\n.entry .kol-span-wc {\n  flex-grow: 1;\n}\n\n/* custom. */\nnav {\n  background-color: var(--color-blue);\n}\n\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.expand-button button {\n  background-color: var(--color-blue-130);\n  margin: auto;\n  height: 100%;\n}\n\n.kol-span-wc {\n  border-color: transparent;\n  border-style: solid;\n  border-width: 2px;\n  color: var(--color-white);\n  font-size: 18px;\n  justify-items: start;\n  padding: 1rem;\n  height: 100%;\n}\n\nli > ul,\nli + li {\n  border-color: var(--color-blue-75);\n  border-style: solid;\n  border-width: 0;\n  border-top-width: 2px;\n}\n\na {\n  text-decoration: none;\n}\n\n:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n  border-color: var(--color-white);\n}\n\n:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n  text-decoration: underline;\n}\n\ndiv > .expand-button .kol-icon::part(icon)::before {\n  content: \"\\eab6\";\n}\n\n.expanded > div > .expand-button .kol-icon::part(icon)::before {\n  content: \"\\eab4\";\n}";
 
 var css_248z$H = ":host {\n  display: grid;\n  gap: var(--spacing-m);\n}\n\n:host .navigation-list {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.selected button {\n  min-width: 44px;\n  min-height: 44px;\n  display: grid;\n  line-height: 1.5rem;\n  font-family: var(--font-family);\n  cursor: not-allowed;\n  font-weight: 700;\n  padding: 10px 12px;\n  border: none;\n  font-size: 16px;\n  font-style: normal;\n  text-align: center;\n  text-decoration: underline;\n  text-transform: uppercase;\n  width: inherit;\n  color: var(--color-white);\n  background-color: var(--color-blue);\n  border-color: var(--color-blue);\n}";
 
-var css_248z$G = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$G = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
 var css_248z$F = ".spin span:nth-child(1) {\n  background-color: var(--color-blue-80);\n}\n\n.spin span:nth-child(2) {\n  background-color: var(--color-blue);\n}\n\n.spin span:nth-child(3) {\n  background-color: var(--color-blue-130);\n}\n\n.spin span:nth-child(4) {\n  background-color: var(--color-grey-20);\n}";
 
-var css_248z$E = "kol-link-wc > a > kol-span-wc {\n  border-radius: 4px;\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0.75rem;\n  background-color: #0e47cb;\n  color: #fff;\n  cursor: pointer;\n}";
+var css_248z$E = ".kol-link-wc > a > .kol-span-wc {\n  border-radius: 4px;\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0.75rem;\n  background-color: #0e47cb;\n  color: #fff;\n  cursor: pointer;\n}";
 
 var css_248z$D = ".popover {\n  background: #fff;\n}";
 
-var css_248z$C = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5em;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-midnight);\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\nth {\n  background-color: var(--color-white);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5em;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n  background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n  padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  :host > div:last-child,\n  :host > div:last-child > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div:last-child kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
+var css_248z$C = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\ncaption {\n  padding: 0.5em;\n}\n\nth {\n  font-weight: normal;\n  color: var(--color-midnight);\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n  outline-color: var(--color-blue);\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 2px;\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: 2px;\n  border-style: solid;\n  border-color: var(--color-ice);\n}\n\nth {\n  background-color: var(--color-white);\n}\n\nth div {\n  width: 100%;\n  display: flex;\n  gap: 0.5em;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n  background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n  padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n  font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n  :host > div:last-child,\n  :host > div:last-child > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div:last-child .kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
 
-var css_248z$B = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\nkol-button-group-wc {\n  border-bottom: 1px solid var(--color-grey-25);\n  margin-bottom: -1px;\n}\n\nkol-button-group-wc button {\n  border: none;\n  margin-bottom: -1px;\n}\n\nkol-button-group-wc button kol-span-wc {\n  padding: 0.5rem;\n  min-height: 44px;\n  min-width: 44px;\n}\n\nkol-button-group-wc button.selected kol-span-wc {\n  border-color: var(--color-grey-25);\n  border-style: solid;\n  border-width: 1px;\n  border-bottom-color: white;\n  border-top-color: var(--color-blue);\n  box-shadow: 0 -3px var(--color-blue);\n  font-weight: var(--font-weight-bold);\n  color: var(--color-blue);\n}\n\nkol-button-group-wc button:hover:not(:disabled) kol-span-wc {\n  color: var(--color-blue-130);\n}\n\nkol-button-group-wc button:focus kol-span-wc {\n  outline-color: var(--color-blue-130);\n  outline-style: solid;\n  outline-width: 2px;\n}";
+var css_248z$B = ":host {\n  --kolibri-spacing: 0.25rem;\n}\n\n.kol-button-group-wc {\n  border-bottom: 1px solid var(--color-grey-25);\n  margin-bottom: -1px;\n}\n\n.kol-button-group-wc button {\n  border: none;\n  margin-bottom: -1px;\n}\n\n.kol-button-group-wc button .kol-span-wc {\n  padding: 0.5rem;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.kol-button-group-wc button.selected .kol-span-wc {\n  border-color: var(--color-grey-25);\n  border-style: solid;\n  border-width: 1px;\n  border-bottom-color: white;\n  border-top-color: var(--color-blue);\n  box-shadow: 0 -3px var(--color-blue);\n  font-weight: var(--font-weight-bold);\n  color: var(--color-blue);\n}\n\n.kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n  color: var(--color-blue-130);\n}\n\n.kol-button-group-wc button:focus .kol-span-wc {\n  outline-color: var(--color-blue-130);\n  outline-style: solid;\n  outline-width: 2px;\n}";
 
-var css_248z$A = "kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\nkol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\nkol-input .counter {\n  order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
+var css_248z$A = ".kol-input {\n  color: var(--color-grey);\n  gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n  border: none;\n  outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n  height: 40px !important;\n  min-height: 40px !important;\n}\n\nlabel {\n  font-weight: var(--font-weight-bold);\n  order: 1;\n}\n\n.hint {\n  font-size: 0.875rem;\n  order: 2;\n}\n\n.kol-alert {\n  color: var(--color-red);\n  font-size: 0.875em;\n  margin-left: calc(-1 * var(--spacing-2xs));\n  order: 3;\n}\n\n.input {\n  min-height: 44px !important;\n  border: 1px solid var(--color-grey-75);\n  color: var(--color-grey);\n  order: 4;\n  align-items: center;\n  padding: 1px 0.5em;\n}\n\n.kol-input .counter {\n  order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-grey-50);\n}\n\n.input:focus-within {\n  box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n  outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n  border-color: var(--color-blue) !important;\n}\n\n.error .input {\n  border-color: var(--color-red);\n}";
 
 var css_248z$z = ":host {\n  top: 1rem;\n  right: 1rem;\n  width: 440px;\n}";
 
@@ -10497,67 +10561,67 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
   "KOL-TOAST": css_248z$y
 });
 
-var css_248z$x = "@layer kol-theme-global {\n  :host {\n    --border-color: var(--color-anthrazit);\n    --border-radius: 0.125rem;\n    --color-anthrazit: #333;\n    --color-jade: #f3f7fb;\n    --color-weiss: #fff;\n    --color-petrol: #007a89;\n    --color-achat: #0b4d59;\n    --color-teal: #056773;\n    --color-fluorit: #66ddec;\n    --color-rotton: rgba(188, 0, 0, 1);\n    --color-rotton-20: rgba(188, 0, 0, 0.2);\n    --color-gras: #138510;\n    --color-warn: #f0541e;\n    --color-blut: var(--color-rotton);\n    --color-input-bg-default: #e8edf2;\n    --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n    --color-citrin: #d4c912;\n    --color-umber: #494500;\n    --color-gelb: #fff443;\n    --color-lichtgelb: #eeff6c;\n    --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n    --font-family-sans: BundesSans Web;\n    --font-family-serif: BundesSerif Web;\n    --font-size: 16px;\n    --spacing: 0.125em;\n    --kolibri-spacing: calc(2 * var(--spacing));\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    box-sizing: border-box;\n  }\n  *:not(i) {\n    font-family: var(--font-family);\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  a:focus,\n  button:focus,\n  input:focus,\n  select:focus,\n  summary:focus,\n  textarea:focus {\n    cursor: pointer;\n    outline-color: var(--color-petrol);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  kol-span-wc,\n  kol-span-wc > span {\n    gap: 0.25em;\n  }\n  kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  kol-tooltip-wc .tooltip-content {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n}";
+var css_248z$x = "@layer kol-theme-global {\n  :host {\n    --border-color: var(--color-anthrazit);\n    --border-radius: 0.125rem;\n    --color-anthrazit: #333;\n    --color-jade: #f3f7fb;\n    --color-weiss: #fff;\n    --color-petrol: #007a89;\n    --color-achat: #0b4d59;\n    --color-teal: #056773;\n    --color-fluorit: #66ddec;\n    --color-rotton: rgba(188, 0, 0, 1);\n    --color-rotton-20: rgba(188, 0, 0, 0.2);\n    --color-gras: #138510;\n    --color-warn: #f0541e;\n    --color-blut: var(--color-rotton);\n    --color-input-bg-default: #e8edf2;\n    --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n    --color-citrin: #d4c912;\n    --color-umber: #494500;\n    --color-gelb: #fff443;\n    --color-lichtgelb: #eeff6c;\n    --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n    --font-family-sans: BundesSans Web;\n    --font-family-serif: BundesSerif Web;\n    --font-size: 16px;\n    --spacing: 0.125em;\n    --kolibri-spacing: calc(2 * var(--spacing));\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    box-sizing: border-box;\n  }\n  *:not(i) {\n    font-family: var(--font-family);\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  a:focus,\n  button:focus,\n  input:focus,\n  select:focus,\n  summary:focus,\n  textarea:focus {\n    cursor: pointer;\n    outline-color: var(--color-petrol);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.25em;\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n}";
 
-var css_248z$w = ":host > div {\n  font-family: var(--font-family);\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  border-color: var(--kolibri-border-color);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 0.25rem;\n}\n\n:host > div > kol-heading-wc {\n  font-weight: 700;\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n:host > div > kol-heading-wc button {\n  cursor: pointer;\n  width: 100%;\n  margin: 0;\n  display: flex;\n  gap: 0.5em;\n  border: 0;\n  align-items: center;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: 1.75em;\n  background-color: transparent;\n  padding: 0.5rem;\n}\n\n:host > div[part*=open] > kol-heading-wc button {\n  padding-bottom: 0;\n}\n\n:host > div[part*=open] > kol-heading-wc button kol-icon {\n  width: 1em;\n}\n\n:host > div div[part=header],\n:host > div[part*=open] div[part=content] {\n  margin: 0;\n}\n\n:host > div div[part=header] {\n  padding-left: 2rem;\n}\n\n:host > div[part*=open] div[part=content] {\n  margin: 0;\n  padding: 0 1rem 1rem 2.25rem;\n}\n\n:host > div > kol-heading-wc button kol-icon::part(icon) {\n  color: var(--color-midnight);\n}\n\nbutton {\n  cursor: pointer;\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.content {\n  padding: 0.5rem;\n}\n\n:host > div > kol-heading-wc button kol-icon::part(close)::before {\n  font-family: \"Font Awesome 6 Free\";\n  content: \"\\f077\";\n}\n\n:host > div > kol-heading-wc button kol-icon::part(open)::before {\n  font-family: \"Font Awesome 6 Free\";\n  content: \"\\f078\";\n}";
+var css_248z$w = ":host > div {\n  font-family: var(--font-family);\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  border-color: var(--kolibri-border-color);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 0.25rem;\n}\n\n:host > div > .kol-heading-wc {\n  font-weight: 700;\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n:host > div > .kol-heading-wc button {\n  cursor: pointer;\n  width: 100%;\n  margin: 0;\n  display: flex;\n  gap: 0.5em;\n  border: 0;\n  align-items: center;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: 1.75em;\n  background-color: transparent;\n  padding: 0.5rem;\n}\n\n:host > div[part*=open] > .kol-heading-wc button {\n  padding-bottom: 0;\n}\n\n:host > div[part*=open] > .kol-heading-wc button .kol-icon {\n  width: 1em;\n}\n\n:host > div div[part=header],\n:host > div[part*=open] div[part=content] {\n  margin: 0;\n}\n\n:host > div div[part=header] {\n  padding-left: 2rem;\n}\n\n:host > div[part*=open] div[part=content] {\n  margin: 0;\n  padding: 0 1rem 1rem 2.25rem;\n}\n\n:host > div > .kol-heading-wc button .kol-icon::part(icon) {\n  color: var(--color-midnight);\n}\n\nbutton {\n  cursor: pointer;\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.content {\n  padding: 0.5rem;\n}\n\n:host > div > .kol-heading-wc button .kol-icon::part(close)::before {\n  font-family: \"Font Awesome 6 Free\";\n  content: \"\\f077\";\n}\n\n:host > div > .kol-heading-wc button .kol-icon::part(open)::before {\n  font-family: \"Font Awesome 6 Free\";\n  content: \"\\f078\";\n}";
 
 var css_248z$v = ":host {\n  --kolibri-border-width: 1px;\n}\n\n:host .default {\n  border-color: var(--color-anthrazit);\n}\n\n.heading {\n  gap: 0.5rem;\n}\n\n.default .heading-icon {\n  background-color: var(--color-anthrazit);\n}\n\n:host .error {\n  border-color: var(--color-rotton);\n}\n\n.error .heading-icon {\n  background-color: var(--color-rotton);\n}\n\n:host .info {\n  border-color: var(--color-petrol);\n}\n\n.info .heading-icon {\n  background-color: var(--color-petrol);\n}\n\n:host .success {\n  border-color: var(--color-gras);\n}\n\n:host .success .heading-icon {\n  background-color: var(--color-gras);\n}\n\n:host .warning {\n  border-color: var(--color-warn);\n}\n\n.warning .heading-icon {\n  background-color: var(--color-warn);\n}";
 
-var css_248z$u = ":host {\n  display: inline-block;\n}\n\n:host > span {\n  border-radius: 0.3125rem;\n  display: inline-flex;\n}\n\n:host > span kol-button-wc {\n  border-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n\n:host > span kol-span-wc {\n  padding: 0.25rem 0.5rem;\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}\n\n:host button {\n  border-radius: 0 var(--spacing) var(--spacing) 0;\n}";
+var css_248z$u = ":host {\n  display: inline-block;\n}\n\n:host > span {\n  border-radius: 0.3125rem;\n  display: inline-flex;\n}\n\n:host > span .kol-button-wc {\n  border-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n\n:host > span .kol-span-wc {\n  padding: 0.25rem 0.5rem;\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}\n\n:host button {\n  border-radius: 0 var(--spacing) var(--spacing) 0;\n}";
 
 var css_248z$t = "li > span {\n  font-weight: bold;\n  /* text-transform: uppercase; */\n}";
 
-var css_248z$s = "button {\n  background-color: transparent;\n}\n\na,\nbutton {\n  border-radius: 2rem !important;\n  font-family: var(--font-family-sans);\n  /* text-transform: uppercase; */\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  /*line-height: 1.25em;*/\n  /*padding: calc(4 * var(--spacing));*/\n  padding: 0 1rem;\n}\n\n.button a.hide-label > kol-span-wc,\n.button button.hide-label > kol-span-wc {\n  padding: 0 0.5rem;\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  gap: 0.25em;\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\nkol-link-wc.primary > a > kol-span-wc,\nkol-link-wc.primary > a:disabled:hover > kol-span-wc,\nbutton.primary > kol-span-wc,\nbutton.primary:disabled:hover > kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.primary > a:hover > kol-span-wc,\nkol-link-wc.primary > a:focus > kol-span-wc,\nbutton.primary:hover > kol-span-wc,\nbutton.primary:focus > kol-span-wc {\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n}\n\nkol-link-wc.secondary > a > kol-span-wc,\nkol-link-wc.secondary > a:disabled:hover > kol-span-wc,\nbutton.secondary > kol-span-wc,\nbutton.secondary:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-petrol);\n  color: var(--color-petrol);\n}\n\nkol-link-wc.secondary > a:hover > kol-span-wc,\nkol-link-wc.secondary > a:focus > kol-span-wc,\nbutton.secondary:hover > kol-span-wc,\nbutton.secondary:focus > kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.normal > a > kol-span-wc,\nkol-link-wc.normal > a:disabled:hover > kol-span-wc,\nbutton.normal > kol-span-wc,\nbutton.normal:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-anthrazit);\n  color: var(--color-anthrazit);\n}\n\nkol-link-wc.normal > a:hover > kol-span-wc,\nkol-link-wc.normal > a:focus > kol-span-wc,\nbutton.normal:hover > kol-span-wc,\nbutton.normal:focus > kol-span-wc {\n  background-color: var(--color-anthrazit);\n  border-color: var(--color-anthrazit);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.danger > a > kol-span-wc,\nkol-link-wc.danger > a:disabled:hover > kol-span-wc,\nbutton.danger > kol-span-wc,\nbutton.danger:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-blut);\n  color: var(--color-blut);\n}\n\nkol-link-wc.danger > a:hover > kol-span-wc,\nkol-link-wc.danger > a:focus > kol-span-wc,\nbutton.danger:hover > kol-span-wc,\nbutton.danger:focus > kol-span-wc {\n  background-color: var(--color-blut);\n  border-color: var(--color-blut);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.ghost > a > kol-span-wc,\nkol-link-wc.ghost > a:disabled:hover > kol-span-wc,\nbutton.ghost > kol-span-wc,\nbutton.ghost:disabled:hover > kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: transparent;\n  color: var(--color-anthrazit);\n}\n\nkol-link-wc.ghost > a:hover > kol-span-wc,\nkol-link-wc.ghost > a:focus > kol-span-wc,\nbutton.ghost:hover > kol-span-wc,\nbutton.ghost:focus > kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: var(--color-ghost);\n  color: var(--color-anthrazit);\n}";
+var css_248z$s = "button {\n  background-color: transparent;\n}\n\na,\nbutton {\n  border-radius: 2rem !important;\n  font-family: var(--font-family-sans);\n  /* text-transform: uppercase; */\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  /*line-height: 1.25em;*/\n  /*padding: calc(4 * var(--spacing));*/\n  padding: 0 1rem;\n}\n\n.button a.hide-label > .kol-span-wc,\n.button button.hide-label > .kol-span-wc {\n  padding: 0 0.5rem;\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  gap: 0.25em;\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\n.kol-link-wc.primary > a > .kol-span-wc,\n.kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\nbutton.primary > .kol-span-wc,\nbutton.primary:disabled:hover > .kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.primary > a:hover > .kol-span-wc,\n.kol-link-wc.primary > a:focus > .kol-span-wc,\nbutton.primary:hover > .kol-span-wc,\nbutton.primary:focus > .kol-span-wc {\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n}\n\n.kol-link-wc.secondary > a > .kol-span-wc,\n.kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\nbutton.secondary > .kol-span-wc,\nbutton.secondary:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-petrol);\n  color: var(--color-petrol);\n}\n\n.kol-link-wc.secondary > a:hover > .kol-span-wc,\n.kol-link-wc.secondary > a:focus > .kol-span-wc,\nbutton.secondary:hover > .kol-span-wc,\nbutton.secondary:focus > .kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.normal > a > .kol-span-wc,\n.kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\nbutton.normal > .kol-span-wc,\nbutton.normal:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-anthrazit);\n  color: var(--color-anthrazit);\n}\n\n.kol-link-wc.normal > a:hover > .kol-span-wc,\n.kol-link-wc.normal > a:focus > .kol-span-wc,\nbutton.normal:hover > .kol-span-wc,\nbutton.normal:focus > .kol-span-wc {\n  background-color: var(--color-anthrazit);\n  border-color: var(--color-anthrazit);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.danger > a > .kol-span-wc,\n.kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\nbutton.danger > .kol-span-wc,\nbutton.danger:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-blut);\n  color: var(--color-blut);\n}\n\n.kol-link-wc.danger > a:hover > .kol-span-wc,\n.kol-link-wc.danger > a:focus > .kol-span-wc,\nbutton.danger:hover > .kol-span-wc,\nbutton.danger:focus > .kol-span-wc {\n  background-color: var(--color-blut);\n  border-color: var(--color-blut);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.ghost > a > .kol-span-wc,\n.kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\nbutton.ghost > .kol-span-wc,\nbutton.ghost:disabled:hover > .kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: transparent;\n  color: var(--color-anthrazit);\n}\n\n.kol-link-wc.ghost > a:hover > .kol-span-wc,\n.kol-link-wc.ghost > a:focus > .kol-span-wc,\nbutton.ghost:hover > .kol-span-wc,\nbutton.ghost:focus > .kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: var(--color-ghost);\n  color: var(--color-anthrazit);\n}";
 
-var css_248z$r = ":host > kol-button-group-wc {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}";
+var css_248z$r = ":host > .kol-button-group-wc {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}";
 
-var css_248z$q = "kol-link-wc a,\nkol-button-wc button {\n  text-decoration-line: none;\n}\n\na,\nbutton {\n  background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n  background-repeat: no-repeat;\n  background-position: left 0 bottom 0;\n  background-size: 25% 0.25ex;\n  border-radius: var(--spacing);\n  color: var(--color-petrol);\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  /* text-transform: uppercase; */\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\na:focus,\na:hover,\nbutton:focus,\nbutton:hover {\n  background-size: 100% 0.25ex;\n  color: var(--color-achat);\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  gap: 0.25em;\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\na.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\na.skip:focus {\n  background-color: white;\n  box-shadow: 0 0 0.5rem 0.5rem white;\n  left: unset;\n  position: unset;\n}";
+var css_248z$q = ".kol-link-wc a,\n.kol-button-wc button {\n  text-decoration-line: none;\n}\n\na,\nbutton {\n  background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n  background-repeat: no-repeat;\n  background-position: left 0 bottom 0;\n  background-size: 25% 0.25ex;\n  border-radius: var(--spacing);\n  color: var(--color-petrol);\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  /* text-transform: uppercase; */\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\na:focus,\na:hover,\nbutton:focus,\nbutton:hover {\n  background-size: 100% 0.25ex;\n  color: var(--color-achat);\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  gap: 0.25em;\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\na.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\na.skip:focus {\n  background-color: white;\n  box-shadow: 0 0 0.5rem 0.5rem white;\n  left: unset;\n  position: unset;\n}";
 
-var css_248z$p = ":host > div {\n  background-color: white;\n  border-color: var(--border-color);\n  border-style: solid;\n  border-width: 1px;\n  border-radius: calc(2 * var(--border-radius));\n  width: 100%;\n  height: 100%;\n}\n\nkol-heading {\n  padding: 0.5rem;\n  display: block;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-color);\n  border-bottom-width: 1px;\n}\n\n:host > div > div {\n  display: block;\n  padding: 0.5rem;\n}\n\n:host > div > div:last-child {\n  display: block;\n  padding: 0.5rem;\n  border-top-style: solid;\n  border-top-color: var(--color-achat);\n  border-top-width: 1px;\n}";
+var css_248z$p = ":host > div {\n  background-color: white;\n  border-color: var(--border-color);\n  border-style: solid;\n  border-width: 1px;\n  border-radius: calc(2 * var(--border-radius));\n  width: 100%;\n  height: 100%;\n}\n\n.kol-heading {\n  padding: 0.5rem;\n  display: block;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-color);\n  border-bottom-width: 1px;\n}\n\n:host > div > div {\n  display: block;\n  padding: 0.5rem;\n}\n\n:host > div > div:last-child {\n  display: block;\n  padding: 0.5rem;\n  border-top-style: solid;\n  border-top-color: var(--color-achat);\n  border-top-width: 1px;\n}";
 
 var css_248z$o = "h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  line-height: 1em;\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-family: var(--font-family-serif);\n  font-size: 54px;\n  font-weight: bold;\n}\n\nh2 {\n  font-family: var(--font-family-serif);\n  font-size: 32px;\n  font-weight: bold;\n}\n\nh3 {\n  font-family: var(--font-family-serif);\n  font-size: 26px;\n  font-weight: bold;\n}\n\nh4 {\n  font-family: var(--font-family-serif);\n  font-size: 20px;\n  font-weight: normal;\n}\n\nh5 {\n  font-family: var(--font-family-serif);\n  font-size: 17px;\n  font-weight: bold;\n}\n\nh6 {\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  font-weight: normal;\n}";
 
 var css_248z$n = ":host > div {\n  background: var(--color-white);\n  border-left: none;\n  box-shadow: -4px 0px 0px var(--color-petrol);\n  padding: 0.25em 0.5em;\n  width: 100%;\n}";
 
-var css_248z$m = ".checkbox-container {\n  justify-content: flex-start;\n}\n\n/* ALL INPUT, SELECT, TEXTAREA */\nlabel {\n  cursor: pointer;\n}\n\ninput {\n  color: var(--default-letter);\n  border-color: var(--default-border);\n  border-width: 2px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\ninput:hover {\n  border-color: var(--color-petrol);\n}\n\n/* NEU */\nkol-input {\n  display: grid;\n  align-items: center;\n  justify-items: left;\n  width: 100%;\n}\n\nkol-input.default {\n  grid-template-columns: calc(12 * var(--spacing)) auto;\n}\n\n.switch {\n  grid-template-columns: calc(26 * var(--spacing)) auto;\n}\n\n.button {\n  gap: 0.5rem 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\nkol-input > div.input {\n  display: inline-flex;\n  order: 1;\n}\n\nkol-input > div.input input {\n  margin: 0px;\n}\n\nkol-input > label {\n  order: 2;\n  padding-left: calc(4 * var(--spacing));\n}\n\nkol-input > kol-alert.error {\n  order: 3;\n  padding-top: 0.25em;\n  grid-column: span 2/auto;\n}\n\n/* CHECKBOX */\ninput[type=checkbox] {\n  appearance: none;\n  background-color: white;\n  cursor: pointer;\n  transition: 0.5s;\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n}\n\n.default input[type=checkbox] {\n  /* border-radius: 0.25em; */\n  height: calc(12 * var(--spacing));\n  min-width: calc(12 * var(--spacing));\n  width: calc(12 * var(--spacing));\n}\n\n.default .icon {\n  margin-left: 0.25rem;\n}\n\n.default.checked .icon {\n  color: var(--color-weiss);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n  min-width: 3.2em;\n  width: 3.2em;\n  height: 1.7em;\n  position: relative;\n}\n\n.switch input[type=checkbox]:before {\n  /* border-radius: 0.25em; */\n  -webkit-transition: 0.5s;\n  -moz-transition: 0.5s;\n  -ms-transition: 0.5s;\n  transition: 0.5;\n  width: 1.2em;\n  height: 1.2em;\n  left: calc(0.25em - 2px);\n  top: calc(0.25em - 2px);\n  background-color: black;\n  position: absolute;\n}\n\n.switch input[type=checkbox]:checked:before {\n  -webkit-transform: translateX(1.5em);\n  -moz-transform: translateX(1.5em);\n  -ms-transform: translateX(1.5em);\n  transform: translateX(1.5em);\n  background-color: white;\n}\n\n.switch input[type=checkbox]:indeterminate:before {\n  -webkit-transform: translateX(0.75em);\n  -moz-transform: translateX(0.75em);\n  -ms-transform: translateX(0.75em);\n  transform: translateX(0.75em);\n  background-color: var(--color-petrol);\n}\n\n.switch:is(:not(.checked), .indeterminate) .icon {\n  color: #fff;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\nkol-input span.hint {\n  grid-column: span 2;\n  font-style: italic;\n  color: gray;\n  display: block;\n  order: 3;\n  padding: 0 var(--spacing);\n}\n\n.button:focus-within {\n  border-radius: 2rem;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 3px;\n}";
+var css_248z$m = ".checkbox-container {\n  justify-content: flex-start;\n}\n\n/* ALL INPUT, SELECT, TEXTAREA */\nlabel {\n  cursor: pointer;\n}\n\ninput {\n  color: var(--default-letter);\n  border-color: var(--default-border);\n  border-width: 2px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.required label > span::after {\n  content: \"*\";\n  padding-left: 0.125em;\n}\n\ninput:hover {\n  border-color: var(--color-petrol);\n}\n\n/* NEU */\n.kol-input {\n  display: grid;\n  align-items: center;\n  justify-items: left;\n  width: 100%;\n}\n\n.kol-input.default {\n  grid-template-columns: calc(12 * var(--spacing)) auto;\n}\n\n.switch {\n  grid-template-columns: calc(26 * var(--spacing)) auto;\n}\n\n.button {\n  gap: 0.5rem 0;\n  grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n}\n\n.kol-input > div.input {\n  display: inline-flex;\n  order: 1;\n}\n\n.kol-input > div.input input {\n  margin: 0px;\n}\n\n.kol-input > label {\n  order: 2;\n  padding-left: calc(4 * var(--spacing));\n}\n\n.kol-input > .kol-alert.error {\n  order: 3;\n  padding-top: 0.25em;\n  grid-column: span 2/auto;\n}\n\n/* CHECKBOX */\ninput[type=checkbox] {\n  appearance: none;\n  background-color: white;\n  cursor: pointer;\n  transition: 0.5s;\n}\n\ninput[type=checkbox]:checked {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n}\n\n.default input[type=checkbox] {\n  /* border-radius: 0.25em; */\n  height: calc(12 * var(--spacing));\n  min-width: calc(12 * var(--spacing));\n  width: calc(12 * var(--spacing));\n}\n\n.default .icon {\n  margin-left: 0.25rem;\n}\n\n.default.checked .icon {\n  color: var(--color-weiss);\n}\n\n.switch input[type=checkbox] {\n  display: block;\n  min-width: 3.2em;\n  width: 3.2em;\n  height: 1.7em;\n  position: relative;\n}\n\n.switch input[type=checkbox]:before {\n  /* border-radius: 0.25em; */\n  -webkit-transition: 0.5s;\n  -moz-transition: 0.5s;\n  -ms-transition: 0.5s;\n  transition: 0.5;\n  width: 1.2em;\n  height: 1.2em;\n  left: calc(0.25em - 2px);\n  top: calc(0.25em - 2px);\n  background-color: black;\n  position: absolute;\n}\n\n.switch input[type=checkbox]:checked:before {\n  -webkit-transform: translateX(1.5em);\n  -moz-transform: translateX(1.5em);\n  -ms-transform: translateX(1.5em);\n  transform: translateX(1.5em);\n  background-color: white;\n}\n\n.switch input[type=checkbox]:indeterminate:before {\n  -webkit-transform: translateX(0.75em);\n  -moz-transform: translateX(0.75em);\n  -ms-transform: translateX(0.75em);\n  transform: translateX(0.75em);\n  background-color: var(--color-petrol);\n}\n\n.switch:is(:not(.checked), .indeterminate) .icon {\n  color: #fff;\n}\n\n.disabled {\n  opacity: 0.33;\n}\n\n.kol-input span.hint {\n  grid-column: span 2;\n  font-style: italic;\n  color: gray;\n  display: block;\n  order: 3;\n  padding: 0 var(--spacing);\n}\n\n.button:focus-within {\n  border-radius: 2rem;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 3px;\n}";
 
-var css_248z$l = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$l = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$k = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$k = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$j = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$j = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$i = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$i = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$h = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$h = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$g = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$g = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$f = "/* INPUT */\n:host input:focus {\n  outline-color: var(--color-achat) !important;\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 3px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n}\n\ninput {\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-color: var(--default-border);\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 5px;\n  /* padding: 10px 14px; */\n  line-height: 24px;\n  font-size: 16px;\n}\n\ninput:hover {\n  border-color: var(--color-achat);\n}\n\nkol-alert {\n  display: block;\n  width: 100%;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\n/* RADIO */\nfieldset {\n  border: 0px;\n  margin: 0px;\n  padding: 0px;\n  flex-wrap: wrap;\n}\n\nfieldset.horizontal {\n  gap: 1rem;\n}\n\nfieldset legend {\n  display: block;\n  width: 100%;\n  line-height: 1.5em;\n}\n\nfieldset div {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5em;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n  align-items: center;\n  position: relative;\n}\n\nfieldset div label {\n  cursor: pointer;\n  display: flex;\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: calc(12 * var(--spacing));\n  min-width: calc(12 * var(--spacing));\n  width: calc(12 * var(--spacing));\n}\n\nfieldset div input[type=radio]:checked:before {\n  box-shadow: 0 0 0.1rem black;\n  background-color: var(--color-petrol);\n}\n\nfieldset div input[type=radio]:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: #999;\n  cursor: not-allowed;\n}\n\nkol-alert {\n  width: 100%;\n}";
+var css_248z$f = "/* INPUT */\n:host input:focus {\n  outline-color: var(--color-achat) !important;\n  outline-offset: 2px;\n  outline-style: solid;\n  outline-width: 3px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n}\n\ninput {\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-color: var(--default-border);\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 5px;\n  /* padding: 10px 14px; */\n  line-height: 24px;\n  font-size: 16px;\n}\n\ninput:hover {\n  border-color: var(--color-achat);\n}\n\n.kol-alert {\n  display: block;\n  width: 100%;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\n/* RADIO */\nfieldset {\n  border: 0px;\n  margin: 0px;\n  padding: 0px;\n  flex-wrap: wrap;\n}\n\nfieldset.horizontal {\n  gap: 1rem;\n}\n\nfieldset legend {\n  display: block;\n  width: 100%;\n  line-height: 1.5em;\n}\n\nfieldset div {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5em;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n  align-items: center;\n  position: relative;\n}\n\nfieldset div label {\n  cursor: pointer;\n  display: flex;\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: calc(12 * var(--spacing));\n  min-width: calc(12 * var(--spacing));\n  width: calc(12 * var(--spacing));\n}\n\nfieldset div input[type=radio]:checked:before {\n  box-shadow: 0 0 0.1rem black;\n  background-color: var(--color-petrol);\n}\n\nfieldset div input[type=radio]:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: #999;\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  width: 100%;\n}";
 
-var css_248z$e = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\nkol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
+var css_248z$e = "input:hover,\ninput:focus {\n  border-color: var(--border-color) !important;\n  border-radius: none !important;\n  outline-color: var(--color-achat) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--color-anthrazit);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ninput {\n  cursor: pointer;\n  width: 100%;\n  color: var(--color-anthrazit);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--color-petrol);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n  overflow: hidden;\n  line-height: 24px;\n  font-size: 16px;\n}\n\n.error input {\n  background-color: var(--color-rotton-20) !important;\n  border-color: var(--color-rotton) !important;\n}\n\ninput:disabled {\n  background-color: var(--color-input-bg-default);\n  border-color: var(--border-color);\n  cursor: not-allowed;\n}\n\n.kol-alert {\n  margin-top: calc(2 * var(--spacing));\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\ninput::placeholder {\n  font-style: italic;\n}";
 
-var css_248z$d = "a,\nbutton {\n  border-radius: 2rem !important;\n  font-family: var(--font-family-sans);\n  /* text-transform: uppercase; */\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  /*line-height: 1.25em;*/\n  /*padding: calc(4 * var(--spacing));*/\n  padding: 0 1rem;\n}\n\n.button a.hide-label > kol-span-wc,\n.button button.hide-label > kol-span-wc {\n  padding: 0 0.5rem;\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  gap: 0.25em;\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\nkol-link-wc.primary > a > kol-span-wc,\nkol-link-wc.primary > a:disabled:hover > kol-span-wc,\nbutton.primary > kol-span-wc,\nbutton.primary:disabled:hover > kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.primary > a:hover > kol-span-wc,\nkol-link-wc.primary > a:focus > kol-span-wc,\nbutton.primary:hover > kol-span-wc,\nbutton.primary:focus > kol-span-wc {\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n}\n\nkol-link-wc.secondary > a > kol-span-wc,\nkol-link-wc.secondary > a:disabled:hover > kol-span-wc,\nbutton.secondary > kol-span-wc,\nbutton.secondary:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-petrol);\n  color: var(--color-petrol);\n}\n\nkol-link-wc.secondary > a:hover > kol-span-wc,\nkol-link-wc.secondary > a:focus > kol-span-wc,\nbutton.secondary:hover > kol-span-wc,\nbutton.secondary:focus > kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.normal > a > kol-span-wc,\nkol-link-wc.normal > a:disabled:hover > kol-span-wc,\nbutton.normal > kol-span-wc,\nbutton.normal:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-anthrazit);\n  color: var(--color-anthrazit);\n}\n\nkol-link-wc.normal > a:hover > kol-span-wc,\nkol-link-wc.normal > a:focus > kol-span-wc,\nbutton.normal:hover > kol-span-wc,\nbutton.normal:focus > kol-span-wc {\n  background-color: var(--color-anthrazit);\n  border-color: var(--color-anthrazit);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.danger > a > kol-span-wc,\nkol-link-wc.danger > a:disabled:hover > kol-span-wc,\nbutton.danger > kol-span-wc,\nbutton.danger:disabled:hover > kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-blut);\n  color: var(--color-blut);\n}\n\nkol-link-wc.danger > a:hover > kol-span-wc,\nkol-link-wc.danger > a:focus > kol-span-wc,\nbutton.danger:hover > kol-span-wc,\nbutton.danger:focus > kol-span-wc {\n  background-color: var(--color-blut);\n  border-color: var(--color-blut);\n  color: var(--color-weiss);\n}\n\nkol-link-wc.ghost > a > kol-span-wc,\nkol-link-wc.ghost > a:disabled:hover > kol-span-wc,\nbutton.ghost > kol-span-wc,\nbutton.ghost:disabled:hover > kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: transparent;\n  color: var(--color-anthrazit);\n}\n\nkol-link-wc.ghost > a:hover > kol-span-wc,\nkol-link-wc.ghost > a:focus > kol-span-wc,\nbutton.ghost:hover > kol-span-wc,\nbutton.ghost:focus > kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: var(--color-ghost);\n  color: var(--color-anthrazit);\n}";
+var css_248z$d = "a,\nbutton {\n  border-radius: 2rem !important;\n  font-family: var(--font-family-sans);\n  /* text-transform: uppercase; */\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  /*line-height: 1.25em;*/\n  /*padding: calc(4 * var(--spacing));*/\n  padding: 0 1rem;\n}\n\n.button a.hide-label > .kol-span-wc,\n.button button.hide-label > .kol-span-wc {\n  padding: 0 0.5rem;\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  gap: 0.25em;\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\n.kol-link-wc.primary > a > .kol-span-wc,\n.kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\nbutton.primary > .kol-span-wc,\nbutton.primary:disabled:hover > .kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.primary > a:hover > .kol-span-wc,\n.kol-link-wc.primary > a:focus > .kol-span-wc,\nbutton.primary:hover > .kol-span-wc,\nbutton.primary:focus > .kol-span-wc {\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n}\n\n.kol-link-wc.secondary > a > .kol-span-wc,\n.kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\nbutton.secondary > .kol-span-wc,\nbutton.secondary:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-petrol);\n  color: var(--color-petrol);\n}\n\n.kol-link-wc.secondary > a:hover > .kol-span-wc,\n.kol-link-wc.secondary > a:focus > .kol-span-wc,\nbutton.secondary:hover > .kol-span-wc,\nbutton.secondary:focus > .kol-span-wc {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.normal > a > .kol-span-wc,\n.kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\nbutton.normal > .kol-span-wc,\nbutton.normal:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-anthrazit);\n  color: var(--color-anthrazit);\n}\n\n.kol-link-wc.normal > a:hover > .kol-span-wc,\n.kol-link-wc.normal > a:focus > .kol-span-wc,\nbutton.normal:hover > .kol-span-wc,\nbutton.normal:focus > .kol-span-wc {\n  background-color: var(--color-anthrazit);\n  border-color: var(--color-anthrazit);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.danger > a > .kol-span-wc,\n.kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\nbutton.danger > .kol-span-wc,\nbutton.danger:disabled:hover > .kol-span-wc {\n  background-color: var(--color-weiss);\n  border-color: var(--color-blut);\n  color: var(--color-blut);\n}\n\n.kol-link-wc.danger > a:hover > .kol-span-wc,\n.kol-link-wc.danger > a:focus > .kol-span-wc,\nbutton.danger:hover > .kol-span-wc,\nbutton.danger:focus > .kol-span-wc {\n  background-color: var(--color-blut);\n  border-color: var(--color-blut);\n  color: var(--color-weiss);\n}\n\n.kol-link-wc.ghost > a > .kol-span-wc,\n.kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\nbutton.ghost > .kol-span-wc,\nbutton.ghost:disabled:hover > .kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: transparent;\n  color: var(--color-anthrazit);\n}\n\n.kol-link-wc.ghost > a:hover > .kol-span-wc,\n.kol-link-wc.ghost > a:focus > .kol-span-wc,\nbutton.ghost:hover > .kol-span-wc,\nbutton.ghost:focus > .kol-span-wc {\n  background-color: var(--color-ghost);\n  border-color: var(--color-ghost);\n  color: var(--color-anthrazit);\n}";
 
-var css_248z$c = "kol-link-wc a,\nkol-button-wc button {\n  text-decoration-line: none;\n}\n\na,\nbutton {\n  background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n  background-repeat: no-repeat;\n  background-position: left 0 bottom 0;\n  background-size: 25% 0.25ex;\n  border-radius: var(--spacing);\n  color: var(--color-petrol);\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  /* text-transform: uppercase; */\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\na:focus,\na:hover,\nbutton:focus,\nbutton:hover {\n  background-size: 100% 0.25ex;\n  color: var(--color-achat);\n}\n\na > kol-span-wc,\nbutton > kol-span-wc {\n  gap: 0.25em;\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\na.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\na.skip:focus {\n  background-color: white;\n  box-shadow: 0 0 0.5rem 0.5rem white;\n  left: unset;\n  position: unset;\n}";
+var css_248z$c = ".kol-link-wc a,\n.kol-button-wc button {\n  text-decoration-line: none;\n}\n\na,\nbutton {\n  background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n  background-repeat: no-repeat;\n  background-position: left 0 bottom 0;\n  background-size: 25% 0.25ex;\n  border-radius: var(--spacing);\n  color: var(--color-petrol);\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  /* text-transform: uppercase; */\n  transition-delay: 0;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.5s;\n  transition-property: background, color, border-color;\n}\n\na:focus,\na:hover,\nbutton:focus,\nbutton:hover {\n  background-size: 100% 0.25ex;\n  color: var(--color-achat);\n}\n\na > .kol-span-wc,\nbutton > .kol-span-wc {\n  gap: 0.25em;\n}\n\n.hidden {\n  display: none;\n  visibility: hidden;\n}\n\na.skip {\n  left: -99999px;\n  overflow: hidden;\n  position: absolute;\n  z-index: 9999999;\n}\n\na.skip:focus {\n  background-color: white;\n  box-shadow: 0 0 0.5rem 0.5rem white;\n  left: unset;\n  position: unset;\n}";
 
-var css_248z$b = ":host .hidden {\n  display: none;\n}\n\n:host > div > nav ul {\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n  border-radius: var(--border-radius);\n  background-color: var(--color-petrol);\n}\n\n:host > div > nav ul > li {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  padding: 0.125em;\n}\n\n:host > div > nav ul > li[part*=vertical] + li {\n  border-radius: 0;\n  border-top: 0.1em dotted white;\n}\n\n:host > div > nav ul > li[part*=\"vertical selected\"] {\n  border-right: 0.375em solid var(--color-citrin);\n}\n\n:host > div > nav ul > li[part*=horizontal] + li {\n  border-radius: 0;\n  border-left: 0.1em dotted white;\n}\n\n:host > div > nav ul > li[part*=\"horizontal selected\"] {\n  border-bottom: 0.375em solid var(--color-citrin);\n}\n\n:host > div > nav ul > li > div {\n  height: 100%;\n}\n\n:host > div > nav kol-link-wc {\n  width: 100%;\n  /*height: 100%;font-weight: 600;*/\n  display: block;\n}\n\n:host > div > nav kol-link-wc a {\n  border-radius: var(--border-radius);\n  background-color: var(--color-petrol);\n  border: 1px solid transparent;\n  grid: flex;\n  line-height: 2em;\n  padding: 0.5em;\n  color: white;\n  height: 100%;\n  -webkit-box-align: center;\n  align-items: center;\n  display: flex;\n  cursor: pointer;\n  text-decoration: inherit;\n}\n\n:host > div > nav kol-link-wc[exportparts*=selected] a {\n  background-color: var(--color-achat);\n  font-weight: 700;\n}\n\n:host > div > nav kol-link-wc a kol-icon.mr-2 {\n  margin-right: calc(4 * var(--spacing));\n}\n\n:host > div > nav kol-link-wc a kol-icon.ml-2 {\n  margin-left: calc(4 * var(--spacing));\n}\n\n:host > div > nav kol-link-wc a:focus,\n:host > div > nav kol-link-wc a:hover {\n  border: 1px solid white;\n  background-color: var(--color-fluorit);\n  color: var(--color-anthrazit);\n}\n\n/* compact button */\n:host > div > div:last-child {\n  margin-top: 0.5em;\n  width: 100%;\n  text-align: center;\n}\n\n:host > div > nav kol-link-wc a.text-center {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n}\n\n/* horizontal */\nul.flex {\n  display: flex;\n}\n\nli > div > div.absolute {\n  position: absolute;\n}\n\nkol-span-wc {\n  justify-items: baseline;\n}";
+var css_248z$b = ":host .hidden {\n  display: none;\n}\n\n:host > div > nav ul {\n  list-style: none;\n  margin: 0px;\n  padding: 0px;\n  border-radius: var(--border-radius);\n  background-color: var(--color-petrol);\n}\n\n:host > div > nav ul > li {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  padding: 0.125em;\n}\n\n:host > div > nav ul > li[part*=vertical] + li {\n  border-radius: 0;\n  border-top: 0.1em dotted white;\n}\n\n:host > div > nav ul > li[part*=\"vertical selected\"] {\n  border-right: 0.375em solid var(--color-citrin);\n}\n\n:host > div > nav ul > li[part*=horizontal] + li {\n  border-radius: 0;\n  border-left: 0.1em dotted white;\n}\n\n:host > div > nav ul > li[part*=\"horizontal selected\"] {\n  border-bottom: 0.375em solid var(--color-citrin);\n}\n\n:host > div > nav ul > li > div {\n  height: 100%;\n}\n\n:host > div > nav .kol-link-wc {\n  width: 100%;\n  /*height: 100%;font-weight: 600;*/\n  display: block;\n}\n\n:host > div > nav .kol-link-wc a {\n  border-radius: var(--border-radius);\n  background-color: var(--color-petrol);\n  border: 1px solid transparent;\n  grid: flex;\n  line-height: 2em;\n  padding: 0.5em;\n  color: white;\n  height: 100%;\n  -webkit-box-align: center;\n  align-items: center;\n  display: flex;\n  cursor: pointer;\n  text-decoration: inherit;\n}\n\n:host > div > nav .kol-link-wc[exportparts*=selected] a {\n  background-color: var(--color-achat);\n  font-weight: 700;\n}\n\n:host > div > nav .kol-link-wc a .kol-icon.mr-2 {\n  margin-right: calc(4 * var(--spacing));\n}\n\n:host > div > nav .kol-link-wc a .kol-icon.ml-2 {\n  margin-left: calc(4 * var(--spacing));\n}\n\n:host > div > nav .kol-link-wc a:focus,\n:host > div > nav .kol-link-wc a:hover {\n  border: 1px solid white;\n  background-color: var(--color-fluorit);\n  color: var(--color-anthrazit);\n}\n\n/* compact button */\n:host > div > div:last-child {\n  margin-top: 0.5em;\n  width: 100%;\n  text-align: center;\n}\n\n:host > div > nav .kol-link-wc a.text-center {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n}\n\n/* horizontal */\nul.flex {\n  display: flex;\n}\n\nli > div > div.absolute {\n  position: absolute;\n}\n\n.kol-span-wc {\n  justify-items: baseline;\n}";
 
-var css_248z$a = ":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.5em;\n}\n\nbutton > kol-span-wc {\n  cursor: not-allowed;\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n  border-radius: 2rem;\n  border-style: solid;\n  color: var(--color-weiss);\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  font-weight: bold;\n  line-height: 1.25em;\n  padding: calc(4 * var(--spacing));\n  text-decoration: underline;\n}";
+var css_248z$a = ":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.5em;\n}\n\nbutton > .kol-span-wc {\n  cursor: not-allowed;\n  background-color: var(--color-achat);\n  border-color: var(--color-achat);\n  border-radius: 2rem;\n  border-style: solid;\n  color: var(--color-weiss);\n  min-width: 44px;\n  min-height: 44px;\n  border-width: var(--spacing);\n  font-size: inherit;\n  font-weight: bold;\n  line-height: 1.25em;\n  padding: calc(4 * var(--spacing));\n  text-decoration: underline;\n}";
 
 var css_248z$9 = ":host progress,\n:host span {\n  display: block;\n  height: 0px;\n  overflow: hidden;\n  width: 0px;\n}\n\nsvg line:first-child,\nsvg circle:first-child {\n  fill: transparent;\n  stroke: var(--color-fluorit);\n}\n\nsvg line:last-child,\nsvg circle:last-child {\n  stroke: var(--color-achat);\n  fill: transparent;\n}\n\nprogress {\n  display: none;\n}";
 
-var css_248z$8 = "select:hover,\nselect:focus {\n  border-color: var(--default-border-hover);\n  outline-color: var(--primary) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--default-letter);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\nselect.error {\n  background-color: var(--danger-light) !important;\n  border-color: var(--danger);\n}\n\nselect {\n  width: 100%;\n  color: var(--default-letter);\n  border-width: 1px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n  border-color: var(--kolibri-color-normal);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n}\n\nselect:disabled {\n  cursor: not-allowed;\n  border-color: var(--border-default);\n  background-color: var(--background-light-grey);\n}\n\noption {\n  height: 2em;\n  padding: 0.5em;\n}\n\nkol-alert {\n  margin-top: var(--spacing);\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}";
+var css_248z$8 = "select:hover,\nselect:focus {\n  border-color: var(--default-border-hover);\n  outline-color: var(--primary) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--default-letter);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\nselect.error {\n  background-color: var(--danger-light) !important;\n  border-color: var(--danger);\n}\n\nselect {\n  width: 100%;\n  color: var(--default-letter);\n  border-width: 1px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n  border-color: var(--kolibri-color-normal);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n}\n\nselect:disabled {\n  cursor: not-allowed;\n  border-color: var(--border-default);\n  background-color: var(--background-light-grey);\n}\n\noption {\n  height: 2em;\n  padding: 0.5em;\n}\n\n.kol-alert {\n  margin-top: var(--spacing);\n  display: block;\n}\n\n.kol-required span::after {\n  content: \"*\";\n}";
 
-var css_248z$7 = "kol-link-wc > a > kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0 1rem;\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n  cursor: pointer;\n}";
+var css_248z$7 = ".kol-link-wc > a > .kol-span-wc {\n  border-radius: 2rem;\n  border-style: solid;\n  gap: 0.5rem;\n  line-height: 1rem;\n  padding: 0 1rem;\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: var(--color-weiss);\n  cursor: pointer;\n}";
 
 var css_248z$6 = ".popover {\n  background: #fff;\n}";
 
-var css_248z$5 = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:host > div:last-child {\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--border-color);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n  outline-color: var(--color-petrol);\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-collapse: collapse;\n  border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n  border: 0 solid var(--border-color);\n}\n\ntr {\n  border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n  background-color: #f2f2f2;\n}\n\nth,\ntd {\n  border-right-width: 1px;\n  padding: 0.25em 0.5em;\n}\n\nth {\n  background-color: #eee;\n}\n\n.table-sort-button .button {\n  font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n  :host > div.pagination,\n  :host > div.pagination > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div.pagination kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
+var css_248z$5 = ":host > div {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:host > div:last-child {\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--border-color);\n}\n\n.table {\n  padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n  outline-color: var(--color-petrol);\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-collapse: collapse;\n  border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n  border: 0 solid var(--border-color);\n}\n\ntr {\n  border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n  background-color: #f2f2f2;\n}\n\nth,\ntd {\n  border-right-width: 1px;\n  padding: 0.25em 0.5em;\n}\n\nth {\n  background-color: #eee;\n}\n\n.table-sort-button .button {\n  font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n  :host > div.pagination,\n  :host > div.pagination > div:last-child {\n    grid-auto-flow: column;\n  }\n  :host > div.pagination .kol-pagination {\n    display: flex;\n    gap: 1rem;\n  }\n}";
 
-var css_248z$4 = ":host > div {\n  display: block;\n  width: 100%;\n}\n\n:host kol-button-group-wc {\n  display: flex;\n  background-color: var(--color-petrol);\n}\n\n:host kol-button-group-wc > div {\n  display: inline-flex;\n}\n\n:host kol-button-group-wc > div + div {\n  margin-left: 0.25em;\n}\n\n:host > div > div {\n  padding: 0.25em;\n  border: 1px solid var(--border-color);\n}\n\nbutton {\n  box-sizing: border-box;\n  font-size: inherit;\n  line-height: 1.25em;\n  cursor: pointer;\n  border-width: 2px;\n  box-shadow: 0 0 0.25em gray;\n  width: inherit;\n  overflow: hidden;\n  border-style: solid;\n  padding: calc(4 * var(--spacing));\n  display: grid;\n  gap: 0.25em;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  transition-duration: 0.5s;\n  transition-property: background-color, color, border-color;\n}\n\nkol-button-wc button.selected,\nkol-button-wc[aria-selected=true] button {\n  background-color: white;\n  border-bottom-width: 0.25em !important;\n  border-bottom-style: solid;\n  border-bottom-color: var(--color-citrin) !important;\n}\n\nbutton > kol-span-wc span {\n  display: flex;\n  gap: 0.25em;\n  align-items: center;\n  justify-content: center;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\nbutton.primary,\nbutton.primary:disabled:hover {\n  background-color: var(--kolibri-color-primary);\n  border-color: var(--kolibri-color-primary);\n  color: white;\n}\n\nbutton.primary:hover,\nbutton.primary:focus {\n  color: var(--kolibri-color-primary);\n}\n\nbutton.secondary,\nbutton.secondary:disabled:hover {\n  background-color: var(--kolibri-color-secondary);\n  border-color: var(--kolibri-color-secondary);\n  color: white;\n}\n\nbutton.secondary:hover,\nbutton.secondary:focus {\n  color: var(--kolibri-color-secondary);\n}\n\nbutton.normal,\nbutton.normal:disabled:hover {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: white;\n}\n\nbutton.normal:hover,\nbutton.normal:focus {\n  color: var(--color-petrol);\n}\n\nbutton.danger,\nbutton.danger:disabled:hover {\n  background-color: var(--kolibri-color-danger);\n  border-color: var(--kolibri-color-danger);\n  color: white;\n}\n\nbutton.danger:hover,\nbutton.danger:focus {\n  color: var(--kolibri-color-danger);\n}\n\nbutton.ghost,\nbutton.ghost:disabled:hover {\n  background-color: white;\n  border-color: var(--kolibri-color-ghost);\n  color: var(--kolibri-color-ghost);\n}\n\nbutton.ghost:hover,\nbutton.ghost:focus {\n  background-color: var(--kolibri-color-ghost);\n  color: white;\n}\n\nbutton:hover,\nbutton:focus {\n  background-color: white;\n  box-shadow: 0 0 0.25em black;\n}\n\nbutton:active {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.close-button {\n  font-size: 25%;\n  height: fit-content;\n  width: 0;\n}\n\n.close-button button {\n  width: 1rem;\n  position: relative;\n  height: 1rem;\n  left: -4.25em;\n  top: 0.25em;\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 > 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}";
+var css_248z$4 = ":host > div {\n  display: block;\n  width: 100%;\n}\n\n:host .kol-button-group-wc {\n  display: flex;\n  background-color: var(--color-petrol);\n}\n\n:host .kol-button-group-wc > div {\n  display: inline-flex;\n}\n\n:host .kol-button-group-wc > div + div {\n  margin-left: 0.25em;\n}\n\n:host > div > div {\n  padding: 0.25em;\n  border: 1px solid var(--border-color);\n}\n\nbutton {\n  box-sizing: border-box;\n  font-size: inherit;\n  line-height: 1.25em;\n  cursor: pointer;\n  border-width: 2px;\n  box-shadow: 0 0 0.25em gray;\n  width: inherit;\n  overflow: hidden;\n  border-style: solid;\n  padding: calc(4 * var(--spacing));\n  display: grid;\n  gap: 0.25em;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  transition-duration: 0.5s;\n  transition-property: background-color, color, border-color;\n}\n\n.kol-button-wc button.selected,\n.kol-button-wc[aria-selected=true] button {\n  background-color: white;\n  border-bottom-width: 0.25em !important;\n  border-bottom-style: solid;\n  border-bottom-color: var(--color-citrin) !important;\n}\n\nbutton > .kol-span-wc span {\n  display: flex;\n  gap: 0.25em;\n  align-items: center;\n  justify-content: center;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\nbutton.primary,\nbutton.primary:disabled:hover {\n  background-color: var(--kolibri-color-primary);\n  border-color: var(--kolibri-color-primary);\n  color: white;\n}\n\nbutton.primary:hover,\nbutton.primary:focus {\n  color: var(--kolibri-color-primary);\n}\n\nbutton.secondary,\nbutton.secondary:disabled:hover {\n  background-color: var(--kolibri-color-secondary);\n  border-color: var(--kolibri-color-secondary);\n  color: white;\n}\n\nbutton.secondary:hover,\nbutton.secondary:focus {\n  color: var(--kolibri-color-secondary);\n}\n\nbutton.normal,\nbutton.normal:disabled:hover {\n  background-color: var(--color-petrol);\n  border-color: var(--color-petrol);\n  color: white;\n}\n\nbutton.normal:hover,\nbutton.normal:focus {\n  color: var(--color-petrol);\n}\n\nbutton.danger,\nbutton.danger:disabled:hover {\n  background-color: var(--kolibri-color-danger);\n  border-color: var(--kolibri-color-danger);\n  color: white;\n}\n\nbutton.danger:hover,\nbutton.danger:focus {\n  color: var(--kolibri-color-danger);\n}\n\nbutton.ghost,\nbutton.ghost:disabled:hover {\n  background-color: white;\n  border-color: var(--kolibri-color-ghost);\n  color: var(--kolibri-color-ghost);\n}\n\nbutton.ghost:hover,\nbutton.ghost:focus {\n  background-color: var(--kolibri-color-ghost);\n  color: white;\n}\n\nbutton:hover,\nbutton:focus {\n  background-color: white;\n  box-shadow: 0 0 0.25em black;\n}\n\nbutton:active {\n  outline: 0 !important;\n  box-shadow: none !important;\n}\n\n.close-button {\n  font-size: 25%;\n  height: fit-content;\n  width: 0;\n}\n\n.close-button button {\n  width: 1rem;\n  position: relative;\n  height: 1rem;\n  left: -4.25em;\n  top: 0.25em;\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 > 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}";
 
-var css_248z$3 = "textarea:hover,\ntextarea:focus {\n  border-color: var(--default-border-hover);\n  outline-color: var(--primary) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--default-letter);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ntextarea.error {\n  background-color: var(--danger-light) !important;\n  border-color: var(--danger);\n}\n\ntextarea {\n  width: 100%;\n  color: var(--default-letter);\n  border-width: 1px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n  border-color: var(--kolibri-color-normal);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n}\n\ntextarea::placeholder {\n  color: var(--default-border);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n  cursor: not-allowed;\n  border-color: var(--border-default);\n  background-color: var(--background-light-grey);\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\nkol-alert {\n  margin-top: var(--spacing);\n  display: block;\n}";
+var css_248z$3 = "textarea:hover,\ntextarea:focus {\n  border-color: var(--default-border-hover);\n  outline-color: var(--primary) !important;\n  outline-offset: 0;\n  outline-style: solid;\n  outline-width: 1px;\n}\n\nlabel {\n  color: var(--default-letter);\n  font-size: 14px;\n  line-height: 20px;\n  gap: 8px;\n  width: 100%;\n  font-weight: bold;\n}\n\ntextarea.error {\n  background-color: var(--danger-light) !important;\n  border-color: var(--danger);\n}\n\ntextarea {\n  width: 100%;\n  color: var(--default-letter);\n  border-width: 1px;\n  border-style: solid;\n  line-height: 24px;\n  font-size: 16px;\n  border-color: var(--kolibri-color-normal);\n  border-radius: 0;\n  background-color: #e8edf2 !important;\n}\n\ntextarea::placeholder {\n  color: var(--default-border);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n  cursor: not-allowed;\n  border-color: var(--border-default);\n  background-color: var(--background-light-grey);\n}\n\n.kol-required span::after {\n  content: \"*\";\n}\n\n.kol-alert {\n  margin-top: var(--spacing);\n  display: block;\n}";
 
 var css_248z$2 = ":host {\n  top: 1rem;\n  width: 750px;\n  left: 50%;\n  transform: translateX(-50%);\n}";