@momentum-design/components 0.135.2 → 0.136.1

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

@@ -24,6 +24,11 @@ import type { SkeletonVariant } from './skeleton.types';
  * @cssproperty --mdc-skeleton-width - width of the skeleton
  */
 declare class Skeleton extends Component {
+    /**
+     * When true, displays the skeleton with motion applied.
+     * @default false
+     */
+    motion?: boolean;
     /**
      * The variant of skeleton to display
      * - **rectangular**: Default rectangular shape with 0.25rem border radius

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

@@ -24,6 +24,11 @@ import styles from './skeleton.styles';
 class Skeleton extends Component {
     constructor() {
         super(...arguments);
+        /**
+         * When true, displays the skeleton with motion applied.
+         * @default false
+         */
+        this.motion = DEFAULTS.MOTION;
         /**
          * The variant of skeleton to display
          * - **rectangular**: Default rectangular shape with 0.25rem border radius
@@ -63,6 +68,10 @@ class Skeleton extends Component {
  * Styles associated with this component.
  */
 Skeleton.styles = [...Component.styles, styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Skeleton.prototype, "motion", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -6,6 +6,7 @@ declare const SKELETON_VARIANTS: {
     readonly ROUNDED: "rounded";
 };
 declare const DEFAULTS: {
+    readonly MOTION: false;
     readonly VARIANT: "rectangular";
 };
 export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS };

package/dist/components/skeleton/skeleton.constants.js

@@ -7,6 +7,7 @@ const SKELETON_VARIANTS = {
     ROUNDED: 'rounded',
 };
 const DEFAULTS = {
+    MOTION: false,
     VARIANT: SKELETON_VARIANTS.RECTANGULAR,
 };
 export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS };

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

@@ -11,6 +11,35 @@ const styles = css `
     width: var(--mdc-skeleton-width);
   }
 
+  :host([motion]) {
+    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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([motion]) {
+      animation: none;
+      background-position: 50% 0;
+    }
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
   :host([variant='rectangular']) {
     border-radius: 0.25rem;
   }

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

@@ -111,7 +111,7 @@ declare class Toast extends Toast_base {
     private updateDetailedSlotPresence;
     private updateFooterButtonsPresence;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
-    protected updated(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
     protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
     private canRenderToggleButton;
     private shouldRenderToggleButton;

package/dist/components/toast/toast.component.js

@@ -122,15 +122,17 @@ class Toast extends FooterMixin(Component) {
         super.firstUpdated(changedProperties);
         this.updateDetailedSlotPresence();
         this.updateDataExpanded();
-        await this.updateComplete;
-        if (hasOverflowMixin(this.headerTextElement)) {
-            this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
-        }
     }
-    updated(changedProperties) {
+    async updated(changedProperties) {
         if (changedProperties.has('showMoreText') || changedProperties.has('showLessText')) {
             this.updateDataExpanded();
         }
+        if (changedProperties.has('headerText')) {
+            await this.updateComplete;
+            if (hasOverflowMixin(this.headerTextElement)) {
+                this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
+            }
+        }
     }
     renderIcon(iconName) {
         if (!iconName)

package/dist/custom-elements.json

@@ -44195,6 +44195,17 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "motion",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When true, displays the skeleton with motion applied.",
+              "default": "false",
+              "attribute": "motion",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -44208,6 +44219,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "motion",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When true, displays the skeleton with motion applied.",
+              "default": "false",
+              "fieldName": "motion"
+            },
             {
               "name": "variant",
               "type": {

package/package.json

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