@momentum-design/components 0.142.1 → 0.142.2

package/dist/custom-elements.json

@@ -19626,8 +19626,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -19869,8 +19869,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {

package/dist/styles/gradient-border.css

@@ -5,13 +5,16 @@
  * `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.
+ * Finite playback settles to a stop. Add `mdc-gradient-border-fade-in` and/or
+ * `mdc-gradient-border-fade-out` for optional opacity transitions.
  *
  *   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.
+ * tokens to resolve. Load the motion token stylesheet and apply `mds-motion`
+ * on the element or an ancestor to use the system's easing tokens.
  *
  * 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
@@ -27,6 +30,31 @@
   initial-value: 0deg;
 }
 
+/* A finite number resolves normally; `infinite` falls back to zero. */
+@property --mdc-gradient-border-finite-turns {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --mdc-gradient-border-settle-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --mdc-gradient-border-fade-in-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --mdc-gradient-border-fade-out-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
 /* 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 {
@@ -39,11 +67,64 @@
   }
 }
 
+@keyframes mdc-gradient-border-settle {
+  from {
+    --mdc-gradient-border-settle-angle: 0deg;
+    animation-timing-function: linear;
+  }
+
+  /* Entrance starts with slope 5. Covering 15/17 of the travel in 60% of
+     the time joins that curve to the linear phase at the same speed. */
+  60% {
+    --mdc-gradient-border-settle-angle: calc(360deg * var(--mdc-gradient-border-finite-turns) * 15 / 17);
+  }
+
+  to {
+    --mdc-gradient-border-settle-angle: calc(360deg * var(--mdc-gradient-border-finite-turns));
+  }
+}
+
+@keyframes mdc-gradient-border-fade-in {
+  from {
+    --mdc-gradient-border-fade-in-opacity: 0;
+  }
+
+  to {
+    --mdc-gradient-border-fade-in-opacity: 1;
+  }
+}
+
+@keyframes mdc-gradient-border-fade-out {
+  from {
+    --mdc-gradient-border-fade-out-opacity: 1;
+  }
+
+  to {
+    --mdc-gradient-border-fade-out-opacity: calc(1 - var(--mdc-gradient-border-finite));
+  }
+}
+
 .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;
+  --mdc-gradient-border-fade-in-duration: var(--mds-motion-duration-slow, 600ms);
+  --mdc-gradient-border-fade-out-duration: var(--mds-motion-duration-slow, 600ms);
+  --mdc-gradient-border-fade-in-name: none;
+  --mdc-gradient-border-fade-out-name: none;
+  --mdc-gradient-border-fade-in-requested: 0s;
+  --mdc-gradient-border-fade-out-requested: 0s;
+}
+
+.mdc-gradient-border-fade-in {
+  --mdc-gradient-border-fade-in-name: mdc-gradient-border-fade-in;
+  --mdc-gradient-border-fade-in-requested: max(0s, var(--mdc-gradient-border-fade-in-duration));
+}
+
+.mdc-gradient-border-fade-out {
+  --mdc-gradient-border-fade-out-name: mdc-gradient-border-fade-out;
+  --mdc-gradient-border-fade-out-requested: max(0s, var(--mdc-gradient-border-fade-out-duration));
 }
 
 /* Opaque end to end, so the ring reads as a steady hint. */
@@ -90,12 +171,12 @@
      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)),
+    background: linear-gradient(calc(var(--mdc-gradient-border-start-angle) + var(--mdc-gradient-border-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)),
+    background: conic-gradient(from calc(var(--mdc-gradient-border-start-angle) + var(--mdc-gradient-border-angle, var(--mds-gradient-border-angle, 0deg))),
         var(--mdc-gradient-border-stops));
   }
 
@@ -104,9 +185,45 @@
   }
 }
 
+@supports (mask-composite: exclude) and (width: round(up, 1px, 1px)) {
+  .mdc-gradient-border-fade-in::after {
+    opacity: 0;
+  }
+
+  .mdc-gradient-border-animated::after {
+    --mdc-gradient-border-finite-turns: var(--mdc-gradient-border-iteration-count);
+    --mdc-gradient-border-finite: min(1, round(up, var(--mdc-gradient-border-finite-turns), 1));
+    --mdc-gradient-border-total-duration: calc(var(--mdc-gradient-border-duration) * var(--mdc-gradient-border-finite-turns));
+    --mdc-gradient-border-fade-in-time: min(
+      var(--mdc-gradient-border-fade-in-requested),
+      max(var(--mdc-gradient-border-total-duration), calc(var(--mdc-gradient-border-fade-in-requested) * (1 - var(--mdc-gradient-border-finite))))
+    );
+    --mdc-gradient-border-fade-out-time: min(
+      var(--mdc-gradient-border-fade-out-requested),
+      max(0s, calc(var(--mdc-gradient-border-total-duration) - var(--mdc-gradient-border-fade-in-time)))
+    );
+    --mdc-gradient-border-angle: calc(
+      var(--mds-gradient-border-angle) * (1 - var(--mdc-gradient-border-finite)) +
+      var(--mdc-gradient-border-settle-angle)
+    );
+
+    opacity: calc(var(--mdc-gradient-border-fade-in-opacity) * var(--mdc-gradient-border-fade-out-opacity));
+    animation:
+      var(--mdc-gradient-border-duration) linear 0ms var(--mdc-gradient-border-iteration-count) mdc-gradient-border-rotate,
+      var(--mdc-gradient-border-total-duration) var(--mds-motion-easing-entrance, cubic-bezier(0, 0, 0.2, 1))
+      0ms 1 forwards mdc-gradient-border-settle,
+      var(--mdc-gradient-border-fade-in-time) var(--mds-motion-easing-entrance, cubic-bezier(0, 0, 0.2, 1))
+      0ms 1 both var(--mdc-gradient-border-fade-in-name),
+      var(--mdc-gradient-border-fade-out-time) var(--mds-motion-easing-exit, cubic-bezier(0.5, 0, 1, 1))
+      calc(var(--mdc-gradient-border-total-duration) - var(--mdc-gradient-border-fade-out-time))
+      1 forwards var(--mdc-gradient-border-fade-out-name);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .mdc-gradient-border-animated::after {
     animation: none;
+    opacity: 1;
   }
 }
 
@@ -117,5 +234,6 @@
   .mdc-gradient-border-secondary::after {
     background: CanvasText;
     animation: none;
+    opacity: 1;
   }
-}
+}

package/package.json

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