@momentum-design/components 0.25.3 → 0.26.0

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

@@ -40,6 +40,13 @@ import type { Directions, DividerOrientation, DividerVariant } from './divider.t
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 declare class Divider extends Component {

package/dist/components/divider/divider.component.js

@@ -50,6 +50,13 @@ import styles from './divider.styles';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 class Divider extends Component {

package/dist/components/divider/divider.styles.js

@@ -17,6 +17,10 @@ const styles = [
       --mdc-divider-text-line-height: var(--mds-font-lineheight-body-midsize);
       --mdc-divider-text-margin: 1.5rem;
       --mdc-divider-grabber-button-border-radius: 0.5rem;
+      --mdc-divider-grabber-button-border-color: var(--mds-color-theme-outline-secondary-normal);
+      --mdc-divider-grabber-button-background-color-normal: var(--mds-color-theme-overlay-button-secondary-normal);
+      --mdc-divider-grabber-button-background-color-hover: var(--mds-color-theme-overlay-button-secondary-hover);
+      --mdc-divider-grabber-button-background-color-pressed: var(--mds-color-theme-overlay-button-secondary-pressed);
 
       display: flex;
       justify-content: center;
@@ -28,6 +32,37 @@ const styles = [
       background-color: var(--mdc-divider-background-color);
     }
 
+    @media (forced-colors: active) {
+      /* Primary and grabber divider styles */
+      :host([data-type='mdc-primary-divider'][button-position='positive']),
+      :host([data-type='mdc-grabber-divider'][button-position='positive']) {
+        border: 0;
+        border-top: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][button-position='negative']),
+      :host([data-type='mdc-grabber-divider'][button-position='negative']) {
+        border: 0;
+        border-bottom: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='positive']),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='positive']),
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='negative']:dir(rtl)),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='negative']:dir(rtl)) {
+        border: 0;
+        border-right: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='negative']),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='negative']),
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='positive']:dir(rtl)),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='positive']:dir(rtl)) {
+        border: 0;
+        border-left: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+    }
+
     /* Orientation-specific styles */
     :host([orientation='horizontal']) {
       flex-direction: row;
@@ -58,21 +93,35 @@ const styles = [
     }
 
     /** Button divider styles */
+
+    ::slotted(mdc-button) {
+      background-color: var(--mdc-divider-grabber-button-background-color-normal);
+      border-color: var(--mdc-divider-grabber-button-border-color);
+    }
+
+    ::slotted(mdc-button:hover) {
+      background-color: var(--mdc-divider-grabber-button-background-color-hover);
+    }
+
+    ::slotted(mdc-button:active) {
+      background-color: var(--mdc-divider-grabber-button-background-color-pressed);
+    }
+
     :host([orientation='vertical']) ::slotted(mdc-button) {
       width: 1.25rem;
       height: 2.5rem;
-      border-radius: 0 
-          var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
           0;
     }
 
     :host([orientation='horizontal']) ::slotted(mdc-button) {
       height: 1.25rem;
       width: 2.5rem;
-      border-radius: 0 
-          0 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          0
+          var(--mdc-divider-grabber-button-border-radius)
           var(--mdc-divider-grabber-button-border-radius);
     }
 
@@ -87,41 +136,53 @@ const styles = [
     }
 
     :host([orientation='horizontal'][button-position='positive']) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
-          0 
+      border-radius: var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
+          0
           0;
-      border-bottom-color: transparent;
+      margin: 0;
+      margin-bottom: var(--mdc-divider-width);
+      border-bottom: 0;
     }
 
     :host([orientation='horizontal'][button-position='negative']) ::slotted(mdc-button) {
-      border-top-color: transparent;
+      margin: 0;
+      margin-top: var(--mdc-divider-width);
+      border-top: 0;
     }
 
     :host([orientation='vertical'][button-position='negative']:dir(ltr)) ::slotted(mdc-button),
     :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius) 
-          0 
-          0 
+      border-radius: var(--mdc-divider-grabber-button-border-radius)
+          0
+          0
           var(--mdc-divider-grabber-button-border-radius);
-      border-right-color: transparent;
+      margin: 0;
+      margin-right: var(--mdc-divider-width);
+      border-right: 0;
     }
 
     :host([orientation='vertical'][button-position='positive']:dir(ltr)) ::slotted(mdc-button),
     :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
-      border-left-color: transparent;
+      margin: 0;
+      margin-left: var(--mdc-divider-width);
+      border-left: 0;
     }
 
     :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: 0 
-          var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
           0;
       transform: rotate(180deg);
+      margin: 0;
+      margin-right: var(--mdc-divider-width);
     }
 
     :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
       transform: rotate(180deg);
+      margin: 0;
+      margin-left: var(--mdc-divider-width);
     }
 
     /** Text divider styles */
@@ -136,6 +197,12 @@ const styles = [
       background-color: var(--mdc-divider-background-color);
     }
 
+    @media (forced-colors: active) {
+      :host([data-type='mdc-text-divider']) > div {
+        border-bottom: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+    }
+
     :host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:first-of-type {
       background: linear-gradient(to right, transparent, 30%, var(--mdc-divider-background-color));
     }

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,7 @@
+import Spinner from './spinner.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-spinner']: Spinner;
+    }
+}
+export default Spinner;

package/dist/components/spinner/index.js

@@ -0,0 +1,4 @@
+import Spinner from './spinner.component';
+import { TAG_NAME } from './spinner.constants';
+Spinner.register(TAG_NAME);
+export default Spinner;

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

@@ -0,0 +1,75 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import { SpinnerSize, SpinnerVariant } from './spinner.types';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+declare class Spinner extends Component {
+    /**
+     * The spinner color can be inverted by setting the inverted attribute to true.
+     * @default false
+     */
+    inverted: boolean;
+    /**
+     * Size of the spinner.
+     * Acceptable values include:
+     *
+     * - 'small'
+     * - 'midsize'
+     * - 'large'
+     * - 'undefined'
+     *
+     * @default midsize
+     */
+    size?: SpinnerSize;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+    * There are 2 variants of spinner: default and button. Their coloring is different.
+    * - **Standalone (Default)**: Track has a blue color.
+    * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+    * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+    * icon or label text.
+    * @default standalone
+    */
+    variant: SpinnerVariant;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Spinner;

package/dist/components/spinner/spinner.component.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './spinner.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './spinner.constants';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+class Spinner extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The spinner color can be inverted by setting the inverted attribute to true.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
+        /**
+         * Size of the spinner.
+         * Acceptable values include:
+         *
+         * - 'small'
+         * - 'midsize'
+         * - 'large'
+         * - 'undefined'
+         *
+         * @default midsize
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+        * There are 2 variants of spinner: default and button. Their coloring is different.
+        * - **Standalone (Default)**: Track has a blue color.
+        * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+        * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+        * icon or label text.
+        * @default standalone
+        */
+        this.variant = DEFAULTS.VARIANT;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.role = this.ariaLabel ? 'img' : null;
+            this.ariaHidden = this.ariaLabel ? 'false' : 'true';
+        }
+    }
+    render() {
+        return html `
+      <svg part="container" viewBox="0 0 100 100">
+        <circle part="circle" cx="50" cy="50" r="46"></circle>
+      </svg>
+    `;
+    }
+}
+Spinner.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Spinner.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Spinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Spinner.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Spinner.prototype, "variant", void 0);
+export default Spinner;

package/dist/components/spinner/spinner.constants.d.ts

@@ -0,0 +1,16 @@
+declare const TAG_NAME: "mdc-spinner";
+declare const SPINNER_SIZES: {
+    readonly LARGE: "large";
+    readonly MIDSIZE: "midsize";
+    readonly SMALL: "small";
+};
+declare const SPINNER_VARIANT: {
+    readonly STANDALONE: "standalone";
+    readonly BUTTON: "button";
+};
+declare const DEFAULTS: {
+    VARIANT: "standalone";
+    SIZE: "midsize";
+    INVERTED: boolean;
+};
+export { TAG_NAME, SPINNER_SIZES, SPINNER_VARIANT, DEFAULTS };

package/dist/components/spinner/spinner.constants.js

@@ -0,0 +1,17 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('spinner');
+const SPINNER_SIZES = {
+    LARGE: 'large',
+    MIDSIZE: 'midsize',
+    SMALL: 'small',
+};
+const SPINNER_VARIANT = {
+    STANDALONE: 'standalone',
+    BUTTON: 'button',
+};
+const DEFAULTS = {
+    VARIANT: SPINNER_VARIANT.STANDALONE,
+    SIZE: SPINNER_SIZES.MIDSIZE,
+    INVERTED: false,
+};
+export { TAG_NAME, SPINNER_SIZES, SPINNER_VARIANT, DEFAULTS };

package/dist/components/spinner/spinner.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,66 @@
+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;
+  }
+
+  :host([size="midsize"]) {
+    --mdc-spinner-size: 3rem;
+  }
+
+  :host([size="small"]) {
+    --mdc-spinner-size: 1.5rem;
+  }
+
+  :host([variant="button"]) {
+    --mdc-spinner-color: var(--mdc-spinner-button-variant-color);
+  }
+
+  :host::part(container) {
+    width: var(--mdc-spinner-size);
+    height: var(--mdc-spinner-size);
+    animation: rotate 1.5s linear infinite;
+  }
+
+  :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;
+  }
+
+  @keyframes rotate {
+    100% { transform: rotate(360deg); }
+  }
+
+  @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/spinner/spinner.types.d.ts

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { SPINNER_SIZES, SPINNER_VARIANT } from './spinner.constants';
+type SpinnerSize = ValueOf<typeof SPINNER_SIZES>;
+type SpinnerVariant = ValueOf<typeof SPINNER_VARIANT>;
+export { SpinnerSize, SpinnerVariant, };

package/dist/components/spinner/spinner.types.js

@@ -0,0 +1 @@
+export {};