@public-ui/themes 1.5.0-rc.20 → 1.5.0-rc.22

package/dist/index.mjs

@@ -1,4 +1,390 @@
-import { KoliBri } from '@public-ui/components';
+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:{};new Map;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["dialog"] = 12] = "dialog";
+  TagEnum2[TagEnum2["dropdown"] = 13] = "dropdown";
+  TagEnum2[TagEnum2["form"] = 14] = "form";
+  TagEnum2[TagEnum2["heading"] = 15] = "heading";
+  TagEnum2[TagEnum2["icon"] = 16] = "icon";
+  TagEnum2[TagEnum2["image"] = 17] = "image";
+  TagEnum2[TagEnum2["indented-text"] = 18] = "indented-text";
+  TagEnum2[TagEnum2["input-checkbox"] = 19] = "input-checkbox";
+  TagEnum2[TagEnum2["input-color"] = 20] = "input-color";
+  TagEnum2[TagEnum2["input-date"] = 21] = "input-date";
+  TagEnum2[TagEnum2["input-file"] = 22] = "input-file";
+  TagEnum2[TagEnum2["input-email"] = 23] = "input-email";
+  TagEnum2[TagEnum2["input-number"] = 24] = "input-number";
+  TagEnum2[TagEnum2["input-password"] = 25] = "input-password";
+  TagEnum2[TagEnum2["input-radio"] = 26] = "input-radio";
+  TagEnum2[TagEnum2["input-range"] = 27] = "input-range";
+  TagEnum2[TagEnum2["input-text"] = 28] = "input-text";
+  TagEnum2[TagEnum2["link"] = 29] = "link";
+  TagEnum2[TagEnum2["link-button"] = 30] = "link-button";
+  TagEnum2[TagEnum2["link-group"] = 31] = "link-group";
+  TagEnum2[TagEnum2["modal"] = 32] = "modal";
+  TagEnum2[TagEnum2["nav"] = 33] = "nav";
+  TagEnum2[TagEnum2["pagination"] = 34] = "pagination";
+  TagEnum2[TagEnum2["popover"] = 35] = "popover";
+  TagEnum2[TagEnum2["progress"] = 36] = "progress";
+  TagEnum2[TagEnum2["select"] = 37] = "select";
+  TagEnum2[TagEnum2["separator"] = 38] = "separator";
+  TagEnum2[TagEnum2["skip-nav"] = 39] = "skip-nav";
+  TagEnum2[TagEnum2["spin"] = 40] = "spin";
+  TagEnum2[TagEnum2["symbol"] = 41] = "symbol";
+  TagEnum2[TagEnum2["table"] = 42] = "table";
+  TagEnum2[TagEnum2["tabs"] = 43] = "tabs";
+  TagEnum2[TagEnum2["textarea"] = 44] = "textarea";
+  TagEnum2[TagEnum2["toast"] = 45] = "toast";
+  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
+  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
+  return TagEnum2;
+})(TagEnum || {});
+
+const KoliBri = new Theme("kol", KeyEnum, TagEnum);
 
 const BAMF = KoliBri.createTheme("bamf", {});
 
@@ -23369,13 +23755,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		padding: 0;
 	}
 	*[tabindex]:focus,
-	a:focus,
-	button:focus,
-	input:focus,
-	select:focus,
-	summary:focus,
-	textarea:focus {
-		border-radius: var(--kolibri-border-radius);
+	kol-input:not(.checkbox, .radio) .input:focus-within,
+	kol-input:is(.checkbox, .radio) input:focus,
+	summary:focus {
 		cursor: pointer;
 		outline-color: var(--kolibri-color-outline);
 		outline-offset: 2px;
@@ -23560,53 +23942,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	.card .content {
 		padding: var(--spacing);
 	}`,
-  "KOL-INPUT-TEXT": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-INPUT-TEXT": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -23620,27 +24003,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -23660,56 +24027,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
   "KOL-BUTTON-GROUP": `kol-button-group-wc {
 		gap: 0.25em;
 	}`,
-  "KOL-INPUT-PASSWORD": `:host {
-		--kolibri-spacing: 0.25rem;
+  "KOL-INPUT-PASSWORD": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -23723,27 +24088,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -23760,53 +24109,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
-  "KOL-INPUT-NUMBER": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-INPUT-NUMBER": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -23820,27 +24170,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -23857,53 +24191,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
-  "KOL-INPUT-EMAIL": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-INPUT-EMAIL": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -23917,27 +24252,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -23954,53 +24273,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
-  "KOL-INPUT-FILE": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-INPUT-FILE": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -24014,27 +24334,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -24051,53 +24355,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
-  "KOL-TEXTAREA": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-TEXTAREA": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -24111,27 +24416,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -24376,18 +24665,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		height: calc(6 * var(--spacing));
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
-	}
-	fieldset div input[type="radio"]:before {
-		content: "";
-		cursor: pointer;
-		left: calc(1.5 * var(--spacing) - 2px);
-		top: calc(1.5 * var(--spacing) - 2px);
-		position: relative;
-		border-radius: 100%;
-		display: block;
-		height: calc(3 * var(--spacing));
-		width: calc(3 * var(--spacing));
-	}
+	} /* fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}*/
 	fieldset div input[type="radio"]:checked:before {
 		box-shadow: 0 0 0.1rem black;
 		background-color: var(--kolibri-color-primary);
@@ -24557,53 +24835,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		stroke: var(--kolibri-color-normal);
 		fill: transparent;
 	}`,
-  "KOL-SELECT": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-SELECT": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -24617,27 +24896,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -24654,53 +24917,54 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
-  "KOL-INPUT-COLOR": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-INPUT-COLOR": `input,
+	select,
+	textarea {
+		border: none;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--kolibri-color-secondary);
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
 	}
 	kol-input > label {
 		order: 1;
-	}
-	kol-input > label > span {
 		color: var(--default-letter);
-		font-size: 0.875rem;
-		line-height: 1.5rem;
 	}
-	kol-input > div.input {
-		background-color: white;
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
 		border-radius: 0.25rem;
-		display: block;
+		border-style: solid;
+		border-width: 2px;
 		order: 2;
 	}
-	kol-input > kol-alert.error {
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
 		order: 3;
 	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
 		color: var(--default-letter);
-		border-color: var(--kolibri-border-color);
-		border-width: 2px;
-		border-style: solid;
 		padding: 0.5em 0.75em;
-		border-radius: 0.25rem;
-		overflow: hidden;
-		width: 100%;
 	}
 	input:not([type="range"]),
 	select:not([multiple]) {
@@ -24714,27 +24978,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		background-color: var(--background-light-grey);
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
 	}
 	select[multiple],
 	textarea {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -25093,9 +25341,10 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		z-index: 200;
 	}
 	:host > div > kol-alert {
+		background-color: white;
+		border-radius: var(--kolibri-border-radius);
 		display: block;
-		margin: auto;
-		padding: 1rem;
+		margin: 1rem auto;
 		max-width: 750px;
 	}
 	:host > div > kol-button-wc {
@@ -32231,6 +32480,88 @@ const MAPZ = KoliBri.createTheme("mapz", {
 			u+f0ec, u+f10a-f10b, u+f123, u+f13e, u+f148-f149, u+f14c, u+f156, u+f15e,
 			u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f250, u+f252,
 			u+f27a;
+	}`,
+  "KOL-INPUT-RANGE": `input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
+	}
+	kol-input > label {
+		order: 1;
+		color: var(--default-letter);
+	}
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
+		border-radius: 0.25rem;
+		border-style: solid;
+		border-width: 2px;
+		order: 2;
+	}
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
+		order: 3;
+	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
+	input,
+	select,
+	textarea {
+		color: var(--default-letter);
+		padding: 0.5em 0.75em;
+	}
+	input:not([type="range"]),
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	textarea {
+		display: inherit;
+	}
+	input::placeholder {
+		color: var(--default-border-hover);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		border-radius: 0.25em;
+		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-color: var(--kolibri-color-primary);
+		color: white;
 	}`
 });