@momentum-design/components 0.141.4 → 0.142.0

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

@@ -49614,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"
             },
             {
@@ -49629,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"
@@ -49749,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": ""
@@ -49762,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
@@ -49843,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"
             },
@@ -49924,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/dist/styles/glass.css

@@ -0,0 +1,54 @@
+/* 1px outline drawn as a pseudo-element, because the glass outline token is a gradient. */
+.mdc-glass-border {
+  --mdc-glass-border-color: var(--mds-color-theme-outline-glass-normal, rgba(255, 255, 255, 0.1));
+  --mdc-glass-border-radius: var(--mds-radius-theme-lg);
+
+  position: relative;
+  border-radius: var(--mdc-glass-border-radius);
+}
+
+.mdc-glass-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: var(--mdc-glass-border-color);
+  z-index: 0;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.mdc-glass-overlay-background {
+  --mdc-glass-background: var(--mds-color-theme-background-glass-heavy);
+  --mdc-glass-backdrop-filter: var(--mds-effect-backdrop-filter-blur20);
+  --mdc-glass-border-radius: var(--mds-radius-theme-lg);
+
+  position: relative;
+  border-radius: var(--mdc-glass-border-radius);
+  background: var(--mdc-glass-background);
+  backdrop-filter: var(--mdc-glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--mdc-glass-backdrop-filter);
+}
+
+/* Figma applies the radial highlight as a separate 11% layer; ::after keeps that
+   opacity applied to the resolved token values at runtime. */
+.mdc-glass-overlay-background::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0.11;
+  background: radial-gradient(85.92% 85.92% at 50.12% -1.41%,
+      var(--mds-color-theme-background-glass-radial-0) 0%,
+      var(--mds-color-theme-background-glass-radial-1) 100%);
+  pointer-events: none;
+}

package/dist/styles/gradient-border.css

@@ -0,0 +1,121 @@
+/**
+ * Gradient Border
+ *
+ * A shared style, not a component. Import this stylesheet once, then add
+ * `mdc-gradient-border-primary` or `mdc-gradient-border-secondary` to any
+ * element that should carry an AI hint border, and
+ * `mdc-gradient-border-animated` to make that gradient travel around it.
+ *
+ *   import '@momentum-design/components/dist/styles/gradient-border.css';
+ *
+ *   <div class="mdc-gradient-border-primary mdc-gradient-border-animated">…</div>
+ *
+ * Requires a Momentum theme stylesheet to be loaded for the AI hint colour
+ * tokens to resolve.
+ *
+ * The ring is a masked pseudo-element rather than a box-shadow, so it leaves
+ * box-shadow free for the focus ring and never tints translucent or glass
+ * surfaces underneath it.
+ */
+
+/* Registered so the angle is a typed <angle> and can therefore be animated.
+   A rule in a shadow root is ignored, which is why this ships as a document
+   level stylesheet; registration from here applies to shadow roots too. */
+@property --mds-gradient-border-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+/* A full turn, so engines without the Properties and Values API (Firefox below
+   128) land on a value identical to the first frame instead of jumping. */
+@keyframes mdc-gradient-border-rotate {
+  from {
+    --mds-gradient-border-angle: 0deg;
+  }
+
+  to {
+    --mds-gradient-border-angle: 360deg;
+  }
+}
+
+.mdc-gradient-border-primary,
+.mdc-gradient-border-secondary {
+  --mdc-gradient-border-width: 0.125rem;
+  --mdc-gradient-border-duration: 6s;
+  --mdc-gradient-border-iteration-count: infinite;
+}
+
+/* Opaque end to end, so the ring reads as a steady hint. */
+.mdc-gradient-border-primary {
+  --mdc-gradient-border-start-angle: 90deg;
+  --mdc-gradient-border-stops: var(--mds-color-theme-ai-hint-primary-gradient-0) 0%,
+    var(--mds-color-theme-ai-hint-primary-gradient-1) 53%, var(--mds-color-theme-ai-hint-primary-gradient-2) 100%;
+}
+
+/* First and last stops are transparent, so the ring tapers into a comet tail. */
+.mdc-gradient-border-secondary {
+  --mdc-gradient-border-start-angle: 180deg;
+  --mdc-gradient-border-stops: var(--mds-color-theme-ai-hint-secondary-gradient-0) 0%,
+    var(--mds-color-theme-ai-hint-secondary-gradient-1) 24%, var(--mds-color-theme-ai-hint-secondary-gradient-2) 41%,
+    var(--mds-color-theme-ai-hint-secondary-gradient-3) 62%, var(--mds-color-theme-ai-hint-secondary-gradient-4) 82%;
+}
+
+/* Everything below is gated: engines without the unprefixed mask (Chrome and
+   Edge below 120) parse none of it and render the element unchanged. */
+@supports (mask-composite: exclude) {
+
+  .mdc-gradient-border-primary,
+  .mdc-gradient-border-secondary {
+    position: relative;
+  }
+
+  .mdc-gradient-border-primary::after,
+  .mdc-gradient-border-secondary::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--mdc-gradient-border-width);
+    pointer-events: none;
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+
+  /* Composed in the rule that paints the ring rather than in a token or in a
+     custom property on the host: a custom property's var() is substituted
+     where it is declared, so an angle baked in further up would resolve there
+     once and never see the animation, which runs on this pseudo-element. The
+     start angle is added here too, so it also applies when static. */
+  .mdc-gradient-border-primary::after {
+    background: linear-gradient(calc(var(--mdc-gradient-border-start-angle) + var(--mds-gradient-border-angle, 0deg)),
+        var(--mdc-gradient-border-stops));
+  }
+
+  .mdc-gradient-border-secondary::after {
+    background: conic-gradient(from calc(var(--mdc-gradient-border-start-angle) + var(--mds-gradient-border-angle, 0deg)),
+        var(--mdc-gradient-border-stops));
+  }
+
+  .mdc-gradient-border-animated::after {
+    animation: var(--mdc-gradient-border-duration) linear 0ms var(--mdc-gradient-border-iteration-count) mdc-gradient-border-rotate;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mdc-gradient-border-animated::after {
+    animation: none;
+  }
+}
+
+/* Gradients are not rendered in forced-colors mode. */
+@media (forced-colors: active) {
+
+  .mdc-gradient-border-primary::after,
+  .mdc-gradient-border-secondary::after {
+    background: CanvasText;
+    animation: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.141.4",
+  "version": "0.142.0",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"
@@ -22,7 +22,9 @@
     "./components": "./dist/components/index.js",
     "./components/*": "./dist/components/*",
     "./dist/components": "./dist/components/index.js",
-    "./dist/components/*": "./dist/components/*"
+    "./dist/components/*": "./dist/components/*",
+    "./styles/*": "./dist/styles/*",
+    "./dist/styles/*": "./dist/styles/*"
   },
   "files": [
     "/dist/",