@momentum-design/components 0.141.1 → 0.141.2

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

@@ -22,6 +22,8 @@ import type { SkeletonVariant } from './skeleton.types';
  * 
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  * 
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/dist/components/skeleton/skeleton.component.js

@@ -17,6 +17,8 @@ import styles from './skeleton.styles';
  *
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  *
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/dist/components/skeleton/skeleton.styles.js

@@ -1,9 +1,11 @@
 import { css } from 'lit';
 const styles = css `
   :host {
+    --mdc-skeleton-animation-delay: 0s;
     --mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
     --mdc-skeleton-height: 100%;
     --mdc-skeleton-width: 100%;
+    position: relative;
     display: block;
     overflow: hidden;
     background-color: var(--mdc-skeleton-background-color);
@@ -11,32 +13,38 @@ const styles = css `
     width: var(--mdc-skeleton-width);
   }
 
-  :host([motion]) {
+  :host([motion])::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    pointer-events: none;
     background-image: linear-gradient(
       90deg,
       var(--mds-color-theme-background-skeleton-shimmer-0) 0%,
       var(--mds-color-theme-background-skeleton-shimmer-1) 50%,
       var(--mds-color-theme-background-skeleton-shimmer-2) 100%
     );
-    background-repeat: no-repeat;
-    background-size: 200% 100%;
     animation: skeleton-shimmer 2s linear infinite;
+    animation-delay: var(--mdc-skeleton-animation-delay);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([motion]) {
+    :host([motion])::before {
       animation: none;
-      background-position: 50% 0;
+      transform: translateX(-25%);
     }
   }
 
   @keyframes skeleton-shimmer {
     0% {
-      background-position: 200% 0;
+      transform: translateX(-100%);
     }
 
     100% {
-      background-position: -200% 0;
+      transform: translateX(100%);
     }
   }
 

package/dist/custom-elements.json

@@ -47338,6 +47338,10 @@
           "description": "",
           "name": "Skeleton",
           "cssProperties": [
+            {
+              "description": "Delay of the two-second shimmer cycle (default: 0s). Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.",
+              "name": "--mdc-skeleton-animation-delay"
+            },
             {
               "description": "background color of the skeleton",
               "name": "--mdc-skeleton-background-color"
@@ -47416,7 +47420,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-skeleton",
-          "jsDoc": "/**\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
+          "jsDoc": "/**\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).\n *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
           "customElement": true
         }
       ],

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

@@ -19,6 +19,8 @@ import Component from '../../components/skeleton';
  * 
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  * 
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/dist/react/skeleton/index.js

@@ -7,6 +7,8 @@ import { TAG_NAME } from '../../components/skeleton/skeleton.constants';
  *
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  *
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/package.json

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