@public-ui/theme-default 1.7.2-rc.0

package/dist/index.mjs

@@ -0,0 +1,2806 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var loglevel = {exports: {}};
+
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+
+(function (module) {
+	(function (root, definition) {
+	    if (module.exports) {
+	        module.exports = definition();
+	    } else {
+	        root.log = definition();
+	    }
+	}(commonjsGlobal, function () {
+
+	    // Slightly dubious tricks to cut down minimized file size
+	    var noop = function() {};
+	    var undefinedType = "undefined";
+	    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
+	        /Trident\/|MSIE /.test(window.navigator.userAgent)
+	    );
+
+	    var logMethods = [
+	        "trace",
+	        "debug",
+	        "info",
+	        "warn",
+	        "error"
+	    ];
+
+	    // Cross-browser bind equivalent that works at least back to IE6
+	    function bindMethod(obj, methodName) {
+	        var method = obj[methodName];
+	        if (typeof method.bind === 'function') {
+	            return method.bind(obj);
+	        } else {
+	            try {
+	                return Function.prototype.bind.call(method, obj);
+	            } catch (e) {
+	                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+	                return function() {
+	                    return Function.prototype.apply.apply(method, [obj, arguments]);
+	                };
+	            }
+	        }
+	    }
+
+	    // Trace() doesn't print the message in IE, so for that case we need to wrap it
+	    function traceForIE() {
+	        if (console.log) {
+	            if (console.log.apply) {
+	                console.log.apply(console, arguments);
+	            } else {
+	                // In old IE, native console methods themselves don't have apply().
+	                Function.prototype.apply.apply(console.log, [console, arguments]);
+	            }
+	        }
+	        if (console.trace) console.trace();
+	    }
+
+	    // Build the best logging method possible for this env
+	    // Wherever possible we want to bind, not wrap, to preserve stack traces
+	    function realMethod(methodName) {
+	        if (methodName === 'debug') {
+	            methodName = 'log';
+	        }
+
+	        if (typeof console === undefinedType) {
+	            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
+	        } else if (methodName === 'trace' && isIE) {
+	            return traceForIE;
+	        } else if (console[methodName] !== undefined) {
+	            return bindMethod(console, methodName);
+	        } else if (console.log !== undefined) {
+	            return bindMethod(console, 'log');
+	        } else {
+	            return noop;
+	        }
+	    }
+
+	    // These private functions always need `this` to be set properly
+
+	    function replaceLoggingMethods(level, loggerName) {
+	        /*jshint validthis:true */
+	        for (var i = 0; i < logMethods.length; i++) {
+	            var methodName = logMethods[i];
+	            this[methodName] = (i < level) ?
+	                noop :
+	                this.methodFactory(methodName, level, loggerName);
+	        }
+
+	        // Define log.log as an alias for log.debug
+	        this.log = this.debug;
+	    }
+
+	    // 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) {
+	        return function () {
+	            if (typeof console !== undefinedType) {
+	                replaceLoggingMethods.call(this, level, loggerName);
+	                this[methodName].apply(this, arguments);
+	            }
+	        };
+	    }
+
+	    // By default, we use closely bound real methods wherever possible, and
+	    // otherwise we wait for a console to appear, and then try again.
+	    function defaultMethodFactory(methodName, level, loggerName) {
+	        /*jshint validthis:true */
+	        return realMethod(methodName) ||
+	               enableLoggingWhenConsoleArrives.apply(this, arguments);
+	    }
+
+	    function Logger(name, defaultLevel, factory) {
+	      var self = this;
+	      var currentLevel;
+	      defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+
+	      var storageKey = "loglevel";
+	      if (typeof name === "string") {
+	        storageKey += ":" + name;
+	      } else if (typeof name === "symbol") {
+	        storageKey = undefined;
+	      }
+
+	      function persistLevelIfPossible(levelNum) {
+	          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+
+	          if (typeof window === undefinedType || !storageKey) return;
+
+	          // Use localStorage if available
+	          try {
+	              window.localStorage[storageKey] = levelName;
+	              return;
+	          } catch (ignore) {}
+
+	          // Use session cookie as fallback
+	          try {
+	              window.document.cookie =
+	                encodeURIComponent(storageKey) + "=" + levelName + ";";
+	          } catch (ignore) {}
+	      }
+
+	      function getPersistedLevel() {
+	          var storedLevel;
+
+	          if (typeof window === undefinedType || !storageKey) return;
+
+	          try {
+	              storedLevel = window.localStorage[storageKey];
+	          } catch (ignore) {}
+
+	          // Fallback to cookies if local storage gives us nothing
+	          if (typeof storedLevel === undefinedType) {
+	              try {
+	                  var cookie = window.document.cookie;
+	                  var location = cookie.indexOf(
+	                      encodeURIComponent(storageKey) + "=");
+	                  if (location !== -1) {
+	                      storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+	                  }
+	              } catch (ignore) {}
+	          }
+
+	          // If the stored level is not valid, treat it as if nothing was stored.
+	          if (self.levels[storedLevel] === undefined) {
+	              storedLevel = undefined;
+	          }
+
+	          return storedLevel;
+	      }
+
+	      function clearPersistedLevel() {
+	          if (typeof window === undefinedType || !storageKey) return;
+
+	          // Use localStorage if available
+	          try {
+	              window.localStorage.removeItem(storageKey);
+	              return;
+	          } catch (ignore) {}
+
+	          // Use session cookie as fallback
+	          try {
+	              window.document.cookie =
+	                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+	          } catch (ignore) {}
+	      }
+
+	      /*
+	       *
+	       * Public logger API - see https://github.com/pimterry/loglevel for details
+	       *
+	       */
+
+	      self.name = name;
+
+	      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
+	          "ERROR": 4, "SILENT": 5};
+
+	      self.methodFactory = factory || defaultMethodFactory;
+
+	      self.getLevel = function () {
+	          return currentLevel;
+	      };
+
+	      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;
+	          }
+	      };
+
+	      self.setDefaultLevel = function (level) {
+	          defaultLevel = level;
+	          if (!getPersistedLevel()) {
+	              self.setLevel(level, false);
+	          }
+	      };
+
+	      self.resetLevel = function () {
+	          self.setLevel(defaultLevel, false);
+	          clearPersistedLevel();
+	      };
+
+	      self.enableAll = function(persist) {
+	          self.setLevel(self.levels.TRACE, persist);
+	      };
+
+	      self.disableAll = function(persist) {
+	          self.setLevel(self.levels.SILENT, persist);
+	      };
+
+	      // Initialize with the right level
+	      var initialLevel = getPersistedLevel();
+	      if (initialLevel == null) {
+	          initialLevel = defaultLevel;
+	      }
+	      self.setLevel(initialLevel, false);
+	    }
+
+	    /*
+	     *
+	     * Top-level API
+	     *
+	     */
+
+	    var 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.");
+	        }
+
+	        var logger = _loggersByName[name];
+	        if (!logger) {
+	          logger = _loggersByName[name] = new Logger(
+	            name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+	        }
+	        return logger;
+	    };
+
+	    // Grab the current global log variable in case of overwrite
+	    var _log = (typeof window !== undefinedType) ? window.log : undefined;
+	    defaultLogger.noConflict = function() {
+	        if (typeof window !== undefinedType &&
+	               window.log === defaultLogger) {
+	            window.log = _log;
+	        }
+
+	        return defaultLogger;
+	    };
+
+	    defaultLogger.getLoggers = function getLoggers() {
+	        return _loggersByName;
+	    };
+
+	    // ES6 default export, for compatibility
+	    defaultLogger['default'] = defaultLogger;
+
+	    return defaultLogger;
+	})); 
+} (loglevel));
+
+const createTranslation=(e,t)=>o=>o(e,t),createTheme=(e,t)=>o=>o(e,t),STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const n=getCssStyle(s,"PROPERTIES"),a=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,a);const i=[n,a,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}class Theme{constructor(e,t,o){this.createTheme=(e,t)=>createTheme(e,t),this.createTranslation=(e,t)=>createTranslation(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
+
+var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
+  KeyEnum2[KeyEnum2["error"] = 0] = "error";
+  KeyEnum2[KeyEnum2["warning"] = 1] = "warning";
+  KeyEnum2[KeyEnum2["info"] = 2] = "info";
+  KeyEnum2[KeyEnum2["success"] = 3] = "success";
+  KeyEnum2[KeyEnum2["message"] = 4] = "message";
+  KeyEnum2[KeyEnum2["close"] = 5] = "close";
+  KeyEnum2[KeyEnum2["form-description"] = 6] = "form-description";
+  KeyEnum2[KeyEnum2["of"] = 7] = "of";
+  KeyEnum2[KeyEnum2["characters"] = 8] = "characters";
+  KeyEnum2[KeyEnum2["new"] = 9] = "new";
+  KeyEnum2[KeyEnum2["no-entries"] = 10] = "no-entries";
+  KeyEnum2[KeyEnum2["change-order"] = 11] = "change-order";
+  KeyEnum2[KeyEnum2["action-running"] = 12] = "action-running";
+  KeyEnum2[KeyEnum2["action-done"] = 13] = "action-done";
+  KeyEnum2[KeyEnum2["page-first"] = 14] = "page-first";
+  KeyEnum2[KeyEnum2["page-back"] = 15] = "page-back";
+  KeyEnum2[KeyEnum2["page-next"] = 16] = "page-next";
+  KeyEnum2[KeyEnum2["page-last"] = 17] = "page-last";
+  KeyEnum2[KeyEnum2["entries-per-site"] = 18] = "entries-per-site";
+  KeyEnum2[KeyEnum2["page-current"] = 19] = "page-current";
+  KeyEnum2[KeyEnum2["page-selected"] = 20] = "page-selected";
+  KeyEnum2[KeyEnum2["page-per-site"] = 21] = "page-per-site";
+  KeyEnum2[KeyEnum2["nav-maximize"] = 22] = "nav-maximize";
+  KeyEnum2[KeyEnum2["nav-minimize"] = 23] = "nav-minimize";
+  KeyEnum2[KeyEnum2["logo-description"] = 24] = "logo-description";
+  KeyEnum2[KeyEnum2["open-link-in-tab"] = 25] = "open-link-in-tab";
+  KeyEnum2[KeyEnum2["kolibri-logo"] = 26] = "kolibri-logo";
+  return KeyEnum2;
+})(KeyEnum || {});
+
+var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
+  TagEnum2[TagEnum2["abbr"] = 0] = "abbr";
+  TagEnum2[TagEnum2["accordion"] = 1] = "accordion";
+  TagEnum2[TagEnum2["accordion-group"] = 2] = "accordion-group";
+  TagEnum2[TagEnum2["alert"] = 3] = "alert";
+  TagEnum2[TagEnum2["avatar"] = 4] = "avatar";
+  TagEnum2[TagEnum2["badge"] = 5] = "badge";
+  TagEnum2[TagEnum2["breadcrumb"] = 6] = "breadcrumb";
+  TagEnum2[TagEnum2["button"] = 7] = "button";
+  TagEnum2[TagEnum2["button-group"] = 8] = "button-group";
+  TagEnum2[TagEnum2["button-link"] = 9] = "button-link";
+  TagEnum2[TagEnum2["card"] = 10] = "card";
+  TagEnum2[TagEnum2["details"] = 11] = "details";
+  TagEnum2[TagEnum2["form"] = 12] = "form";
+  TagEnum2[TagEnum2["heading"] = 13] = "heading";
+  TagEnum2[TagEnum2["icon"] = 14] = "icon";
+  TagEnum2[TagEnum2["image"] = 15] = "image";
+  TagEnum2[TagEnum2["indented-text"] = 16] = "indented-text";
+  TagEnum2[TagEnum2["input-checkbox"] = 17] = "input-checkbox";
+  TagEnum2[TagEnum2["input-color"] = 18] = "input-color";
+  TagEnum2[TagEnum2["input-date"] = 19] = "input-date";
+  TagEnum2[TagEnum2["input-email"] = 20] = "input-email";
+  TagEnum2[TagEnum2["input-file"] = 21] = "input-file";
+  TagEnum2[TagEnum2["input-number"] = 22] = "input-number";
+  TagEnum2[TagEnum2["input-password"] = 23] = "input-password";
+  TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
+  TagEnum2[TagEnum2["input-range"] = 25] = "input-range";
+  TagEnum2[TagEnum2["input-text"] = 26] = "input-text";
+  TagEnum2[TagEnum2["link"] = 27] = "link";
+  TagEnum2[TagEnum2["link-button"] = 28] = "link-button";
+  TagEnum2[TagEnum2["link-group"] = 29] = "link-group";
+  TagEnum2[TagEnum2["modal"] = 30] = "modal";
+  TagEnum2[TagEnum2["nav"] = 31] = "nav";
+  TagEnum2[TagEnum2["pagination"] = 32] = "pagination";
+  TagEnum2[TagEnum2["popover"] = 33] = "popover";
+  TagEnum2[TagEnum2["progress"] = 34] = "progress";
+  TagEnum2[TagEnum2["select"] = 35] = "select";
+  TagEnum2[TagEnum2["separator"] = 36] = "separator";
+  TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
+  TagEnum2[TagEnum2["spin"] = 38] = "spin";
+  TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
+  TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
+  TagEnum2[TagEnum2["table"] = 41] = "table";
+  TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
+  TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
+  TagEnum2[TagEnum2["toast"] = 44] = "toast";
+  TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
+  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
+  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
+  return TagEnum2;
+})(TagEnum || {});
+
+const KoliBri = new Theme("kol", KeyEnum, TagEnum);
+
+const css = (input) => input.join(``);
+const DEFAULT = KoliBri.createTheme("default", {
+  GLOBAL: css`
+		:host {
+			--border-radius: var(--kolibri-border-radius, 5px);
+			--font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
+			--font-size: var(--kolibri-font-size, 16px);
+			--spacing: var(--kolibri-spacing, 0.25rem);
+			--border-width: var(--kolibri-border-width, 1px);
+			--color-primary: var(--kolibri-color-primary, #004b76);
+			--color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
+			--color-danger: var(--kolibri-color-danger, #c0003c);
+			--color-warning: var(--kolibri-color-warning, #c44931);
+			--color-success: var(--kolibri-color-success, #005c45);
+			--color-subtle: var(--kolibri-color-subtle, #576164);
+			--color-light: var(--kolibri-color-light, #ffffff);
+			--color-text: var(--kolibri-color-text, #202020);
+			--color-mute: var(--kolibri-color-mute, #f2f3f4);
+			--color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
+		}
+		:host {
+			font-family: var(--font-family);
+			font-size: var(--font-size);
+		}
+		* {
+			box-sizing: border-box;
+		}
+		*:not(i) {
+			font-family: var(--font-family);
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 0;
+			padding: 0;
+		}
+		*[tabindex]:focus,
+		kol-input:not(.checkbox, .radio) .input:focus-within,
+		kol-input:is(.checkbox, .radio) input:focus,
+		summary:focus {
+			cursor: pointer;
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
+		kol-heading-wc {
+			font-weight: 700;
+		}
+		kol-tooltip-wc .tooltip-floating {
+			border: var(--border-width) solid var(--color-subtle);
+			border-radius: var(--border-radius);
+		}
+		kol-tooltip-wc .tooltip-arrow {
+			border: var(--border-width) solid var(--color-subtle);
+		}
+		kol-tooltip-wc .tooltip-area {
+			background-color: var(--color-light);
+		}
+		kol-tooltip-wc .tooltip-content {
+			border-radius: var(--border-radius);
+			line-height: 1.5;
+			padding: 0.5rem 0.75rem;
+		}
+		kol-span-wc,
+		kol-span-wc > span {
+			gap: 0.5rem;
+		}
+
+		@keyframes spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	`,
+  "KOL-BUTTON": css`
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			transition: outline-offset 0.2s linear;
+		}
+		:is(a, button) > kol-span-wc {
+			font-weight: 700;
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: var(--border-width);
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px 14px;
+			text-align: center;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+		}
+		: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 {
+			background-color: var(--color-primary);
+			border-color: var(--color-primary);
+			color: var(--color-light);
+		}
+		.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-light);
+			border-color: var(--color-primary);
+			color: var(--color-primary);
+		}
+		.danger :is(a, button) > kol-span-wc,
+		.danger :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+			color: var(--color-light);
+		}
+		.ghost :is(a, button) > kol-span-wc,
+		.ghost :is(a, button):disabled:hover > kol-span-wc {
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+			box-shadow: none;
+			color: var(--color-primary);
+		} /*-----------*/
+		.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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+		}
+		: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 {
+			border-color: var(--color-light);
+			box-shadow: none;
+			outline: none;
+		}
+		:is(a, button).hide-label > kol-span-wc {
+			padding: 0.8rem;
+			width: unset;
+		}
+		:is(a, button).hide-label > kol-span-wc > span > span {
+			display: none;
+		}
+		: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 {
+			border: none;
+			background-color: transparent;
+			box-shadow: none;
+		}
+		.ghost :is(a, button).small > kol-span-wc > span {
+			border-radius: 1.5em;
+			border-style: solid;
+			border-width: var(--border-width);
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+		}
+		.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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		} /** :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 {
+			background-color: transparent;
+			border-color: transparent;
+		}
+	`,
+  "KOL-INPUT-TEXT": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+		}
+	`,
+  "KOL-INPUT-PASSWORD": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(button, input, label, option, select, textarea) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, select, textarea, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-NUMBER": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-DATE": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-EMAIL": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-FILE": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		kol-input .input input[type='file'] {
+			padding-top: calc(0.5em + 2px);
+		}
+		input {
+			border: none;
+		}
+		input[type='file'] {
+			background-color: transparent;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(button, input, label, option, select, textarea) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, select, textarea, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-TEXTAREA": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .counter {
+			order: 4;
+		}
+		kol-input .hint {
+			order: 5;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		textarea {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		textarea:read-only,
+		textarea:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		.disabled {
+			opacity: 0.33;
+		}
+		select[multiple],
+		textarea {
+			overflow: auto;
+		}
+		textarea {
+			display: block;
+		}
+		.input {
+			position: relative;
+		}
+	`,
+  "KOL-ALERT": css`
+		.msg {
+			border-width: 0;
+		}
+		kol-alert-wc {
+			border-width: var(--border-width);
+			border-style: solid;
+			border-radius: var(--border-radius);
+			display: flex;
+			width: 100%;
+			overflow: unset;
+			border-color: transparent;
+			background-color: var(--color-light);
+		}
+		kol-alert-wc > .heading {
+			display: flex;
+			gap: 0.5em;
+			place-items: center;
+		}
+		kol-alert-wc > .heading > div {
+			display: grid;
+			gap: 0.25rem;
+		}
+		.msg > .heading > kol-icon {
+			place-self: baseline;
+		}
+		kol-alert-wc > .heading > kol-button-wc.close {
+			place-self: center;
+		}
+		.msg {
+			align-items: start;
+		}
+		.default {
+			border-color: var(--color-subtle);
+		}
+		.default.msg .heading-icon {
+			color: var(--color-subtle);
+		}
+		.error {
+			border-color: var(--color-danger);
+		}
+		.error.msg .heading-icon {
+			color: var(--color-danger);
+		}
+		.info {
+			border-color: var(--color-primary);
+		}
+		.info.msg .heading-icon {
+			color: var(--color-primary);
+		}
+		.success {
+			border-color: var(--color-success);
+		}
+		.success.msg .heading-icon {
+			color: var(--color-success);
+		}
+		.warning {
+			border-color: var(--color-warning);
+		}
+		.warning.msg .heading-icon {
+			color: var(--color-warning);
+		}
+		.heading-icon {
+			color: var(--color-light);
+		}
+		kol-alert-wc .heading .heading-icon {
+			padding: 0;
+		}
+		.msg > .heading > .heading-icon {
+			padding-top: 0;
+			place-items: baseline;
+		}
+		.msg > .heading > div > kol-heading-wc {
+			padding-top: calc(--var-spacing / 2);
+		}
+		.msg.default .heading > div > kol-heading-wc {
+			color: var(--color-subtle);
+		}
+		.msg.error .heading > div > kol-heading-wc {
+			color: var(--color-danger);
+		}
+		.msg.info .heading > div > kol-heading-wc {
+			color: var(--color-primary);
+		}
+		.msg.success .heading > div > kol-heading-wc {
+			color: var(--color-success);
+		}
+		.msg.warning .heading > div > kol-heading-wc {
+			color: var(--color-warning);
+		}
+		.msg.default .close .icon {
+			color: var(--color-subtle);
+		}
+		.msg.error .close .icon {
+			color: var(--color-danger);
+		}
+		.msg.info .close .icon {
+			color: var(--color-primary);
+		}
+		.msg.success .close .icon {
+			color: var(--color-success);
+		}
+		.msg.warning .close .icon {
+			color: var(--color-warning);
+		}
+		.card {
+			border-width: var(--border-width);
+			border-style: solid;
+			filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
+			flex-direction: column;
+		}
+		.card > .heading {
+			padding: 0.5rem 1rem;
+		}
+		.card[_has-closer] > .heading {
+			padding-top: 0;
+			padding-bottom: 0;
+			padding-right: 0;
+		}
+		.card > .heading > div {
+			width: 100%;
+			min-height: 1.25rem;
+		}
+		.card > .heading .heading-icon {
+			justify-self: right;
+			margin-top: -4px;
+		}
+		.card > .heading kol-heading-wc {
+			width: 100%;
+			color: var(--color-light);
+			display: flex;
+			font-size: 1.25rem;
+			line-height: 1.25rem;
+		}
+		.card > .heading kol-heading-wc > * {
+			margin: auto 0;
+		}
+		.card > .content {
+			padding: 1rem;
+		}
+		.card.default > .heading {
+			background-color: var(--color-subtle);
+		}
+		.card.error > .heading {
+			background-color: var(--color-danger);
+		}
+		.card.info > .heading {
+			background-color: var(--color-primary);
+		}
+		.card.success > .heading {
+			background-color: var(--color-success);
+		}
+		.card.warning > .heading {
+			background-color: var(--color-warning);
+		}
+		:is(.error, .info, .success, .warning) .heading-icon {
+			font-size: 1.25rem;
+		}
+		.card > div > .content {
+			grid-row: 2;
+			grid-column: 1 / span 2;
+		}
+		.card.default .close {
+			background-color: var(--color-subtle);
+		}
+		.card.error .close {
+			background-color: var(--color-danger);
+		}
+		.card.info .close {
+			background-color: var(--color-primary);
+		}
+		.card.success .close {
+			background-color: var(--color-success);
+		}
+		.card.warning .close {
+			background-color: var(--color-warning);
+		}
+		.close > button {
+			border-radius: 50%; /* visible on focus */
+			color: var(--color-light);
+			cursor: pointer;
+			height: var(--a11y-min-size);
+			width: var(--a11y-min-size);
+		}
+		.close > button.hide-label kol-icon {
+			display: flex;
+			width: 1em;
+			height: 1em;
+			font-size: 1.2rem;
+		}
+		.close > button:active {
+			box-shadow: none;
+			outline: none;
+		}
+	`,
+  "KOL-HEADING": css`
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: inherit;
+			font-style: normal;
+		}
+		h1,
+		h2,
+		h3 {
+			font-weight: 700;
+		}
+		h1 {
+			font-size: 1.5rem;
+			line-height: 1.75rem;
+		}
+		h2 {
+			font-size: 1.25rem;
+			line-height: 1.75rem;
+		}
+		h3 {
+			font-size: 1.125rem;
+			line-height: 1.5rem;
+		}
+	`,
+  "KOL-BADGE": css`
+		:host {
+			display: inline-block;
+			font-size: inherit;
+		}
+		:host > span {
+			border-radius: var(--border-radius);
+			display: inline-flex;
+			font-style: normal;
+		}
+		:host > span.smart-button {
+			align-items: center;
+		}
+		:host > span kol-button-wc:hover > button {
+			background-color: var(--color-primary-variant);
+			color: var(--color-light);
+		}
+		:host > span kol-button-wc > button {
+			color: inherit;
+			border-top-right-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+			padding: 0.2rem;
+		}
+		:host > span kol-span-wc {
+			padding: 0.25rem 0.75rem;
+		}
+		:host > span > kol-span-wc {
+			align-items: center;
+			font-style: normal;
+			gap: 0.5rem;
+		}
+		:host > span > kol-span-wc > span {
+			display: flex;
+			gap: 0.25rem;
+		}
+	`,
+  "KOL-BUTTON-GROUP": css`
+		:host > kol-button-group-wc {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--spacing);
+		}
+	`,
+  "KOL-INDENTED-TEXT": css`
+		:host > div {
+			background-color: var(--color-light);
+			border-left: none;
+			box-shadow: -2px 0px 0px var(--color-primary-variant);
+			padding: 0 0.5rem;
+			width: 100%;
+		}
+	`,
+  "KOL-LINK": css`
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+		}
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			border-radius: var(--border-radius);
+			outline: var(--border-width) solid;
+		}
+		:is(a, button):hover {
+			text-decoration-thickness: 0.25em;
+		}
+		:is(a, button):visited {
+			color: var(--visited);
+		}
+		.hidden {
+			display: none;
+			visibility: hidden;
+		}
+		.skip {
+			left: -99999px;
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+			line-height: 1em;
+		}
+		.skip:focus {
+			background: white;
+			left: unset;
+			position: unset;
+		}
+	`,
+  "KOL-DETAILS": css`
+		details > summary {
+			border-radius: var(--border-radius);
+		}
+		details kol-indented-text {
+			margin: 0.25rem 0 0 0.65rem;
+		}
+		kol-icon {
+			font-size: 1.2rem;
+		}
+	`,
+  "KOL-SPIN": css`
+		.spin {
+			display: inline-block;
+			height: 1rem;
+			position: relative;
+			width: 3rem;
+		}
+		.spin span {
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+			border: 0.1rem solid rgb(255, 255, 255);
+			border-radius: 50%;
+			height: 0.8rem;
+			width: 0.8rem;
+			top: 0.1rem;
+			position: absolute;
+		}
+		.spin span:nth-child(1) {
+			background-color: #fc0;
+			z-index: 0;
+			animation: 2s ease 0s infinite normal none running spin1;
+			left: 0.1rem;
+		}
+		.spin span:nth-child(2) {
+			background-color: #f00;
+			z-index: 1;
+			animation: 2s ease 0s infinite normal none running spin2;
+			left: 0.1rem;
+		}
+		.spin span:nth-child(3) {
+			background-color: #000;
+			z-index: 1;
+			animation: 2s ease 0s infinite normal none running spin2;
+			left: 1.1rem;
+		}
+		.spin span:nth-child(4) {
+			background-color: #666;
+			z-index: 0;
+			animation: 2s ease 0s infinite normal none running spin3;
+			left: 2.1rem;
+		}
+		@keyframes spin1 {
+			0% {
+				transform: scale(0);
+			}
+			100% {
+				transform: scale(1);
+			}
+		}
+		@keyframes spin2 {
+			0% {
+				transform: translate(0px, 0px);
+			}
+			100% {
+				transform: translate(1rem, 0px);
+			}
+		}
+		@keyframes spin3 {
+			0% {
+				transform: scale(1);
+			}
+			100% {
+				transform: scale(0);
+			}
+		}
+	`,
+  "KOL-PROGRESS": css`
+		:host progress,
+		:host span {
+			display: block;
+			height: 0px;
+			overflow: hidden;
+			width: 0px;
+		}
+		:host svg line:first-child,
+		:host svg circle:first-child {
+			fill: transparent;
+			stroke: var(--color-mute-variant);
+		}
+		:host svg line:last-child,
+		:host svg circle:last-child {
+			fill: transparent;
+			stroke: var(--color-primary);
+		}
+
+		.cycle .progress {
+			stroke: var(--color-primary-variant);
+		}
+	`,
+  "KOL-SELECT": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		select {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 2rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		select:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(select, label, option) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(select, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+		}
+		select[multiple] {
+			overflow: auto;
+		}
+		select option {
+			margin: 1px 0;
+			padding: 0.5em;
+			border-radius: var(--border-radius);
+			cursor: pointer;
+		}
+		select option:disabled {
+			cursor: not-allowed;
+		}
+		option:active:not(:disabled),
+		option:checked:not(:disabled),
+		option:focus:not(:disabled),
+		option:hover:not(:disabled) {
+			background: var(--color-primary-variant);
+			color: var(--color-light);
+		}
+	`,
+  "KOL-INPUT-COLOR": css`
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input[type='color'] {
+			border: none;
+			min-height: 40px !important;
+		}
+		input[type='color'] {
+			background-color: transparent;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-ACCORDION": css`
+		kol-span-wc > span {
+			display: flex;
+			place-items: baseline center;
+			text-align: left;
+		}
+		:host > div > kol-heading-wc button {
+			border-radius: var(--border-radius);
+			min-height: 2.2rem;
+			padding: 12px 8px;
+		}
+		: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 {
+			gap: 0.5em;
+		}
+		:host > div > kol-heading-wc button kol-icon {
+			color: var(--color-primary);
+		}
+		:host > div {
+			width: 100%;
+			height: 100%;
+			display: grid;
+		}
+		:host > div div[class='header'],
+		:host > div[class*='open'] div[class='content'] {
+			margin: 0;
+		}
+		:host > div div[class='content'] {
+			padding-left: 2.25em;
+			padding-bottom: 12px;
+			padding-right: 8px;
+		}
+		button:focus {
+			outline: none;
+		}
+		:host > .accordion:focus-within {
+			border-radius: var(--border-radius);
+			cursor: pointer;
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
+	`,
+  "KOL-TABLE": css`
+		:host * {
+			hyphens: var(--hyphens);
+			font-family: var(--font-family);
+			line-height: var(--line-height);
+			word-break: break-word;
+		}
+		:host > div {
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+		caption {
+			padding: 0.5rem;
+		}
+		th {
+			font-weight: normal;
+			color: var(--color-primary);
+		}
+		:host table thead tr:first-child th,
+		:host table thead tr:first-child td {
+			border-width: 0;
+			border-top-width: calc(var(--border-width) * 2);
+			border-style: solid;
+			border-color: var(--color-primary-variant);
+		}
+		table {
+			width: 100%;
+			border-spacing: 0;
+		}
+		table,
+		:host table thead tr:last-child th,
+		:host table thead tr:last-child td {
+			border-width: 0;
+			border-bottom-width: calc(var(--border-width) * 2);
+			border-style: solid;
+			border-color: var(--color-primary-variant);
+		}
+		th {
+			background-color: var(--color-light);
+		}
+		th div {
+			width: 100%;
+			display: flex;
+			gap: 0.5rem;
+			grid-template-columns: 1fr auto;
+			align-items: center;
+		}
+		th div.center {
+			justify-content: center;
+		}
+		th div.right {
+			justify-content: end;
+		}
+		tr:nth-child(even) {
+			background-color: var(--color-mute);
+		}
+		th,
+		td {
+			padding: 0.5rem;
+		}
+		td.center > div {
+			display: flex;
+			justify-content: center;
+		}
+		td.right > div {
+			display: flex;
+			justify-content: end;
+		}
+		th[aria-sort='ascending'],
+		th[aria-sort='descending'] {
+			font-weight: 700;
+		}
+		:host > div:last-child {
+			padding: 0.5rem;
+		}
+		:host > div:last-child,
+		:host > div:last-child > div:last-child {
+			display: grid;
+			align-items: center;
+			justify-items: center;
+			gap: 1rem;
+		}
+
+		@media (min-width: 1024px) {
+			div.pagination kol-pagination {
+				display: flex;
+				align-items: center;
+			}
+		}
+	`,
+  "KOL-NAV": css`
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		nav {
+			font-family: var(--font-family);
+			font-size: var(--font-size);
+			background-color: var(--color-mute);
+			width: 100%;
+		}
+		ul {
+			list-style: none;
+		}
+		kol-link-wc,
+		a {
+			height: 100%;
+			min-height: var(--a11y-min-size);
+			display: flex;
+			place-items: center;
+		}
+		.entry > kol-span-wc > span {
+			width: 100%;
+		}
+		.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			background-color: var(--color-light);
+			text-decoration: none;
+			color: var(--color-primary);
+			width: 100%;
+			display: flex;
+			align-items: center;
+			font-style: normal;
+			line-height: 1.5rem;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+			letter-spacing: 0.175px;
+		}
+		.entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {
+			color: var(--color-primary);
+			text-decoration: none;
+		}
+		.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+			border-left-color: var(--color-primary-variant);
+			background-color: var(--color-primary-variant);
+		}
+		.entry > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover > :is(a, button, span) {
+			color: var(--color-primary-variant);
+			font-weight: 700;
+			letter-spacing: unset;
+		}
+		.selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			background-color: var(--color-primary-variant);
+			color: var(--color-primary);
+			font-weight: 700;
+		}
+		.selected > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child > :is(a, button, span) {
+			font-weight: 700;
+		}
+		.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+			color: var(--color-primary-variant);
+			letter-spacing: unset;
+		}
+		.entry > 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;
+		}
+		.selected :is(a, button),
+		[exportparts*='selected'] a {
+			border-left-color: var(--color-primary);
+		} /** Compact mode */
+		.entry.compact :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			place-items: center;
+		}
+		.entry.compact > kol-span-wc > span {
+			flex-direction: column;
+		}
+		.entry.compact > kol-span-wc > span,
+		.entry.compact :is(a, button) {
+			padding-left: 0;
+		}
+	`,
+  "KOL-CARD": css`
+		/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
+		:host > div {
+			display: grid;
+			width: 100%;
+			height: 100%;
+			background-color: var(--color-light);
+			grid-template-rows: min-content 2fr min-content;
+			box-shadow: 0 0 0.25rem var(--color-subtle);
+			border-radius: var(--border-radius);
+		}
+		:host kol-heading-wc {
+			line-height: 1.75rem;
+		}
+		:host div.header {
+			padding: 1rem 1rem 0.5rem 1rem;
+		}
+		:host div.content {
+			padding: 0.5rem 1rem 1rem;
+			overflow: hidden;
+		}
+		:host div.footer {
+			padding: 0.5rem 1rem;
+		}
+	`,
+  "KOL-INPUT-CHECKBOX": css`
+		:host kol-input {
+			display: grid;
+			align-items: center;
+			justify-items: left;
+			width: 100%;
+			min-height: var(--a11y-min-size);
+			gap: 0.4rem;
+		}
+		:host kol-input.default {
+			grid-template-columns: 1.5rem auto;
+		}
+		:host kol-input.switch {
+			grid-template-columns: 3.5rem auto;
+		}
+		:host kol-input.button {
+			gap: 0.4rem 0;
+		}
+		:host kol-input > div.input {
+			display: inherit;
+			min-height: var(--a11y-min-size);
+			order: 2;
+		}
+		:host kol-input > div.input input {
+			margin: 0px;
+		}
+		:host kol-input > label {
+			cursor: pointer;
+			order: 3;
+		}
+		:host kol-input > kol-alert.error {
+			order: 1;
+			padding-top: calc(var(--spacing) / 2);
+			grid-column: span 2 / auto;
+		}
+		:host kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		:host kol-input.error input:focus,
+		kol-input.error select:focus,
+		kol-input.error textarea:focus {
+			outline-color: var(--color-danger) !important;
+		}
+		:host kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		:host input {
+			cursor: pointer;
+			order: 1;
+			width: 100%;
+			border-color: var(--color-subtle);
+			border-width: 2px;
+			border-style: solid;
+			border-radius: var(--border-radius);
+			line-height: 24px;
+			font-size: 1rem;
+		}
+		:host input:hover {
+			border-color: var(--color-primary);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+		}
+		:host input:focus:hover {
+			box-shadow: none;
+		}
+		:host input:active {
+			box-shadow: none;
+		}
+		:host kol-alert {
+			display: block;
+			width: 100%;
+		} /* CHECKBOX */
+		: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'] {
+			appearance: none;
+			background-color: white;
+			cursor: pointer;
+			transition: 0.5s;
+		}
+		:host kol-input input[type='checkbox'].kol-disabled:before {
+			cursor: not-allowed;
+		}
+		:host kol-input input[type='checkbox']:before {
+			content: '';
+			cursor: pointer;
+		}
+		:host kol-input input[type='checkbox']:checked {
+			background-color: var(--color-primary);
+			border-color: var(--color-primary);
+		}
+		:host kol-input.default input[type='checkbox'] {
+			border-radius: var(--border-radius);
+			height: calc(6 * 0.25rem);
+			min-width: calc(6 * 0.25rem);
+			width: calc(6 * 0.25rem);
+		}
+		:host kol-input.default input[type='checkbox']:before {
+			border-radius: 1.5em;
+			background-color: transparent;
+			display: block;
+			height: calc(6 * 0.25rem);
+			position: relative;
+			width: calc(6 * 0.25rem);
+		}
+		:host kol-input.default input[type='checkbox']:checked:before {
+			border-right-width: 3px;
+			border-bottom-width: 3px;
+			left: calc(1.5 * 0.25rem - 2px);
+			top: calc(2.85 * 0.25rem - 2px);
+			transform: rotate(40deg) translate(-50%, -50%);
+			background-color: transparent;
+			border-width: 0px 3px 3px 0px;
+			border-color: white;
+			border-radius: 1px;
+			border-style: solid;
+			height: calc(3 * 0.25rem);
+			width: calc(1.5 * 0.25rem);
+		}
+		:host kol-input.default input[type='checkbox']:indeterminate {
+			background-color: var(--color-primary);
+		}
+		:host kol-input.default input[type='checkbox']:indeterminate:before {
+			background-color: var(--color-light);
+			height: 0.125rem;
+			top: 0.6rem;
+			left: 0.25rem;
+			width: calc(3 * 0.25rem);
+			transform: inherit;
+		}
+		:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
+			border-width: 0px 1px 1px 0px;
+		}
+		:host kol-input.switch input[type='checkbox'] {
+			min-width: 3.5em;
+			width: 3.5em;
+			background-color: var(--color-subtle);
+			border-width: 0;
+			height: 1.5em;
+			border-radius: 1.25em;
+			display: inline-block;
+			position: relative;
+		}
+		:host kol-input.switch input[type='checkbox']:before {
+			width: 1.25em;
+			height: 1.25em;
+			left: calc(0.25em - 2px);
+			top: calc(0.25em - 2px);
+			border-radius: 1.25em;
+			background-color: white;
+			position: absolute;
+		}
+		:host kol-input.switch input[type='checkbox']:checked {
+			background-color: var(--color-primary);
+		}
+		:host kol-input.switch input[type='checkbox']:checked:before {
+			transform: translateX(2em);
+		}
+		:host kol-input.switch input[type='checkbox']:indeterminate:before {
+			transform: translateX(1em);
+		}
+		.switch {
+			& .icon {
+				width: 1.25em;
+				height: 1.25em;
+				left: 2px;
+			}
+
+			&:has(input:checked) .icon {
+				transform: translate(2em, -50%);
+			}
+
+			&:has(input:indeterminate) .icon {
+				transform: translate(1em, -50%);
+			}
+		}
+		:host .disabled {
+			opacity: 0.33;
+		}
+	`,
+  "KOL-INPUT-RADIO": css`
+		label {
+			cursor: pointer;
+			display: grid;
+			line-height: 20px;
+			gap: calc(var(--spacing) * 2);
+			width: 100%;
+		}
+		input {
+			cursor: pointer;
+			width: 100%;
+			border-color: var(--color-subtle);
+			border-width: 2px;
+			border-style: solid;
+			border-radius: 5px;
+			line-height: 24px;
+		}
+		input:hover {
+			border-color: var(--color-primary);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+		}
+		input:focus:hover {
+			box-shadow: none;
+		}
+		input:hover {
+			border-color: var(--color-primary);
+		}
+		kol-alert {
+			display: block;
+			width: 100%;
+		}
+		.required legend > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		} /* RADIO */
+		fieldset {
+			border: 0px;
+			margin: 0px;
+			padding: 0px;
+			display: grid;
+			gap: 0.25em;
+		}
+		fieldset div {
+			align-items: center;
+			cursor: pointer;
+			display: flex;
+			flex-direction: row;
+			gap: 0.5rem;
+			margin: 0;
+			min-height: var(--a11y-min-size);
+			position: relative;
+		}
+		fieldset div label {
+			cursor: pointer;
+			display: flex;
+			padding-left: calc(var(--spacing) / 2);
+			width: 100%;
+		}
+		fieldset div label span {
+			margin-top: 0.125em;
+		}
+		fieldset div input[type='radio'] {
+			appearance: none;
+			transition: 0.5s;
+			border-radius: 100%;
+			height: calc(6 * 0.25rem);
+			min-width: calc(6 * 0.25rem);
+			width: calc(6 * 0.25rem);
+		}
+		fieldset div input[type='radio']:before {
+			content: '';
+			cursor: pointer;
+			border-radius: 100%;
+			display: block;
+		}
+		fieldset div input[type='radio']:checked:before {
+			background-color: var(--color-primary);
+		}
+		fieldset div input[type='radio']:disabled {
+			cursor: not-allowed;
+			background-color: var(--color-mute-variant);
+		}
+		fieldset #error {
+			order: 1;
+		}
+		fieldset legend {
+			order: 2;
+			display: contents;
+		}
+		fieldset kol-input {
+			order: 3;
+		}
+		fieldset.error {
+			padding-left: 1rem;
+			border-left: 3px solid var(--color-danger);
+		}
+		fieldset kol-alert#error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		fieldset.error input:focus,
+		fieldset.error select:focus,
+		fieldset.error textarea:focus {
+			outline-color: var(--color-danger) !important;
+		}
+		fieldset.error kol-alert.error {
+			margin-left: -0.25em;
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		.disabled {
+			opacity: 0.33;
+		}
+		fieldset.horizontal {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--spacing) calc(var(--spacing) * 2);
+		}
+		fieldset.horizontal legend {
+			display: inline-block;
+			margin-bottom: calc(var(--spacing) / 2);
+		}
+		fieldset .input-slot {
+			gap: var(--spacing);
+		}
+		fieldset div label {
+			padding-left: 0;
+		}
+	`,
+  "KOL-TOAST-CONTAINER": css`
+		:host {
+			top: 1rem;
+			right: 1rem;
+			width: 440px;
+		}
+	`,
+  "KOL-TOAST": css`
+		.toast {
+			margin-top: 1rem;
+		}
+	`,
+  "KOL-TABS": css`
+		button:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+		:host kol-button-group-wc {
+			display: inline-flex;
+			gap: 2rem;
+			flex-wrap: wrap;
+		}
+		button {
+			box-sizing: border-box;
+			background-color: transparent;
+			border: 0;
+			border-radius: var(--border-radius);
+			font-style: normal;
+			font-weight: 700;
+			font-size: 18px;
+			line-height: 22px;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			color: var(--color-subtle);
+			padding: 0;
+		}
+		button:hover {
+			color: var(--color-primary);
+		}
+		button.primary,
+		button.selected {
+			color: var(--color-primary);
+		}
+		button kol-span-wc > span {
+			border-bottom: 0.25em solid;
+		}
+		button kol-span-wc > span {
+			gap: 0.5rem;
+		}
+		:host > div > div {
+			padding: 0.25em 0;
+		}
+		div[role='tabpanel'] {
+			height: 100%;
+		}
+		div.grid {
+			height: 100%;
+		}
+		:host > .tabs-align-right {
+			display: grid;
+			grid-template-columns: 1fr auto;
+		}
+		:host > .tabs-align-right kol-button-group-wc {
+			display: grid;
+			order: 2;
+		}
+		:host > .tabs-align-left {
+			display: grid;
+			grid-template-columns: auto 1fr;
+		}
+		:host > .tabs-align-left kol-button-group-wc {
+			display: grid;
+			order: 0;
+		}
+		:host > .tabs-align-bottom {
+			display: grid;
+			grid-template-rows: 1fr auto;
+		}
+		:host > .tabs-align-bottom kol-button-group-wc {
+			order: 2;
+		}
+		:host > .tabs-align-bottom kol-button-group-wc > div {
+			display: flex;
+		}
+		:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {
+			margin: 0px 1rem 0px 0px;
+		}
+		:host > .tabs-align-bottom > kol-button-group-wc > div > div {
+			margin: 0px 1rem;
+		}
+		:host > .tabs-align-top {
+			display: grid;
+			grid-template-rows: auto 1fr;
+		}
+		:host > .tabs-align-top kol-button-group-wc {
+			order: 0;
+		}
+		:host > .tabs-align-top kol-button-group-wc > div {
+			display: flex;
+		}
+		:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {
+			margin: 0px 1rem 0px 0px;
+		}
+		:host > .tabs-align-top > kol-button-group-wc > div > div {
+			margin: 0px 1rem;
+		}
+		:host > div {
+			display: grid;
+		}
+		:host > div.tabs-align-left {
+			grid-template-columns: auto 1fr;
+		}
+		: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 {
+			order: 0;
+		}
+		: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 {
+			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 {
+			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 {
+			width: 100%;
+		}
+		: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 {
+			border: none;
+		}
+	`,
+  "KOL-PAGINATION": css`
+		:host {
+			display: grid;
+			gap: 1rem;
+		}
+		:host .navigation-list {
+			display: inline-flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 0.5rem;
+		}
+		:host .selected button {
+			min-width: var(--a11y-min-size);
+			min-height: var(--a11y-min-size);
+			display: grid;
+			place-items: center;
+			font-family: var(--font-family);
+			cursor: not-allowed;
+			font-weight: 700;
+			border-radius: 50%;
+			border: none;
+			font-style: normal;
+			text-align: center;
+			width: inherit;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+			color: var(--color-primary);
+			background-color: var(--color-mute-variant);
+		}
+		:host > div > span {
+			align-self: flex-end;
+			padding-bottom: 0.5rem;
+			color: var(--color-primary);
+		}
+	`,
+  "KOL-INPUT-RANGE": css`
+		.inputs-wrapper {
+			gap: 1rem;
+		}
+		kol-input {
+			gap: 0.25rem;
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 0.5rem;
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input.icon-left > kol-icon:first-child {
+			margin-right: 0.5rem;
+		}
+		.input.icon-right > kol-icon:last-child {
+			margin-left: 0.5rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: 1rem;
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(.input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-LINK-BUTTON": css`
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			transition: outline-offset 0.2s linear;
+		}
+		:is(a, button) > kol-span-wc {
+			font-weight: 700;
+			border-radius: var(--a11y-min-size);
+			border-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px 14px;
+			text-align: center;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+		}
+		: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 {
+			background-color: var(--color-primary);
+			border-color: var(--color-primary);
+			color: var(--color-light);
+		}
+		.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-light);
+			border-color: var(--color-primary);
+			color: var(--color-primary);
+		}
+		.danger :is(a, button) > kol-span-wc,
+		.danger :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+			color: var(--color-light);
+		}
+		.ghost :is(a, button) > kol-span-wc,
+		.ghost :is(a, button):disabled:hover > kol-span-wc {
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+			box-shadow: none;
+			color: var(--color-primary);
+		} /*-----------*/
+		.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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+		}
+		: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 {
+			border-color: var(--color-light);
+			box-shadow: none;
+			outline: none;
+		}
+		:is(a, button).hide-label > kol-span-wc {
+			padding: 0.8rem;
+			width: unset;
+		}
+		:is(a, button).hide-label > kol-span-wc > span > span {
+			display: none;
+		}
+		: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 {
+			border: none;
+			background-color: transparent;
+			box-shadow: none;
+		}
+		.ghost :is(a, button).small > kol-span-wc > span {
+			border-radius: 1.5em;
+			border-style: solid;
+			border-width: var(--border-width);
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+		}
+		.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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		} /** :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 {
+			background-color: transparent;
+			border-color: transparent;
+		}
+	`,
+  "KOL-BUTTON-LINK": css`
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
+		}
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			border-radius: var(--border-radius);
+			outline: calc(var(--border-width) * 2) solid;
+		}
+		:is(a, button):hover {
+			text-decoration-thickness: 0.25em;
+		}
+		:is(a, button):visited {
+			color: var(--visited);
+		}
+		.hidden {
+			display: none;
+			visibility: hidden;
+		}
+		.skip {
+			left: -99999px;
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+		}
+		.skip:focus {
+			background: white;
+			left: unset;
+			position: unset;
+		}
+	`,
+  "KOL-ABBR": css`
+		abbr {
+			border-bottom: dashed var(--color-text) 1px;
+			text-decoration: none !important;
+		}
+	`,
+  "KOL-BREADCRUMB": css`
+		li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
+			font-size: 0.75rem;
+			color: var(--color-subtle);
+		}
+		kol-link::part(icon) {
+			font-size: 1.25rem;
+		}
+		ul li > :is(span, kol-link) {
+			line-height: 1.25rem;
+			height: 20px;
+		}
+		ul li:last-child > span {
+			color: var(--color-subtle);
+		}
+	`,
+  "KOL-MODAL": css`
+		:host .overlay .modal {
+			max-height: calc(100% - 32px);
+		}
+	`,
+  "KOL-ICON": css`
+		:host {
+			width: 1em;
+			height: 1em;
+		}
+		:host > i {
+			width: 1em;
+			height: 1em;
+		}
+	`,
+  "KOL-SKIP-NAV": css`
+		kol-link-wc > a > kol-span-wc {
+			border-radius: var(--a11y-min-size);
+			border-style: solid;
+			border-width: var(--border-width);
+			gap: calc(var(--spacing) * 2);
+			line-height: 1rem;
+			padding: 8px 14px;
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			color: var(--color-light);
+			cursor: pointer;
+		}
+	`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
+	}`
+});
+
+export { DEFAULT };