@momentum-design/components 0.135.1 → 0.136.0

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

@@ -106,11 +106,14 @@ declare class Toast extends Toast_base {
      * It is used to notify that the toast should be closed.
      */
     private closeToast;
+    private updateDataExpanded;
     private toggleDetailVisibility;
     private updateDetailedSlotPresence;
     private updateFooterButtonsPresence;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    protected updated(changedProperties: PropertyValues): void;
     protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
+    private canRenderToggleButton;
     private shouldRenderToggleButton;
     private renderToggleDetailButton;
     protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;

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

@@ -93,15 +93,18 @@ class Toast extends FooterMixin(Component) {
         });
         this.dispatchEvent(closeEvent);
     }
-    toggleDetailVisibility() {
-        this.isDetailVisible = !this.isDetailVisible;
-        if (this.isDetailVisible) {
+    updateDataExpanded() {
+        if (this.isDetailVisible || !this.canRenderToggleButton()) {
             this.setAttribute('data-expanded', 'true');
         }
         else {
             this.removeAttribute('data-expanded');
         }
     }
+    toggleDetailVisibility() {
+        this.isDetailVisible = !this.isDetailVisible;
+        this.updateDataExpanded();
+    }
     updateDetailedSlotPresence() {
         var _a, _b;
         this.hasDetailedSlot = (_b = (_a = this.detailedElements) === null || _a === void 0 ? void 0 : _a.some(el => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })) !== null && _b !== void 0 ? _b : false;
@@ -118,11 +121,17 @@ class Toast extends FooterMixin(Component) {
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.updateDetailedSlotPresence();
+        this.updateDataExpanded();
         await this.updateComplete;
         if (hasOverflowMixin(this.headerTextElement)) {
             this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
         }
     }
+    updated(changedProperties) {
+        if (changedProperties.has('showMoreText') || changedProperties.has('showLessText')) {
+            this.updateDataExpanded();
+        }
+    }
     renderIcon(iconName) {
         if (!iconName)
             return nothing;
@@ -130,8 +139,11 @@ class Toast extends FooterMixin(Component) {
       <mdc-icon name="${iconName}" size="${DEFAULTS.PREFIX_ICON_SIZE}" part="toast-prefix-icon"></mdc-icon>
     `;
     }
+    canRenderToggleButton() {
+        return !!(this.showMoreText && this.showLessText);
+    }
     shouldRenderToggleButton() {
-        return (this.hasDetailedSlot || this.hasOverflowingHeaderText) && this.showMoreText && this.showLessText;
+        return this.canRenderToggleButton() && (this.hasDetailedSlot || this.hasOverflowingHeaderText);
     }
     renderToggleDetailButton() {
         if (!this.shouldRenderToggleButton())

package/dist/components/toast/toast.styles.js

@@ -55,7 +55,7 @@ const styles = css `
   :host::part(toast-header) {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     align-self: stretch;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -72,7 +72,7 @@ const styles = css `
   }
 
   :host([data-expanded='true'])::part(toast-header) {
-    -webkit-line-clamp: unset;
+    -webkit-line-clamp: 6;
   }
 
   :host::part(footer) {

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": {
@@ -50613,6 +50633,11 @@
               "attribute": "aria-label",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "canRenderToggleButton",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "closeButtonAriaLabel",
@@ -50777,6 +50802,11 @@
               "name": "toggleDetailVisibility",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "updateDataExpanded",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "updateDetailedSlotPresence",

package/package.json

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