@momentum-design/components 0.133.39 → 0.134.0

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

@@ -20,6 +20,12 @@ declare class Animation extends Component {
      * @default undefined
      */
     name?: AnimationNames;
+    /**
+     * URL pointing to a Lottie JSON animation file.
+     * When provided, it takes precedence over the `name` property.
+     * @default undefined
+     */
+    src?: string;
     /**
      * How many times to loop the animation
      * - "true" - infinite
@@ -48,6 +54,11 @@ declare class Animation extends Component {
      * @internal
      */
     private lottieInstance?;
+    /**
+     * Cached animation data from the last successful fetch/import
+     * @internal
+     */
+    private cachedAnimationData?;
     /**
      * Container for the animation
      * @internal
@@ -60,9 +71,13 @@ declare class Animation extends Component {
     get animation(): AnimationItem | undefined;
     private getLoopValue;
     /**
-     * Create new lotty instance for the loaded data
+     * Create new lottie instance for the loaded data
      */
     private onLoadSuccessHandler;
+    /**
+     * Create or re-create the lottie instance with the given animation data
+     */
+    private createLottieInstance;
     /**
      * Error handler for animation loading
      */
@@ -71,6 +86,10 @@ declare class Animation extends Component {
      * Import animation data dynamically
      */
     private getAnimationData;
+    /**
+     * Fetch animation data from a URL
+     */
+    private fetchAnimationFromUrl;
     updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     /**

package/dist/components/animation/animation.component.js

@@ -91,9 +91,18 @@ class Animation extends Component {
         return true;
     }
     /**
-     * Create new lotty instance for the loaded data
+     * Create new lottie instance for the loaded data
      */
     onLoadSuccessHandler(animationData) {
+        this.cachedAnimationData = animationData;
+        this.createLottieInstance(animationData);
+        // Dispatch load event when animation ready to play
+        this.dispatchEvent(new CustomEvent('load', { bubbles: true, cancelable: true, detail: { name: this.name } }));
+    }
+    /**
+     * Create or re-create the lottie instance with the given animation data
+     */
+    createLottieInstance(animationData) {
         if (this.lottieInstance) {
             this.lottieInstance.removeEventListener('complete', this.onCompleteHandler);
             this.lottieInstance.destroy();
@@ -109,8 +118,6 @@ class Animation extends Component {
             });
             this.lottieInstance.addEventListener('complete', this.onCompleteHandler);
         }
-        // Dispatch load event when animation ready to play
-        this.dispatchEvent(new CustomEvent('load', { bubbles: true, cancelable: true, detail: { name: this.name } }));
     }
     /**
      * Error handler for animation loading
@@ -127,7 +134,10 @@ class Animation extends Component {
      * Import animation data dynamically
      */
     getAnimationData() {
-        if (this.name && animationManifest[this.name]) {
+        if (this.src) {
+            this.fetchAnimationFromUrl(this.src);
+        }
+        else if (this.name && animationManifest[this.name]) {
             // Make sure the path is point to a folder (and its sub-folders) that contains animation data only
             // otherwise bundlers (eg. webpack) will try to process everything in this folder including the types.d.ts
             const path = animationManifest[this.name].replace(/^\.\/lottie/, '');
@@ -139,14 +149,32 @@ class Animation extends Component {
             this.onLoadFailHandler(new Error(`Invalid animation name: ${this.name}`));
         }
     }
+    /**
+     * Fetch animation data from a URL
+     */
+    fetchAnimationFromUrl(url) {
+        fetch(url)
+            .then(response => {
+            if (!response.ok) {
+                throw new Error(`Failed to fetch animation from URL: ${url} (${response.status})`);
+            }
+            return response.json();
+        })
+            .then((animationData) => this.onLoadSuccessHandler(animationData))
+            .catch((error) => this.onLoadFailHandler(error));
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
-        // fetch animation data when new animation needed or any animation parameter changed
-        // note: we re-create the animation for parameter changes as well, because lottie
-        //       does not API for changing them on the fly
-        if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
+        // fetch animation data when the animation source changes
+        if (changedProperties.has('name') || changedProperties.has('src')) {
+            this.cachedAnimationData = undefined;
             this.getAnimationData();
         }
+        else if ((changedProperties.has('loop') || changedProperties.has('autoplay')) && this.cachedAnimationData) {
+            // re-create the lottie instance from cache for parameter changes,
+            // because lottie does not have an API for changing them on the fly
+            this.createLottieInstance(this.cachedAnimationData);
+        }
         if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
             this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
@@ -169,6 +197,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Animation.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Animation.prototype, "src", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -61,11 +61,12 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -73,11 +73,12 @@ import { getIconNameWithoutStyle } from './button.utils';
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 class Button extends OverflowMixin(ButtonComponentMixin(Buttonsimple)) {
     constructor() {

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

@@ -47,6 +47,8 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -63,6 +63,8 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
@@ -209,6 +211,12 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
             this.setFormValue();
+            if (this.checked) {
+                this.internals.states.add('checked');
+            }
+            else {
+                this.internals.states.delete('checked');
+            }
         }
     }
     render() {

package/dist/custom-elements.json

@@ -1846,6 +1846,44 @@
               "attribute": "autoplay",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "createLottieInstance",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create or re-create the lottie instance with the given animation data"
+            },
+            {
+              "kind": "method",
+              "name": "fetchAnimationFromUrl",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Fetch animation data from a URL"
+            },
             {
               "kind": "method",
               "name": "getAnimationData",
@@ -1925,7 +1963,18 @@
                   }
                 }
               ],
-              "description": "Create new lotty instance for the loaded data"
+              "description": "Create new lottie instance for the loaded data"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "attribute": "src",
+              "reflects": true
             }
           ],
           "events": [
@@ -1958,6 +2007,15 @@
               "default": "undefined",
               "fieldName": "name"
             },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "fieldName": "src"
+            },
             {
               "name": "loop",
               "type": {
@@ -4859,7 +4917,7 @@
               }
             },
             {
-              "description": "Borer color of the button",
+              "description": "Border color of the button",
               "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -5626,7 +5684,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
           "customElement": true,
           "events": [
             {
@@ -11373,6 +11431,12 @@
               }
             }
           ],
+          "cssStates": [
+            {
+              "description": "Active when the checkbox is checked.",
+              "name": "checked"
+            }
+          ],
           "mixins": [
             {
               "name": "KeyDownHandledMixin",
@@ -11400,7 +11464,13 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\n * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\n * where users need to make selections or express preferences.\n *\n * To create a group of checkboxes, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with custom styling.\n *\n * ## When to use\n *\n * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).\n *\n * ## Accessibility\n * - Provide clear labels that describe what the checkbox controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.\n * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n */",
+          "jsDoc": "/**\n * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\n * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\n * where users need to make selections or express preferences.\n *\n * To create a group of checkboxes, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with custom styling.\n *\n * ## When to use\n *\n * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).\n *\n * ## Accessibility\n * - Provide clear labels that describe what the checkbox controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.\n * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
+          "cssCustomStates": [
+            {
+              "name": "checked",
+              "description": "Active when the checkbox is checked."
+            }
+          ],
           "customElement": true,
           "slots": [
             {

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

@@ -58,11 +58,12 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<EventsInherited["onClickEvent"]>;

package/dist/react/button/index.js

@@ -59,11 +59,12 @@ import { TAG_NAME } from '../../components/button/button.constants';
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
+ *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -45,6 +45,8 @@ import type { Events } from '../../components/checkbox/checkbox.types';
  * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/checkbox/index.js

@@ -46,6 +46,8 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
+ *
+ * @cssstate checked - Active when the checkbox is checked.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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