@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/spinner/spinner.styles.js

@@ -1,66 +1,71 @@
 import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-spinner-default-color: var(--mds-color-theme-control-active-normal);
-    --mdc-spinner-inverted-color: var(--mds-color-theme-inverted-control-active-normal);
-    --mdc-spinner-button-variant-color: currentColor;
-    --mdc-spinner-color: var(--mdc-spinner-default-color);
-    --mdc-spinner-size: 100%;
-  }
-
-  :host([inverted]) {
-    --mdc-spinner-color: var(--mdc-spinner-inverted-color);
-  }
-
-  :host([size="large"]) {
-    --mdc-spinner-size: 6rem;
-  }
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-spinner-default-color: var(--mds-color-theme-control-active-normal);
+      --mdc-spinner-inverted-color: var(--mds-color-theme-inverted-control-active-normal);
+      --mdc-spinner-button-variant-color: currentColor;
+      --mdc-spinner-color: var(--mdc-spinner-default-color);
+      --mdc-spinner-size: 100%;
+    }
 
-  :host([size="midsize"]) {
-    --mdc-spinner-size: 3rem;
-  }
+    :host([inverted]) {
+      --mdc-spinner-color: var(--mdc-spinner-inverted-color);
+    }
 
-  :host([size="small"]) {
-    --mdc-spinner-size: 1.5rem;
-  }
+    :host([size='large']) {
+      --mdc-spinner-size: 6rem;
+    }
 
-  :host([variant="button"]) {
-    --mdc-spinner-color: var(--mdc-spinner-button-variant-color);
-  }
+    :host([size='midsize']) {
+      --mdc-spinner-size: 3rem;
+    }
 
-  :host::part(container) {
-    width: var(--mdc-spinner-size);
-    height: var(--mdc-spinner-size);
-    animation: rotate 1.5s linear infinite;
-  }
+    :host([size='small']) {
+      --mdc-spinner-size: 1.5rem;
+    }
 
-  :host::part(circle) {
-    fill: none;
-    stroke: var(--mdc-spinner-color);
-    stroke-width: 8%;
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
-    transform: rotate(-90deg);
-    transform-origin: center;
-  }
+    :host([variant='button']) {
+      --mdc-spinner-color: var(--mdc-spinner-button-variant-color);
+    }
 
-  @keyframes rotate {
-    100% { transform: rotate(360deg); }
-  }
+    :host::part(container) {
+      width: var(--mdc-spinner-size);
+      height: var(--mdc-spinner-size);
+      animation: rotate 1.5s linear infinite;
+    }
 
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 470;
+    :host::part(circle) {
+      fill: none;
+      stroke: var(--mdc-spinner-color);
+      stroke-width: 8%;
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+      transform: rotate(-90deg);
+      transform-origin: center;
     }
-    50% {
-      stroke-dasharray: 209, 470;
-      stroke-dashoffset: -83;
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
     }
-    100% {
-      stroke-dasharray: 209, 470;
-      stroke-dashoffset: -292;
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 470;
+      }
+      50% {
+        stroke-dasharray: 209, 470;
+        stroke-dashoffset: -83;
+      }
+      100% {
+        stroke-dasharray: 209, 470;
+        stroke-dashoffset: -292;
+      }
     }
-  }
-`];
+  `,
+];
 export default styles;

package/dist/components/staticcheckbox/staticcheckbox.component.js

@@ -52,14 +52,16 @@ class StaticCheckbox extends DisabledMixin(Component) {
         this.indeterminate = false;
     }
     render() {
-        const checkboxIconContent = (this.checked || this.indeterminate) ? html `
-      <mdc-icon
-        class="icon"
-        name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
-        size="1"
-        length-unit="rem"
-      ></mdc-icon>
-    ` : nothing;
+        const checkboxIconContent = this.checked || this.indeterminate
+            ? html `
+            <mdc-icon
+              class="icon"
+              name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
+              size="1"
+              length-unit="rem"
+            ></mdc-icon>
+          `
+            : nothing;
         return html `<slot></slot>
       <div part="icon-container">${checkboxIconContent}</div>`;
     }

package/dist/components/staticcheckbox/staticcheckbox.styles.js

@@ -1,60 +1,61 @@
 import { css } from 'lit';
-const styles = [css `
-  :host{
-    margin: 0.125rem 0;
-    border-radius: 0.125rem;
-    --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-staticcheckbox-checked-background-color: var(--mds-color-theme-control-active-normal);
-    --mdc-staticcheckbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-staticcheckbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-staticcheckbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
-    --mdc-staticcheckbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-staticcheckbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-staticcheckbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
-  }
+const styles = [
+    css `
+    :host {
+      margin: 0.125rem 0;
+      border-radius: 0.125rem;
+      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-button-normal);
+      --mdc-staticcheckbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+      --mdc-staticcheckbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-staticcheckbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-staticcheckbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
+      --mdc-staticcheckbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-staticcheckbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-staticcheckbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+    }
 
-  :host([checked])::part(icon-container),
-  :host([indeterminate])::part(icon-container) {
-    background: var(--mdc-staticcheckbox-checked-background-color);
-    border-color: transparent;
-  }
+    :host([checked])::part(icon-container),
+    :host([indeterminate])::part(icon-container) {
+      background: var(--mdc-staticcheckbox-checked-background-color);
+      border-color: transparent;
+    }
+
+    :host([disabled])::part(icon-container) {
+      border-color: var(--mdc-staticcheckbox-disabled-border-color);
+      background: var(--mdc-staticcheckbox-disabled-background-color);
+    }
 
-  :host([disabled])::part(icon-container) {
-    border-color: var(--mdc-staticcheckbox-disabled-border-color);
-    background: var(--mdc-staticcheckbox-disabled-background-color);
-  }
+    :host([disabled][checked])::part(icon-container),
+    :host([disabled][indeterminate])::part(icon-container) {
+      background: var(--mdc-staticcheckbox-disabled-checked-icon-color);
+      border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
+    }
 
-  :host([disabled][checked])::part(icon-container),
-  :host([disabled][indeterminate])::part(icon-container) {
-    background: var(--mdc-staticcheckbox-disabled-checked-icon-color);
-    border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
-  }
-  
-  :host::part(icon-container) {
-    display: flex;
-    align-items: center;
-    border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
-    background: var(--mdc-staticcheckbox-icon-background-color);
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.125rem;
-  }
+    :host::part(icon-container) {
+      display: flex;
+      align-items: center;
+      border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
+      background: var(--mdc-staticcheckbox-icon-background-color);
+      width: 1rem;
+      height: 1rem;
+      border-radius: 0.125rem;
+    }
 
-  .icon {
-    --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
-  }
+    .icon {
+      --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
+    }
 
-  :host([disabled]) .icon {
-    --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
-  }
+    :host([disabled]) .icon {
+      --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
+    }
 
-  /* High Contrast Mode */
-  @media (forced-colors: active) {
-    :host([checked])::part(icon-container)
-    :host([indeterminate])::part(icon-container) {
-      border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+    /* High Contrast Mode */
+    @media (forced-colors: active) {
+      :host([checked])::part(icon-container) :host([indeterminate])::part(icon-container) {
+        border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+      }
     }
-  }
-`];
+  `,
+];
 export default styles;

package/dist/components/staticradio/staticradio.component.d.ts

@@ -24,16 +24,16 @@ declare const StaticRadio_base: import("../../utils/mixins/index.types").Constru
  */
 declare class StaticRadio extends StaticRadio_base {
     /**
-    * Determines whether the radio is selected or unselected.
-    *
-    * @default false
-    */
+     * Determines whether the radio is selected or unselected.
+     *
+     * @default false
+     */
     checked: boolean;
     /**
-    * Determines whether the radio is read-only.
-    *
-    * @default false
-    */
+     * Determines whether the radio is read-only.
+     *
+     * @default false
+     */
     readonly: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/staticradio/staticradio.component.js

@@ -10,8 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import styles from './staticradio.styles';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import styles from './staticradio.styles';
 /**
  * This is a decorative component that is styled to look as a radio.
  * It has 2 properties - checked and disabled.
@@ -37,21 +37,20 @@ class StaticRadio extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-        * Determines whether the radio is selected or unselected.
-        *
-        * @default false
-        */
+         * Determines whether the radio is selected or unselected.
+         *
+         * @default false
+         */
         this.checked = false;
         /**
-        * Determines whether the radio is read-only.
-        *
-        * @default false
-        */
+         * Determines whether the radio is read-only.
+         *
+         * @default false
+         */
         this.readonly = false;
     }
     render() {
-        return html `
-      <slot></slot>
+        return html ` <slot></slot>
       <span part="radio-icon" class="icon"></span>`;
     }
 }

package/dist/components/staticradio/staticradio.styles.js

@@ -1,86 +1,88 @@
 import { css } from 'lit';
-const styles = [css `
-:host{
-    display: block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    margin: 0.125rem 0;
-    border-radius: 50%;
+const styles = [
+    css `
+    :host {
+      display: block;
+      position: relative;
+      width: 1rem;
+      height: 1rem;
+      margin: 0.125rem 0;
+      border-radius: 50%;
 
-    --mdc-staticradio-inner-circle-size: 0.375rem;
-    --mdc-staticradio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-staticradio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-staticradio-normal-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-staticradio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-staticradio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
-    --mdc-staticradio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
-    --mdc-staticradio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-staticradio-control-active-color: var(--mds-color-theme-control-active-normal);
-    --mdc-staticradio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
-  }
-  
-  .icon:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
+      --mdc-staticradio-inner-circle-size: 0.375rem;
+      --mdc-staticradio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-staticradio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-staticradio-normal-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-staticradio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-staticradio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
+      --mdc-staticradio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
+      --mdc-staticradio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-staticradio-control-active-color: var(--mds-color-theme-control-active-normal);
+      --mdc-staticradio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
+    }
 
-  :host([disabled]) .icon,
-  :host([disabled][readonly]) .icon {
-    border-color: var(--mdc-staticradio-disabled-border-color);
-    background: var(--mdc-staticradio-control-inactive-disabled-background);
-  }
+    .icon:after {
+      content: '';
+      position: absolute;
+      display: none;
+    }
 
-  :host([disabled][checked]) .icon,
-  :host([disabled][readonly][checked]) .icon {
-    border: var(--mdc-staticradio-control-active-disabled-background);
-    background: var(--mdc-staticradio-control-active-disabled-background);
-  }
+    :host([disabled]) .icon,
+    :host([disabled][readonly]) .icon {
+      border-color: var(--mdc-staticradio-disabled-border-color);
+      background: var(--mdc-staticradio-control-inactive-disabled-background);
+    }
 
-  :host([disabled][checked]) .icon:after,
-  :host([disabled][readonly][checked]) .icon:after {
-    background: var(--mdc-staticradio-inner-circle-disabled-background);
-  }
+    :host([disabled][checked]) .icon,
+    :host([disabled][readonly][checked]) .icon {
+      border: var(--mdc-staticradio-control-active-disabled-background);
+      background: var(--mdc-staticradio-control-active-disabled-background);
+    }
 
-  .icon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1rem;
-    height: 1rem;
-    border: 0.0625rem solid var(--mdc-staticradio-normal-border-color);
-    background-color: var(--mdc-staticradio-control-inactive-color);
-    border-radius: 50%;
-  }
+    :host([disabled][checked]) .icon:after,
+    :host([disabled][readonly][checked]) .icon:after {
+      background: var(--mdc-staticradio-inner-circle-disabled-background);
+    }
 
-  :host([checked]) .icon {
-    border-color: var(--mdc-staticradio-control-active-color);
-    background-color: var(--mdc-staticradio-control-active-color);
-  }
+    .icon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      border: 0.0625rem solid var(--mdc-staticradio-normal-border-color);
+      background-color: var(--mdc-staticradio-control-inactive-color);
+      border-radius: 50%;
+    }
 
-  :host([checked]) .icon:after {
-    display: block;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--mdc-staticradio-inner-circle-size);
-    height: var(--mdc-staticradio-inner-circle-size);
-    border-radius: 50%;
-    background: var(--mdc-staticradio-inner-circle-normal-background);
-  }
+    :host([checked]) .icon {
+      border-color: var(--mdc-staticradio-control-active-color);
+      background-color: var(--mdc-staticradio-control-active-color);
+    }
 
-  :host([readonly]) .icon{
-    border-color: var(--mdc-staticradio-normal-border-color);
-    background-color: var(--mdc-staticradio-control-inactive-color);
-  }
+    :host([checked]) .icon:after {
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: var(--mdc-staticradio-inner-circle-size);
+      height: var(--mdc-staticradio-inner-circle-size);
+      border-radius: 50%;
+      background: var(--mdc-staticradio-inner-circle-normal-background);
+    }
 
-  :host([readonly][checked]) .icon {
-    border-color: var(--mdc-staticradio-normal-border-color);
-  }
-  
-  :host([readonly][checked]) .icon:after{
-    background-color: var(--mdc-staticradio-text-disabled-color);
-  }
-`];
+    :host([readonly]) .icon {
+      border-color: var(--mdc-staticradio-normal-border-color);
+      background-color: var(--mdc-staticradio-control-inactive-color);
+    }
+
+    :host([readonly][checked]) .icon {
+      border-color: var(--mdc-staticradio-normal-border-color);
+    }
+
+    :host([readonly][checked]) .icon:after {
+      background-color: var(--mdc-staticradio-text-disabled-color);
+    }
+  `,
+];
 export default styles;

package/dist/components/statictoggle/statictoggle.component.d.ts

@@ -31,9 +31,9 @@ declare const StaticToggle_base: import("../../utils/mixins/index.types").Constr
  */
 declare class StaticToggle extends StaticToggle_base {
     /**
-    * Determines whether the toggle is active or inactive.
-    * @default false
-    */
+     * Determines whether the toggle is active or inactive.
+     * @default false
+     */
     checked: boolean;
     /**
      * Determines toggle size in rem (height is specified here).

package/dist/components/statictoggle/statictoggle.component.js

@@ -44,9 +44,9 @@ class StaticToggle extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-        * Determines whether the toggle is active or inactive.
-        * @default false
-        */
+         * Determines whether the toggle is active or inactive.
+         * @default false
+         */
         this.checked = false;
         /**
          * Determines toggle size in rem (height is specified here).