@limetech/lime-elements 36.2.0 → 36.3.0-next.10

package/dist/collection/components/dialog/dialog.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }
 
@@ -76,7 +80,7 @@
  * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
 :host {
-  --dialog-background-color: rgb(var(--contrast-100));
+  --dialog-background-color: var(--lime-elevated-surface-background-color);
   --header-heading-color: var(--dialog-heading-title-color);
   --header-subheading-color: var(--dialog-heading-subtitle-color);
   --header-supporting-text-color: var(--dialog-heading-supporting-text-color);
@@ -684,6 +688,9 @@
   height: 100%;
   width: 100%;
 }
+.mdc-dialog .mdc-dialog__scrim {
+  background-color: rgba(var(--color-black), 0.4);
+}
 .mdc-dialog .mdc-dialog__container {
   height: 100%;
   width: var(--dialog-width, auto);
@@ -698,6 +705,7 @@
   border-radius: var(--dialog-border-radius, 0.25rem);
 }
 .mdc-dialog .mdc-dialog__content {
+  color: var(--mdc-theme-on-surface);
   padding: var(--dialog-padding-top-bottom, min(1.5rem, 3vw)) var(--dialog-padding-left-right, min(1.25rem, 3vw));
 }
 

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

@@ -13,7 +13,9 @@
 .button {
   all: unset;
   cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--limel-dock-item-text-color);
+  background-color: var(--dock-background-color);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -24,15 +26,16 @@
   font-size: 0.875rem;
   padding: 0 0.5rem;
   min-width: var(--dock-item-height);
-  color: var(--limel-dock-item-text-color);
-  background-color: var(--dock-background-color);
 }
 .button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .button:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+  background-color: var(--mdc-theme-surface);
+  box-shadow: var(--button-shadow-inset-pressed);
+  transform: translate3d(0, 0.05rem, 0);
 }
 .button:focus {
   outline: none;

package/dist/collection/components/dock/dock.css

@@ -36,7 +36,7 @@
   display: inline-flex;
   flex-direction: column;
   background-color: var(--dock-background-color, rgb(var(--contrast-100)));
-  box-shadow: 0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05);
+  box-shadow: var(--shadow-depth-8);
 }
 
 :host(limel-dock:not(.has-mobile-layout)) {
@@ -75,7 +75,9 @@ nav::-webkit-scrollbar {
 .expand-shrink {
   all: unset;
   box-sizing: border-box;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -86,6 +88,8 @@ nav::-webkit-scrollbar {
   border-radius: 0.375rem;
 }
 .expand-shrink:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .expand-shrink:active {

package/dist/collection/components/form/form.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }
 
@@ -532,22 +536,28 @@
   position: relative;
 }
 
+.form-group .mdc-typography--headline1,
+.form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1100));
+}
 .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 2rem;
   --mdc-typography-headline1-line-height: 2.25rem;
   --mdc-typography-headline1-letter-spacing: -0.0625rem;
   --mdc-typography-headline1-font-weight: 400;
-  color: rgb(var(--contrast-1000));
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
+.form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1200));
+}
 .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.625rem;
   --mdc-typography-headline1-line-height: 1.25rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1100));
 }
 .form-group .form-group .mdc-typography--headline1:before {
   content: "";
@@ -563,24 +573,30 @@
   border-radius: 0.125rem;
   opacity: 0.6;
 }
+.form-group .form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1300));
+}
 .form-group .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.375rem;
   --mdc-typography-headline1-line-height: 1.5rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1200));
 }
 .form-group .form-group .form-group .mdc-typography--headline1:before {
   display: none;
 }
+.form-group .form-group .form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1400));
+}
 .form-group .form-group .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.25rem;
   --mdc-typography-headline1-line-height: 1.25rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1200));
 }
 .form-group .form-group .form-group .form-group .mdc-typography--headline1:before {
   display: none;

package/dist/collection/components/header/header.css

@@ -73,7 +73,7 @@
   font-weight: bold;
 }
 
-.actions {
+slot[name=actions] {
   flex-shrink: 0;
 }
 
@@ -95,7 +95,7 @@
 :host(limel-header.has-responsive-layout) .headings {
   padding-right: 0.5rem;
 }
-:host(limel-header.has-responsive-layout) .actions {
+:host(limel-header.has-responsive-layout) slot[name=actions] {
   display: flex;
   justify-content: flex-end;
 }

package/dist/collection/components/header/header.js

@@ -40,9 +40,15 @@ import { h } from '@stencil/core';
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
- * @slot - Content (actions) to be put inside the far right surface of the header
+ * @slot actions - Content (actions) to be put inside the far right surface of
+ * the header
+ * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
+ * behavior has been deprecated, and support will be dropped in a future
+ * version. Please add `slot="actions"` to your elements to ensure your code
+ * will continue to work with future versions of Lime Elements.
  */
 export class Header {
   constructor() {
@@ -54,7 +60,7 @@ export class Header {
   render() {
     return [
       h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      h("div", { class: "actions" }, h("slot", null)),
+      h("slot", { name: "actions" }, h("slot", null)),
     ];
   }
   renderIcon() {

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

@@ -243,7 +243,9 @@
 }
 
 .mdc-icon-button {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--icon-background-color, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -252,9 +254,10 @@
   width: 2.25rem;
   padding: 0.125rem;
   border-radius: 50%;
-  background-color: var(--icon-background-color, transparent);
 }
 .mdc-icon-button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .mdc-icon-button:active {

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

@@ -78,14 +78,18 @@ a {
   flex-grow: 1;
   padding: 0.25rem 1rem 0.5rem 1rem;
   border-radius: var(--info-tile-border-radius, 1rem);
-  background-color: var(--info-tile-background-color, rgb(var(--contrast-100)));
+  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
 }
 a.is-clickable {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  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);
+  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-hovered);
 }
 a.is-clickable:active {
@@ -101,19 +105,19 @@ a.is-clickable:focus-visible {
 }
 
 .icon {
+  z-index: 1;
   position: absolute;
   top: 0.5rem;
   right: 0.75rem;
   padding: 0.25rem;
-  display: flex;
-  justify-content: center;
+  aspect-ratio: 1/1;
   color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));
   border-radius: 0;
   height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));
 }
 @supports not (container-type: size) {
   .icon {
-    height: min(60%, var(--icon-max-size));
+    width: max(10%, 3rem);
   }
 }
 .has-circular-progress .icon {
@@ -132,11 +136,16 @@ a.is-clickable:focus-visible {
       var(--icon-max-size)
   );
 }
+@supports not (container-type: size) {
+  .progress {
+    --circular-progress-size: initial;
+  }
+}
 
 .label {
   z-index: 1;
   color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
-  line-height: normal;
+  line-height: 1.2;
   font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));
 }
 @supports not (container-type: size) {
@@ -207,7 +216,7 @@ limel-linear-progress {
 }
 @supports not (container-type: size) {
   .value {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
   }
 }
 :host(limel-info-tile[loading]) .value {

package/dist/collection/components/input-field/input-field.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }
 
@@ -1994,6 +1998,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   flex-shrink: 0;
 }
 
@@ -2058,6 +2063,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -2112,6 +2118,12 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
 
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
+.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter,
+.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+  color: rgba(var(--contrast-1200), 1);
+}
+
 .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
   margin-right: 0.5rem;
 }
@@ -2126,6 +2138,14 @@
 .mdc-text-field {
   width: 100%;
 }
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix,
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
+}
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__affix,
+.mdc-text-field.mdc-text-field--disabled .mdc-text-field__icon {
+  color: rgb(var(--contrast-700));
+}
 
 .lime-empty-value-for-readonly {
   z-index: 1;
@@ -2176,7 +2196,7 @@
 }
 
 .autocomplete-list {
-  background-color: white;
+  background-color: var(--lime-elevated-surface-background-color);
   position: absolute;
   top: 0;
   left: 0;
@@ -2189,13 +2209,17 @@
   cursor: pointer;
 }
 
+input.mdc-text-field__input::placeholder {
+  color: rgb(var(--contrast-900)) !important;
+}
 input.mdc-text-field__input::-webkit-search-cancel-button {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  color: var(--mdc-theme-on-surface);
+  background-color: rgb(var(--contrast-900));
   cursor: pointer;
   height: 1.25rem;
   width: 1.25rem;
   border-radius: 50%;
-  background-color: #babac0;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 0.75rem;
@@ -2208,23 +2232,18 @@ input.mdc-text-field__input::-webkit-search-cancel-button {
   margin: auto;
 }
 input.mdc-text-field__input::-webkit-search-cancel-button:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: rgb(var(--contrast-1100));
   box-shadow: var(--button-shadow-hovered);
 }
 input.mdc-text-field__input::-webkit-search-cancel-button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-input.mdc-text-field__input::-webkit-search-cancel-button:hover {
-  background-color: #757580;
-}
 input.mdc-text-field__input::-webkit-search-cancel-button:active {
   transform: none;
 }
 
-.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-  color: rgba(var(--contrast-1200), 1);
-}
-
 .mdc-text-field-character-counter {
   transition: opacity 0.2s ease;
   opacity: 0;

package/dist/collection/components/linear-progress/linear-progress.css

@@ -49,6 +49,10 @@
       --lime-text-secondary-on-background-color,
       rgba(var(--contrast-1700), 0.54)
   );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
   --lime-error-text-color: rgb(var(--color-red-darker));
   --mdc-theme-surface: var(
       --lime-surface-background-color,
@@ -56,7 +60,7 @@
   );
   --mdc-theme-on-surface: var(
       --lime-on-surface-color,
-      var(--lime-text-primary-on-background-color)
+      rgb(var(--contrast-1500))
   );
 }