@momentum-design/components 0.51.3 → 0.52.0

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

@@ -16,6 +16,10 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
  *
  * @tagname mdc-avatarbutton
+ *
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
  */
 declare class AvatarButton extends AvatarButton_base {
     /**

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -30,6 +30,10 @@ import styles from './avatarbutton.styles';
  * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
  *
  * @tagname mdc-avatarbutton
+ *
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
@@ -58,8 +62,8 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     }
     render() {
         return html `
+      <div part="overlay" aria-hidden="true"></div>
       <mdc-avatar
-        slot="prefixIcon"
         ?is-typing="${this.isTyping}"
         counter="${ifDefined(this.counter)}"
         icon-name="${ifDefined(this.iconName)}"

package/dist/components/avatarbutton/avatarbutton.styles.js

@@ -2,10 +2,32 @@ import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [hostFitContentStyles, css `
   :host {
+    --mdc-avatarbutton-overlay-background-color-rest: var(--mds-color-theme-avatar-ghost);
+    --mdc-avatarbutton-overlay-background-color-hover: var(--mds-color-theme-avatar-hover);
+    --mdc-avatarbutton-overlay-background-color-active: var(--mds-color-theme-avatar-pressed);
     padding: unset;
     margin: unset;
     outline: none;
     border-radius: 0.25rem;
+    position: relative;
+    cursor: pointer;
+  }
+  :host::part(overlay) {
+    position: absolute;
+    border-radius: 100vh;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    background-color: var(--mdc-avatarbutton-overlay-background-color-rest);
+  }
+  :host(:not([is-typing]):hover)::part(overlay) {
+    background-color: var(--mdc-avatarbutton-overlay-background-color-hover);
+  }
+  :host(:not([is-typing]):active)::part(overlay) {
+    background-color: var(--mdc-avatarbutton-overlay-background-color-active);
+  }
+  :host::part(presence) {
+    z-index: 2;
   }
 `, ...hostFocusRingStyles()];
 export default styles;

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

@@ -57,7 +57,7 @@ declare class Progressbar extends Progressbar_base {
      * @returns The clamped value
      * @internal
      */
-    private get clampedValue();
+    protected get clampedValue(): number;
     /**
      * Determines the validation state (success, error, or default) based on progress value and error state.
      * @returns The appropriate validation state for the progressbar.

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

@@ -0,0 +1,8 @@
+import Progressspinner from './progressspinner.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-progressspinner']: Progressspinner;
+    }
+}
+export default Progressspinner;

package/dist/components/progressspinner/index.js

@@ -0,0 +1,5 @@
+import Progressspinner from './progressspinner.component';
+import { TAG_NAME } from './progressspinner.constants';
+import '../icon';
+Progressspinner.register(TAG_NAME);
+export default Progressspinner;

package/dist/components/progressspinner/progressspiner.utils.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Calculates the progress arc length based on the percentage.
+ *
+ * The arc length is calculated using the formula:
+ * Arc Length = (Percentage / 100) * Circumference - Gap Size
+ *
+ * Example:
+ * If the circumference is 100 and the percentage is 25,
+ * and there is no gap, then the progress would cover the first quarter of the circle.
+ *
+ * However, with a gap, the progress arc starts after a gap of gapSize / 2 at the top (12 o'clock),
+ * and ends before the quarter by another gapSize / 2 (just before 3 o'clock).
+ *
+ * Therefore, the total arc length becomes:
+ * 25% of 100 = 25
+ * Subtract the two half-gaps: 25 - (2 * (gapSize / 2)) = 25 - gapSize
+ *
+ * For example, if gapSize is 4:
+ * Final arc length = 25 - 4 = 21
+ *
+ * This adjustment ensures the visual gaps are maintained between the progress and the remaining track.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The progress arc length
+ */
+declare const getProgressArc: (percentage: number) => number;
+/**
+ * Calculates the remaining arc length based on the percentage.
+ *
+ * The remaining arc is calculated using the formula:
+ * Remaining Arc = Circumference - Progress Arc - 2 * Gap Size
+ *
+ * Example:
+ * If the total circumference is 100, the progress arc is 50, and each gap is 2 units,
+ * then with two gaps (one before and one after the progress arc), the calculation becomes:
+ * Remaining Arc = 100 - 50 - (2 * 2) = 46
+ *
+ * This ensures the gap between the progress and remaining arcs is visually preserved.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The remaining arc length
+ */
+declare const getRemainingArc: (percentage: number) => number;
+/**
+ * Calculates the offset for the progress arc based on the percentage.
+ *
+ * The offset is adjusted to maintain a visual gap between the progress and track arcs.
+ * The progress arc begins slightly ahead of the 12 o’clock position, by half the gap size to account for spacing.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The offset for the progress arc
+ */
+declare const getProgressOffset: (percentage: number) => number;
+/**
+ * Calculates the remaining offset for the remaining arc based on the percentage and progress arc.
+ *
+ * Adjusts the offset to maintain a consistent visual gap between the progress and track arcs.
+ * The remaining arc begins where the progress arc ends, we have to consider the gap before progress arc(12'o clock)
+ * i.e. half the gap size, plus an additional gap between the two arcs.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @param progressArc - The length of the progress arc
+ * @returns The remaining offset for the remaining arc
+ */
+declare const getRemainingOffset: (percentage: number, progressArc: number) => number;
+export { getProgressArc, getRemainingArc, getProgressOffset, getRemainingOffset };

package/dist/components/progressspinner/progressspiner.utils.js

@@ -0,0 +1,102 @@
+import { DEFAULTS } from './progressspinner.constants';
+/**
+ * Calculates the progress arc length based on the percentage.
+ *
+ * The arc length is calculated using the formula:
+ * Arc Length = (Percentage / 100) * Circumference - Gap Size
+ *
+ * Example:
+ * If the circumference is 100 and the percentage is 25,
+ * and there is no gap, then the progress would cover the first quarter of the circle.
+ *
+ * However, with a gap, the progress arc starts after a gap of gapSize / 2 at the top (12 o'clock),
+ * and ends before the quarter by another gapSize / 2 (just before 3 o'clock).
+ *
+ * Therefore, the total arc length becomes:
+ * 25% of 100 = 25
+ * Subtract the two half-gaps: 25 - (2 * (gapSize / 2)) = 25 - gapSize
+ *
+ * For example, if gapSize is 4:
+ * Final arc length = 25 - 4 = 21
+ *
+ * This adjustment ensures the visual gaps are maintained between the progress and the remaining track.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The progress arc length
+ */
+const getProgressArc = (percentage) => {
+    if (percentage === 0) {
+        return 0;
+    }
+    const progressArc = (percentage / 100) * DEFAULTS.CIRCUMFERENCE - DEFAULTS.GAP_SIZE;
+    /** Ensure the progress arc is not negative due to gap size
+    * The 0.1% is a minimum threshold to ensure the arc is visible.
+    * This is especially useful for very small percentages.
+    * This is particularly important for accessibility and visual clarity.
+    */
+    return Math.max(progressArc, 0.1 * percentage);
+};
+/**
+ * Calculates the remaining arc length based on the percentage.
+ *
+ * The remaining arc is calculated using the formula:
+ * Remaining Arc = Circumference - Progress Arc - 2 * Gap Size
+ *
+ * Example:
+ * If the total circumference is 100, the progress arc is 50, and each gap is 2 units,
+ * then with two gaps (one before and one after the progress arc), the calculation becomes:
+ * Remaining Arc = 100 - 50 - (2 * 2) = 46
+ *
+ * This ensures the gap between the progress and remaining arcs is visually preserved.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The remaining arc length
+ */
+const getRemainingArc = (percentage) => {
+    const remainingArc = DEFAULTS.CIRCUMFERENCE - getProgressArc(percentage) - 2 * DEFAULTS.GAP_SIZE;
+    if (percentage === 0) {
+        return DEFAULTS.CIRCUMFERENCE;
+    }
+    /**
+     * Ensures that the remaining arc is never negative due to the gap size.
+     * In the final state (when the progress arc is nearly complete), the remaining arc should be 0.
+     */
+    if (remainingArc < 0) {
+        return 0;
+    }
+    return remainingArc;
+};
+/**
+ * Calculates the offset for the progress arc based on the percentage.
+ *
+ * The offset is adjusted to maintain a visual gap between the progress and track arcs.
+ * The progress arc begins slightly ahead of the 12 o’clock position, by half the gap size to account for spacing.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @returns The offset for the progress arc
+ */
+const getProgressOffset = (percentage) => {
+    if (percentage === 0) {
+        return 0;
+    }
+    return DEFAULTS.GAP_SIZE * 0.5;
+};
+/**
+ * Calculates the remaining offset for the remaining arc based on the percentage and progress arc.
+ *
+ * Adjusts the offset to maintain a consistent visual gap between the progress and track arcs.
+ * The remaining arc begins where the progress arc ends, we have to consider the gap before progress arc(12'o clock)
+ * i.e. half the gap size, plus an additional gap between the two arcs.
+ *
+ * @param percentage - The percentage value (0 to 100)
+ * @param progressArc - The length of the progress arc
+ * @returns The remaining offset for the remaining arc
+ */
+const getRemainingOffset = (percentage, progressArc) => {
+    const remainingOffset = progressArc + DEFAULTS.GAP_SIZE * 1.5;
+    if (percentage === 0) {
+        return 0;
+    }
+    return remainingOffset;
+};
+export { getProgressArc, getRemainingArc, getProgressOffset, getRemainingOffset };

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

@@ -0,0 +1,46 @@
+import { CSSResult } from 'lit';
+import Progressbar from '../progressbar/progressbar.component';
+/**
+ * `mdc-progressspinner` is a customizable, circular progress indicator component.
+ * It visually represents the current completion state of a process, such as loading,
+ * syncing, uploading, or any ongoing task that has a measurable percentage.
+ *
+ * The spinner is built using SVG with two concentric `<circle>` elements:
+ * - The `progress` arc represents the portion of work completed.
+ * - The `track` arc represents the remaining part.
+ *
+ * A visual gap is maintained between the progress and track arcs to clearly
+ * distinguish the two segments. The component smoothly animates arc length
+ * and respects accessibility best practices with ARIA attributes.
+ *
+ * The component supports different states:
+ * - **Default**: Circular spinner shows the progress.
+ * - **Success**: Displays a checkmark icon when progress reaches 100%.
+ * - **Error**: Displays an error icon when in an error state.
+ *
+ * @tagname mdc-progressspinner
+ *
+ * @cssproperty --mdc-spinner-size - The size of the spinner.
+ * @cssproperty --mdc-track-color - The color of the spinner track.
+ * @cssproperty --mdc-progress-color - The color of the spinner progress.
+ * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
+ * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
+ *
+ */
+declare class Progressspinner extends Progressbar {
+    connectedCallback(): void;
+    private renderProgressSpinner;
+    /**
+     * Renders the error state of the progress spinner.
+     * @returns The rendered HTML for the error state.
+     */
+    private renderErrorState;
+    /**
+     * Renders the success state of the progress spinner.
+     * @returns The rendered HTML for the success state.
+     */
+    private renderSuccessState;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Progressspinner;

package/dist/components/progressspinner/progressspinner.component.js

@@ -0,0 +1,125 @@
+import { html } from 'lit';
+import styles from './progressspinner.styles';
+import { Component } from '../../models';
+import Progressbar from '../progressbar/progressbar.component';
+import { DEFAULTS, ICON_NAME } from './progressspinner.constants';
+import { getProgressArc, getProgressOffset, getRemainingArc, getRemainingOffset } from './progressspiner.utils';
+/**
+ * `mdc-progressspinner` is a customizable, circular progress indicator component.
+ * It visually represents the current completion state of a process, such as loading,
+ * syncing, uploading, or any ongoing task that has a measurable percentage.
+ *
+ * The spinner is built using SVG with two concentric `<circle>` elements:
+ * - The `progress` arc represents the portion of work completed.
+ * - The `track` arc represents the remaining part.
+ *
+ * A visual gap is maintained between the progress and track arcs to clearly
+ * distinguish the two segments. The component smoothly animates arc length
+ * and respects accessibility best practices with ARIA attributes.
+ *
+ * The component supports different states:
+ * - **Default**: Circular spinner shows the progress.
+ * - **Success**: Displays a checkmark icon when progress reaches 100%.
+ * - **Error**: Displays an error icon when in an error state.
+ *
+ * @tagname mdc-progressspinner
+ *
+ * @cssproperty --mdc-spinner-size - The size of the spinner.
+ * @cssproperty --mdc-track-color - The color of the spinner track.
+ * @cssproperty --mdc-progress-color - The color of the spinner progress.
+ * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
+ * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
+ *
+ */
+class Progressspinner extends Progressbar {
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = '';
+        this.disabled = undefined;
+        this.helpTextType = undefined;
+        this.helpText = undefined;
+        this.requiredLabel = undefined;
+        this.variant = undefined;
+        this.label = undefined;
+    }
+    renderProgressSpinner() {
+        var _a;
+        const progressArc = getProgressArc(this.clampedValue);
+        const remainingArc = getRemainingArc(this.clampedValue);
+        const progressOffset = getProgressOffset(this.clampedValue);
+        const remainingOffset = getRemainingOffset(this.clampedValue, progressArc);
+        return html `
+      <div
+        part="spinner-container ${this.variant}"
+        role="progressbar"
+        aria-valuenow="${this.clampedValue}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+      <svg part="spinner-base">
+        <circle
+          part="spinner-track"
+          cx="24"
+          cy="24"
+          r="${DEFAULTS.RADIUS}"
+          stroke-width="${remainingArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
+          stroke-dasharray="${remainingArc} ${DEFAULTS.CIRCUMFERENCE}"
+          stroke-dashoffset="-${remainingOffset}"
+        />
+        <circle
+          part="spinner-progress"
+          cx="24"
+          cy="24"
+          r="${DEFAULTS.RADIUS}"
+          stroke-width="${progressArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
+          stroke-dasharray="${progressArc} ${DEFAULTS.CIRCUMFERENCE}"
+          stroke-dashoffset="-${progressOffset}"
+        />
+      </svg>
+      </div>
+    `;
+    }
+    /**
+     * Renders the error state of the progress spinner.
+     * @returns The rendered HTML for the error state.
+     */
+    renderErrorState() {
+        var _a;
+        return html `
+      <mdc-icon 
+      part="error-icon"
+      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}" 
+      name="${ICON_NAME.ERROR_LEGACY_FILLED}"
+      size="${DEFAULTS.ERROR_ICON_SIZE}"  
+      length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"></mdc-icon>
+    `;
+    }
+    /**
+     * Renders the success state of the progress spinner.
+     * @returns The rendered HTML for the success state.
+     */
+    renderSuccessState() {
+        var _a;
+        return html `
+      <mdc-icon 
+      part="success-icon"
+      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}" 
+      name="${ICON_NAME.CHECK_CIRCLE_BOLD}"
+      size="${DEFAULTS.SUCCESS_ICON_SIZE}"  
+      length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"></mdc-icon>
+    `;
+    }
+    render() {
+        if (this.error) {
+            return this.renderErrorState();
+        }
+        if (this.clampedValue === 100) {
+            return this.renderSuccessState();
+        }
+        return html `
+      ${this.renderProgressSpinner()}`;
+    }
+}
+Progressspinner.styles = [...Component.styles, ...styles];
+export default Progressspinner;

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

@@ -0,0 +1,15 @@
+declare const TAG_NAME: "mdc-progressspinner";
+declare const DEFAULTS: {
+    readonly RADIUS: 20;
+    readonly CIRCUMFERENCE: number;
+    readonly STROKE_WIDTH: 4;
+    readonly GAP_SIZE: 7.5;
+    readonly ERROR_ICON_SIZE: 2;
+    readonly SUCCESS_ICON_SIZE: 3;
+    readonly ICON_LENGTH_UNIT: "em";
+};
+declare const ICON_NAME: {
+    readonly CHECK_CIRCLE_BOLD: "check-circle-bold";
+    readonly ERROR_LEGACY_FILLED: "error-legacy-filled";
+};
+export { TAG_NAME, DEFAULTS, ICON_NAME };

package/dist/components/progressspinner/progressspinner.constants.js

@@ -0,0 +1,16 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('progressspinner');
+const DEFAULTS = {
+    RADIUS: 20,
+    CIRCUMFERENCE: 2 * Math.PI * 20,
+    STROKE_WIDTH: 4,
+    GAP_SIZE: 7.5,
+    ERROR_ICON_SIZE: 2,
+    SUCCESS_ICON_SIZE: 3,
+    ICON_LENGTH_UNIT: 'em',
+};
+const ICON_NAME = {
+    CHECK_CIRCLE_BOLD: 'check-circle-bold',
+    ERROR_LEGACY_FILLED: 'error-legacy-filled',
+};
+export { TAG_NAME, DEFAULTS, ICON_NAME };

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

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

package/dist/components/progressspinner/progressspinner.styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-spinner-size: 3rem;
+    --mdc-track-color: var(--mds-color-theme-control-indicator-inactive-normal);
+    --mdc-progress-color: var(--mds-color-theme-control-active-normal);
+    --mdc-progress-success-color: var(--mds-color-theme-text-success-normal);
+    --mdc-progress-error-color: var(--mds-color-theme-text-error-normal);
+
+    display: block;
+  }
+
+  :host::part(spinner-container) {
+    width: 3rem;
+    height: 3rem;
+    position: relative;
+  }
+
+  :host::part(spinner-base) {
+    width: var(--mdc-spinner-size);
+    height: var(--mdc-spinner-size);
+    rotate: -90deg;
+  }
+
+  :host::part(spinner-track) {
+    stroke: var(--mdc-track-color);
+    stroke-linecap: round;
+    fill: none;
+  }
+
+  :host::part(spinner-progress) {
+    stroke: var(--mdc-progress-color);
+    stroke-linecap: round;
+    fill: none;
+    transition: stroke-dasharray 0.3s ease-in-out;
+  }
+
+  :host::part(success-icon) {
+    color: var(--mdc-progress-success-color);
+}
+
+  :host::part(error-icon) {
+    color: var(--mdc-progress-error-color);
+    margin: 0.5rem;
+  }
+`;
+export default [styles];