@limetech/lime-elements 36.3.0-next.4 → 36.3.0-next.40

package/dist/collection/components/icon-button/icon-button.css

@@ -1,3 +1,11 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component!
  *
@@ -25,8 +33,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -60,8 +67,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -157,16 +163,14 @@
 }
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
@@ -179,8 +183,7 @@
 .mdc-icon-button .mdc-icon-button__ripple::before,
 .mdc-icon-button .mdc-icon-button__ripple::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -188,8 +191,7 @@
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
 .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
@@ -244,6 +246,7 @@
 
 .mdc-icon-button {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--icon-background-color, transparent);
   display: inline-flex;

package/dist/collection/components/info-tile/info-tile.css

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 /**
 * @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
@@ -82,10 +84,10 @@ a {
 }
 a.is-clickable {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-normal);
-  cursor: pointer;
 }
 a.is-clickable:hover {
   color: var(--mdc-theme-on-surface);
@@ -117,7 +119,7 @@ a.is-clickable:focus-visible {
 }
 @supports not (container-type: size) {
   .icon {
-    height: min(20%, 5rem);
+    width: max(10%, 3rem);
   }
 }
 .has-circular-progress .icon {
@@ -156,8 +158,8 @@ a.is-clickable:focus-visible {
 
 limel-badge {
   position: absolute;
-  top: -0.5rem;
-  right: -0.5rem;
+  top: -0.25rem;
+  right: -0.25rem;
 }
 
 limel-linear-progress {
@@ -192,7 +194,7 @@ limel-linear-progress {
 }
 @supports not (container-type: size) {
   .prefix,
-.suffix {
+  .suffix {
     font-size: 0.75rem;
   }
 }
@@ -233,7 +235,6 @@ limel-linear-progress {
     top: 0.25rem;
     right: 0.25rem;
   }
-
   a {
     padding: 0.375rem;
     gap: 0.125rem;
@@ -244,7 +245,6 @@ limel-linear-progress {
     top: 0.5rem;
     right: 0.5rem;
   }
-
   .icon {
     top: 0.25rem;
     right: 0.5rem;
@@ -287,29 +287,25 @@ limel-linear-progress {
   .value {
     --value-preferred-size: 32cqh !important;
   }
-
   .suffix,
-.prefix {
+  .prefix {
     --suffix-prefix-preferred-size: 16cqh !important;
   }
 }
 @container (height > 18.75rem) {
   .progress,
-.icon {
+  .icon {
     position: relative;
     top: unset;
     right: unset;
   }
-
   a {
     align-items: center;
     justify-content: center;
   }
-
   .label {
     text-align: center;
   }
-
   .has-circular-progress .icon {
     position: absolute;
     top: 0.5rem;

package/dist/collection/components/info-tile/info-tile.js

@@ -24,6 +24,9 @@ export class InfoTile {
     this.renderValue = () => {
       var _a;
       const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
+      if (!this.value && this.loading) {
+        return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
+      }
       if (this.value) {
         return (h("span", { class: {
             value: true,