@limetech/lime-elements 36.3.0-next.24 → 36.3.0-next.26

package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js

@@ -6602,7 +6602,6 @@ function isArrayLike(obj) {
 }
 function forEach(value, fn) {
   if (!value) return
-
   for (const key of keys(value)) {
     fn(value[key], key);
   }
@@ -6611,6 +6610,16 @@ function isRef(maybeRef) {
   return isObject(maybeRef) && "current" in maybeRef
 }
 
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found on
+ * https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/LICENSE
+ */
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
 const isUnitlessNumber = {
   animationIterationCount: 0,
   borderImageOutset: 0,
@@ -6646,6 +6655,7 @@ const isUnitlessNumber = {
   widows: 0,
   zIndex: 0,
   zoom: 0,
+  // SVG-related properties
   fillOpacity: 0,
   floodOpacity: 0,
   stopOpacity: 0,
@@ -6656,20 +6666,31 @@ const isUnitlessNumber = {
   strokeWidth: 0,
 };
 
+/**
+ * @param prefix vendor-specific prefix, eg: Webkit
+ * @param key style name, eg: transitionDuration
+ * @return style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
 function prefixKey(prefix, key) {
   return prefix + key.charAt(0).toUpperCase() + key.substring(1)
 }
 
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
 const prefixes = ["Webkit", "ms", "Moz", "O"];
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
 keys(isUnitlessNumber).forEach(prop => {
   prefixes.forEach(prefix => {
-    isUnitlessNumber[prefixKey(prefix, prop)] = 0;
+    isUnitlessNumber[prefixKey(prefix, prop)] = 0; // isUnitlessNumber[prop]
   });
 });
 
 const jsxDomType = Symbol.for("jsx-dom:type");
 var JsxDomType
-
 ;(function (JsxDomType) {
   JsxDomType["ShadowRoot"] = "ShadowRoot";
 })(JsxDomType || (JsxDomType = {}));
@@ -6681,13 +6702,22 @@ const SVGNamespace = "http://www.w3.org/2000/svg";
 const XLinkNamespace = "http://www.w3.org/1999/xlink";
 const XMLNamespace = "http://www.w3.org/XML/1998/namespace";
 
+// https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
+// Emulate JSX Expression logic to ignore certain type of children or className.
 function isVisibleChild(value) {
   return !isBoolean(value) && value != null
 }
+const DomTokenList = typeof DOMTokenList !== "undefined" ? DOMTokenList : function () {};
 
+/**
+ * Convert a `value` to a className string.
+ * `value` can be a string, an array or a `Dictionary<boolean>`.
+ */
 function className(value) {
   if (Array.isArray(value)) {
     return value.map(className).filter(Boolean).join(" ")
+  } else if (value instanceof DomTokenList) {
+    return "" + value
   } else if (isObject(value)) {
     return keys(value)
       .filter(k => value[k])
@@ -6756,34 +6786,25 @@ const svg = {
 };
 const nonPresentationSVGAttributes =
   /^(a(ll|t|u)|base[FP]|c(al|lipPathU|on)|di|ed|ex|filter[RU]|g(lyphR|r)|ke|l(en|im)|ma(rker[HUW]|s)|n|pat|pr|point[^e]|re[^n]|s[puy]|st[^or]|ta|textL|vi|xC|y|z)/;
-class Component {
-  constructor(props) {
-    this.props = props;
-  }
-
-  render() {
-    return null
-  }
-}
-Object.defineProperties(Component.prototype, {
-  isReactComponent: {
-    value: true,
-  },
-});
-
 function initComponentClass(Class, attr, children) {
-  attr = { ...attr, children };
+  attr = {
+    ...attr,
+    children,
+  };
   const instance = new Class(attr);
   return instance.render()
 }
 
-function jsx(tag, { children, ...attr }) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function jsx(tag, _ref) {
+  let { children, ...attr } = _ref;
   if (!attr.namespaceURI && svg[tag] === 0) {
-    attr = { ...attr, namespaceURI: SVGNamespace };
+    attr = {
+      ...attr,
+      namespaceURI: SVGNamespace,
+    };
   }
-
   let node;
-
   if (isString(tag)) {
     node = attr.namespaceURI
       ? document.createElementNS(attr.namespaceURI, tag)
@@ -6791,6 +6812,7 @@ function jsx(tag, { children, ...attr }) {
     attributes(attr, node);
     appendChild(children, node);
 
+    // Select `option` elements in `select`
     if (node instanceof window.HTMLSelectElement && attr.value != null) {
       if (attr.multiple === true && Array.isArray(attr.value)) {
         const values = attr.value.map(value => String(value));
@@ -6801,37 +6823,49 @@ function jsx(tag, { children, ...attr }) {
         node.value = attr.value;
       }
     }
-
     attachRef(attr.ref, node);
   } else if (isFunction(tag)) {
+    // Custom elements.
     if (isObject(tag.defaultProps)) {
-      attr = { ...tag.defaultProps, ...attr };
+      attr = {
+        ...tag.defaultProps,
+        ...attr,
+      };
     }
-
     node = isComponentClass(tag)
       ? initComponentClass(tag, attr, children)
-      : tag({ ...attr, children });
+      : tag({
+          ...attr,
+          children,
+        });
   } else {
     throw new TypeError(`Invalid JSX element type: ${tag}`)
   }
-
   return node
 }
-function createElement(tag, attr, ...children) {
+function createElement(tag, attr) {
+  for (
+    var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2;
+    _key < _len;
+    _key++
+  ) {
+    children[_key - 2] = arguments[_key];
+  }
   if (isString(attr) || Array.isArray(attr)) {
     children.unshift(attr);
     attr = {};
   }
-
   attr = attr || {};
-
   if (attr.children != null && !children.length) {
 ({ children, ...attr } = attr);
   }
-
-  return jsx(tag, { ...attr, children })
+  return jsx(
+    tag,
+    {
+      ...attr,
+      children,
+    })
 }
-
 function attachRef(ref, node) {
   if (isRef(ref)) {
     ref.current = node;
@@ -6839,7 +6873,6 @@ function attachRef(ref, node) {
     ref(node);
   }
 }
-
 function appendChild(child, node) {
   if (isArrayLike(child)) {
     appendChildren(child, node);
@@ -6855,15 +6888,12 @@ function appendChild(child, node) {
     attachRef(child.ref, shadowRoot);
   }
 }
-
 function appendChildren(children, node) {
   for (const child of [...children]) {
     appendChild(child, node);
   }
-
   return node
 }
-
 function appendChildToNode(child, node) {
   if (node instanceof window.HTMLTemplateElement) {
     node.content.appendChild(child);
@@ -6871,11 +6901,9 @@ function appendChildToNode(child, node) {
     node.appendChild(child);
   }
 }
-
 function normalizeAttribute(s, separator) {
   return s.replace(/[A-Z]/g, match => separator + match.toLowerCase())
 }
-
 function style(node, value) {
   if (value == null || value === false);
   else if (Array.isArray(value)) {
@@ -6892,7 +6920,6 @@ function style(node, value) {
     });
   }
 }
-
 function attribute(key, value, node) {
   switch (key) {
     case "xlinkActuate":
@@ -6904,23 +6931,19 @@ function attribute(key, value, node) {
     case "xlinkType":
       attrNS(node, XLinkNamespace, normalizeAttribute(key, ":"), value);
       return
-
     case "xmlnsXlink":
       attr(node, normalizeAttribute(key, ":"), value);
       return
-
     case "xmlBase":
     case "xmlLang":
     case "xmlSpace":
       attrNS(node, XMLNamespace, normalizeAttribute(key, ":"), value);
       return
   }
-
   switch (key) {
     case "htmlFor":
       attr(node, "for", value);
       return
-
     case "dataset":
       forEach(value, (dataValue, dataKey) => {
         if (dataValue != null) {
@@ -6928,37 +6951,32 @@ function attribute(key, value, node) {
         }
       });
       return
-
     case "innerHTML":
     case "innerText":
     case "textContent":
       if (isVisibleChild(value)) {
         node[key] = value;
       }
-
       return
-
     case "dangerouslySetInnerHTML":
       if (isObject(value)) {
         node.innerHTML = value["__html"];
       }
-
       return
-
     case "value":
       if (value == null || node instanceof window.HTMLSelectElement) {
+        // skip nullish values
+        // for `<select>` apply value after appending `<option>` elements
         return
       } else if (node instanceof window.HTMLTextAreaElement) {
         node.value = value;
         return
       }
-
+      // use attribute for other elements
       break
-
     case "spellCheck":
       node.spellcheck = value;
       return
-
     case "class":
     case "className":
       if (isFunction(value)) {
@@ -6966,45 +6984,49 @@ function attribute(key, value, node) {
       } else {
         attr(node, "class", className(value));
       }
-
       return
-
     case "ref":
     case "namespaceURI":
       return
-
     case "style":
       style(node, value);
       return
-
     case "on":
     case "onCapture":
       forEach(value, (eventHandler, eventName) => {
         node.addEventListener(eventName, eventHandler, key === "onCapture");
       });
       return
+    // fallthrough
   }
 
   if (isFunction(value)) {
     if (key[0] === "o" && key[1] === "n") {
       const attribute = key.toLowerCase();
       const useCapture = attribute.endsWith("capture");
-
       if (!useCapture && node[attribute] === null) {
+        // use property when possible PR #17
         node[attribute] = value;
       } else if (useCapture) {
         node.addEventListener(attribute.substring(2, attribute.length - 7), value, true);
       } else {
         let eventName;
-
         if (attribute in window) {
-          let standardEventName = attribute.substring(2);
+          // standard event
+          // the JSX attribute could have been "onMouseOver" and the
+          // member name "onmouseover" is on the window's prototype
+          // so let's add the listener "mouseover", which is all lowercased
+          const standardEventName = attribute.substring(2);
           eventName = standardEventName;
         } else {
-          let cutomEventName = attribute[2] + key.slice(3);
-          eventName = cutomEventName;
+          // custom event
+          // the JSX attribute could have been "onMyCustomEvent"
+          // so let's trim off the "on" prefix and lowercase the first character
+          // and add the listener "myCustomEvent"
+          // except for the first character, we keep the event name case
+          const customEventName = attribute[2] + key.slice(3);
+          eventName = customEventName;
         }
-
         node.addEventListener(eventName, value);
       }
     }
@@ -7020,57 +7042,19 @@ function attribute(key, value, node) {
     }
   }
 }
-
 function attr(node, key, value) {
   node.setAttribute(key, value);
 }
-
 function attrNS(node, namespace, key, value) {
   node.setAttributeNS(namespace, key, value);
 }
-
 function attributes(attr, node) {
   for (const key of keys(attr)) {
     attribute(key, attr[key], node);
   }
-
   return node
 }
 
-const cache = new Map();
-
-const createStyledComponent =
-  name =>
-  (list, ...interpolations) =>
-  ({ style, ...props }) => {
-    const lastIndex = list.length - 1;
-    const css =
-      list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
-      list[lastIndex];
-    return createElement(name, {
-      style: [css, style],
-      ...props,
-    })
-  };
-
-const baseStyled = customComponent => createStyledComponent(customComponent);
-
-new Proxy(baseStyled, {
-  get(_, name) {
-    return setIfAbsent(cache, name, () => createStyledComponent(name))
-  },
-});
-
-function setIfAbsent(map, key, getValue) {
-  if (map.has(key)) {
-    return map.get(key)
-  } else {
-    const value = getValue(key);
-    map.set(key, value);
-    return value
-  }
-}
-
 const NBROFMONTHS$1 = 12;
 class MonthPicker extends Picker {
   constructor(dateFormat = 'MM/YYYY', language, change, translations) {

package/dist/cjs/limel-info-tile.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-287e25e0.js');
 
-const infoTileCss = "/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n  cursor: pointer;\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n.suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n\n  .suffix,\n.prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n.icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n\n  .label {\n    text-align: center;\n  }\n\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
+const infoTileCss = "/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n  cursor: pointer;\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.5rem;\n  right: -0.5rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
 
 const InfoTile = class {
   constructor(hostRef) {