@momentum-design/components 0.141.3 → 0.141.5

package/dist/components/cardradio/cardradio.component.js

@@ -194,7 +194,7 @@ __decorate([
     __metadata("design:type", Object)
 ], CardRadio.prototype, "checked", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], CardRadio.prototype, "name", void 0);
 export default CardRadio;

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

@@ -1,5 +1,6 @@
 import StepperItem from './stepperitem.component';
 import '../icon';
+import '../spinner';
 import '../text';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/stepperitem/index.js

@@ -1,6 +1,7 @@
 import StepperItem from './stepperitem.component';
 import { TAG_NAME } from './stepperitem.constants';
 import '../icon';
+import '../spinner';
 import '../text';
 StepperItem.register(TAG_NAME);
 export default StepperItem;

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

@@ -10,6 +10,7 @@ declare const StepperItem_base: import("../../utils/mixins/index.types").Constru
  * 
  * - Use `mdc-stepperitem` for each stage of an `mdc-stepper` sequence, one item per step.
  * - Use `mdc-stepperitem` `completed`, `current`, and `not-started` to reflect where the user is in the flow so status reads at a glance.
+ * - Use `mdc-stepperitem` `loading` when a step is processing and its completion percentage is unknown, such as generating a staffing plan.
  * - Use `mdc-stepperitem` `error-current` or `error-incomplete` to flag a step with unresolved problems the user must fix before finishing.
  * 
  * **When not to use**
@@ -21,16 +22,18 @@ declare const StepperItem_base: import("../../utils/mixins/index.types").Constru
  * @tagname mdc-stepperitem
  * 
  * @dependency mdc-icon
+ * @dependency mdc-spinner
  * @dependency mdc-text
  * 
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
  * 
- * @csspart status-container - The container for the status icon or step number.
+ * @csspart status-container - The container for the status icon, step number, or loading spinner.
  * @csspart label-container - The container for the label and help text.
  * @csspart help-text-container - The container for the help text and error icon when applicable.
  * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart status-spinner - The inset spinner displayed in place of the status indicator while loading.
  * @csspart step-number - The text representing the step number.
  * @csspart label - The text representing the label of the stepper item.
  * @csspart help-text - The text providing additional information about the stepper item.
@@ -49,7 +52,10 @@ declare class StepperItem extends StepperItem_base {
      */
     variant: VariantType;
     /**
-     * The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.
+     * The status of the stepper item: `completed`, `current`, `loading`, `not-started`, `error-current`, or `error-incomplete`.
+     * Loading replaces the indicator with an inset spinner and sets aria-busy without changing disabled.
+     * Consumers must include the loading state in the accessible label and provide application live regions
+     * when progress announcements are needed.
      * @default 'not-started'
      */
     status: StatusType;
@@ -107,6 +113,7 @@ declare class StepperItem extends StepperItem_base {
     private handleKeyUp;
     /**
      * Renders the status icon based on the current status of the stepper item.
+     * - If the status is `loading`, it renders an inset spinner.
      * - If the status is `completed`, it renders a check icon.
      * - If the status is `current` or `error-current`, it renders a pencil icon.
      * - If the status is `not-started` or `error-incomplete`, it renders the step number.

package/dist/components/stepperitem/stepperitem.component.js

@@ -24,16 +24,18 @@ import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
  * @tagname mdc-stepperitem
  *
  * @dependency mdc-icon
+ * @dependency mdc-spinner
  * @dependency mdc-text
  *
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
  *
- * @csspart status-container - The container for the status icon or step number.
+ * @csspart status-container - The container for the status icon, step number, or loading spinner.
  * @csspart label-container - The container for the label and help text.
  * @csspart help-text-container - The container for the help text and error icon when applicable.
  * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart status-spinner - The inset spinner displayed in place of the status indicator while loading.
  * @csspart step-number - The text representing the step number.
  * @csspart label - The text representing the label of the stepper item.
  * @csspart help-text - The text providing additional information about the stepper item.
@@ -66,7 +68,10 @@ class StepperItem extends KeyDownHandledMixin(KeyToActionMixin(TabIndexMixin(Dis
          */
         this.variant = DEFAULT.VARIANT;
         /**
-         * The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.
+         * The status of the stepper item: `completed`, `current`, `loading`, `not-started`, `error-current`, or `error-incomplete`.
+         * Loading replaces the indicator with an inset spinner and sets aria-busy without changing disabled.
+         * Consumers must include the loading state in the accessible label and provide application live regions
+         * when progress announcements are needed.
          * @default 'not-started'
          */
         this.status = DEFAULT.STATUS;
@@ -148,6 +153,7 @@ class StepperItem extends KeyDownHandledMixin(KeyToActionMixin(TabIndexMixin(Dis
     }
     /**
      * Renders the status icon based on the current status of the stepper item.
+     * - If the status is `loading`, it renders an inset spinner.
      * - If the status is `completed`, it renders a check icon.
      * - If the status is `current` or `error-current`, it renders a pencil icon.
      * - If the status is `not-started` or `error-incomplete`, it renders the step number.
@@ -155,6 +161,9 @@ class StepperItem extends KeyDownHandledMixin(KeyToActionMixin(TabIndexMixin(Dis
      * @returns A template literal that renders the status icon based on the current status of the stepper item.
      */
     renderStatusIcon() {
+        if (this.status === STATUS.LOADING) {
+            return html `<mdc-spinner part="status-spinner"></mdc-spinner>`;
+        }
         if (this.status === STATUS.COMPLETED) {
             return html `<mdc-icon part="status-icon" name=${STATUS_ICON.COMPLETED} length-unit="rem" size="1"></mdc-icon>`;
         }
@@ -193,6 +202,9 @@ class StepperItem extends KeyDownHandledMixin(KeyToActionMixin(TabIndexMixin(Dis
     }
     update(changedProperties) {
         super.update(changedProperties);
+        if (changedProperties.has('status')) {
+            this.ariaBusy = this.status === STATUS.LOADING ? 'true' : null;
+        }
         if (changedProperties.has('disabled')) {
             this.tabIndex = this.disabled ? -1 : 0;
             this.classList.remove('pressed');

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

@@ -7,6 +7,7 @@ declare const VARIANT: {
 declare const STATUS: {
     readonly COMPLETED: "completed";
     readonly CURRENT: "current";
+    readonly LOADING: "loading";
     readonly ERROR_CURRENT: "error-current";
     readonly ERROR_INCOMPLETE: "error-incomplete";
     readonly NOT_STARTED: "not-started";

package/dist/components/stepperitem/stepperitem.constants.js

@@ -7,6 +7,7 @@ const VARIANT = {
 const STATUS = {
     COMPLETED: 'completed',
     CURRENT: 'current',
+    LOADING: 'loading',
     ERROR_CURRENT: 'error-current',
     ERROR_INCOMPLETE: 'error-incomplete',
     NOT_STARTED: 'not-started',

package/dist/components/stepperitem/stepperitem.styles.js

@@ -41,6 +41,10 @@ const styles = css `
     color: var(--mdc-stepperitem-label-color);
   }
 
+  :host::part(status-spinner) {
+    --mdc-spinner-size: 1rem;
+  }
+
   :host::part(label-container) {
     background-color: var(--mdc-stepperitem-label-container-background);
     border-radius: 0.5rem;
@@ -67,7 +71,8 @@ const styles = css `
   :host([status='completed'])::part(status-icon) {
     --mdc-icon-fill-color: var(--mds-color-theme-inverted-text-primary-normal);
   }
-  :host([status='current'])::part(status-container) {
+  :host([status='current'])::part(status-container),
+  :host([status='loading'])::part(status-container) {
     --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-normal);
   }
   :host([status='error-current'])::part(status-container) {
@@ -100,11 +105,13 @@ const styles = css `
     --mdc-stepperitem-status-container-background: var(--mds-color-theme-control-active-active);
   }
 
-  :host([status='current']:hover)::part(status-container) {
+  :host([status='current']:hover)::part(status-container),
+  :host([status='loading']:hover)::part(status-container) {
     --mdc-stepperitem-status-container-background: var(--mds-color-theme-outline-secondary-normal);
     --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-hover);
   }
-  :host([status='current']:active)::part(status-container) {
+  :host([status='current']:active)::part(status-container),
+  :host([status='loading']:active)::part(status-container) {
     --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-active);
     --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-hover);
   }
@@ -202,5 +209,9 @@ const styles = css `
   :host([disabled][status='completed'])::part(status-icon) {
     --mdc-icon-fill-color: var(--mds-color-theme-inverted-text-primary-disabled);
   }
+
+  :host([disabled])::part(status-spinner) {
+    --mdc-spinner-default-color: var(--mds-color-theme-text-primary-disabled);
+  }
 `;
 export default [hostFitContentStyles, styles, ...hostFocusRingStyles()];

package/dist/custom-elements.json

@@ -10568,7 +10568,8 @@
               },
               "default": "''",
               "description": "The name of the radio group. Cards with the same name are grouped together,\nensuring only one card in the group can be selected at a time.",
-              "attribute": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -49613,7 +49614,7 @@
           ],
           "cssParts": [
             {
-              "description": "The container for the status icon or step number.",
+              "description": "The container for the status icon, step number, or loading spinner.",
               "name": "status-container"
             },
             {
@@ -49628,6 +49629,10 @@
               "description": "The icon representing the status of the stepper item.",
               "name": "status-icon"
             },
+            {
+              "description": "The inset spinner displayed in place of the status indicator while loading.",
+              "name": "status-spinner"
+            },
             {
               "description": "The text representing the step number.",
               "name": "step-number"
@@ -49748,7 +49753,7 @@
               "kind": "method",
               "name": "renderStatusIcon",
               "privacy": "private",
-              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
+              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `loading`, it renders an inset spinner.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
               "return": {
                 "type": {
                   "text": ""
@@ -49761,7 +49766,7 @@
               "type": {
                 "text": "StatusType"
               },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "description": "The status of the stepper item: `completed`, `current`, `loading`, `not-started`, `error-current`, or `error-incomplete`.\nLoading replaces the indicator with an inset spinner and sets aria-busy without changing disabled.\nConsumers must include the loading state in the accessible label and provide application live regions\nwhen progress announcements are needed.",
               "default": "'not-started'",
               "attribute": "status",
               "reflects": true
@@ -49842,7 +49847,7 @@
               "type": {
                 "text": "StatusType"
               },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "description": "The status of the stepper item: `completed`, `current`, `loading`, `not-started`, `error-current`, or `error-incomplete`.\nLoading replaces the indicator with an inset spinner and sets aria-busy without changing disabled.\nConsumers must include the loading state in the accessible label and provide application live regions\nwhen progress announcements are needed.",
               "default": "'not-started'",
               "fieldName": "status"
             },
@@ -49923,7 +49928,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-stepperitem",
-          "jsDoc": "/**\n * @tagname mdc-stepperitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
+          "jsDoc": "/**\n * @tagname mdc-stepperitem\n *\n * @dependency mdc-icon\n * @dependency mdc-spinner\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon, step number, or loading spinner.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart status-spinner - The inset spinner displayed in place of the status indicator while loading.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
           "customElement": true
         }
       ],

package/dist/react/stepperitem/index.d.ts

@@ -8,6 +8,7 @@ import type { Events } from '../../components/stepperitem/stepperitem.types';
  * 
  * - Use `mdc-stepperitem` for each stage of an `mdc-stepper` sequence, one item per step.
  * - Use `mdc-stepperitem` `completed`, `current`, and `not-started` to reflect where the user is in the flow so status reads at a glance.
+ * - Use `mdc-stepperitem` `loading` when a step is processing and its completion percentage is unknown, such as generating a staffing plan.
  * - Use `mdc-stepperitem` `error-current` or `error-incomplete` to flag a step with unresolved problems the user must fix before finishing.
  * 
  * **When not to use**
@@ -19,16 +20,18 @@ import type { Events } from '../../components/stepperitem/stepperitem.types';
  * @tagname mdc-stepperitem
  * 
  * @dependency mdc-icon
+ * @dependency mdc-spinner
  * @dependency mdc-text
  * 
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
  * 
- * @csspart status-container - The container for the status icon or step number.
+ * @csspart status-container - The container for the status icon, step number, or loading spinner.
  * @csspart label-container - The container for the label and help text.
  * @csspart help-text-container - The container for the help text and error icon when applicable.
  * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart status-spinner - The inset spinner displayed in place of the status indicator while loading.
  * @csspart step-number - The text representing the step number.
  * @csspart label - The text representing the label of the stepper item.
  * @csspart help-text - The text providing additional information about the stepper item.

package/dist/react/stepperitem/index.js

@@ -6,16 +6,18 @@ import { TAG_NAME } from '../../components/stepperitem/stepperitem.constants';
  * @tagname mdc-stepperitem
  *
  * @dependency mdc-icon
+ * @dependency mdc-spinner
  * @dependency mdc-text
  *
  * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
  *
- * @csspart status-container - The container for the status icon or step number.
+ * @csspart status-container - The container for the status icon, step number, or loading spinner.
  * @csspart label-container - The container for the label and help text.
  * @csspart help-text-container - The container for the help text and error icon when applicable.
  * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart status-spinner - The inset spinner displayed in place of the status indicator while loading.
  * @csspart step-number - The text representing the step number.
  * @csspart label - The text representing the label of the stepper item.
  * @csspart help-text - The text providing additional information about the stepper item.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.141.3",
+  "version": "0.141.5",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"