@momentum-design/components 0.72.0 → 0.73.1

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

@@ -10,6 +10,7 @@ import { AnimationNames, LoopType } from './animation.types';
  *
  * @tagname mdc-animation
  *
+ * @event load - (React: onLoad) This event is dispatched when the animation is loaded
  * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
  * @event error - (React: onError) This event is dispatched when animation loading failed
  */

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

@@ -23,6 +23,7 @@ import { DEFAULTS } from './animation.constants';
  *
  * @tagname mdc-animation
  *
+ * @event load - (React: onLoad) This event is dispatched when the animation is loaded
  * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
  * @event error - (React: onError) This event is dispatched when animation loading failed
  */
@@ -104,6 +105,8 @@ 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

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

@@ -1,6 +1,8 @@
 import type AnimationNames from '@momentum-design/animations/dist/types/types';
 /** Event mapping for React */
 interface Events {
+    /** This event is dispatched when the animation is loaded */
+    onLoadEvent: Event;
     /** This event is dispatched when all animation loops completed */
     onCompleteEvent: Event;
     /** This event is dispatched when animation loading failed */

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

@@ -1,6 +1,7 @@
 import type { CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { AriaCheckedStates, Indicator } from './menuitemcheckbox.types';
+import type { Indicator } from './menuitemcheckbox.types';
+import type { AriaCheckedStates } from '../menusection/menusection.types';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -13,7 +13,8 @@ import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
 import { TOGGLE_SIZE } from '../toggle/toggle.constants';
-import { ARIA_CHECKED_STATES, DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
+import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 import styles from './menuitemcheckbox.styles';
 /**
  * A menuitemcheckbox component is a checkable menuitem.

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

@@ -1,8 +1,4 @@
 declare const TAG_NAME: "mdc-menuitemcheckbox";
-declare const ARIA_CHECKED_STATES: {
-    readonly FALSE: "false";
-    readonly TRUE: "true";
-};
 declare const INDICATOR: {
     readonly CHECKBOX: "checkbox";
     readonly CHECKMARK: "checkmark";
@@ -12,4 +8,4 @@ declare const DEFAULTS: {
     readonly ARIA_CHECKED: "false";
     readonly INDICATOR: "checkbox";
 };
-export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.js

@@ -1,9 +1,6 @@
 import utils from '../../utils/tag-name';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 const TAG_NAME = utils.constructTagName('menuitemcheckbox');
-const ARIA_CHECKED_STATES = {
-    FALSE: 'false',
-    TRUE: 'true',
-};
 const INDICATOR = {
     CHECKBOX: 'checkbox',
     CHECKMARK: 'checkmark',
@@ -13,4 +10,4 @@ const DEFAULTS = {
     ARIA_CHECKED: ARIA_CHECKED_STATES.FALSE,
     INDICATOR: INDICATOR.CHECKBOX,
 };
-export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemcheckbox/menuitemcheckbox.types.d.ts

@@ -1,10 +1,9 @@
 import { ValueOf } from '../../utils/types';
-import { ARIA_CHECKED_STATES, INDICATOR } from './menuitemcheckbox.constants';
-type AriaCheckedStates = ValueOf<typeof ARIA_CHECKED_STATES>;
+import { INDICATOR } from './menuitemcheckbox.constants';
 type Indicator = ValueOf<typeof INDICATOR>;
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events, AriaCheckedStates, Indicator };
+export type { Events, Indicator };

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

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import { AriaChecked } from './menuitemradio.types';
+import type { AriaCheckedStates } from '../menusection/menusection.types';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>
@@ -26,7 +26,7 @@ declare class MenuItemRadio extends MenuItem {
      * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
      * @default 'false'
      */
-    ariaChecked: AriaChecked;
+    ariaChecked: AriaCheckedStates;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
-import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>

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

@@ -1,6 +1,2 @@
 declare const TAG_NAME: "mdc-menuitemradio";
-declare const ARIA_CHECKED_STATES: {
-    readonly TRUE: "true";
-    readonly FALSE: "false";
-};
-export { TAG_NAME, ARIA_CHECKED_STATES };
+export { TAG_NAME };

package/dist/components/menuitemradio/menuitemradio.constants.js

@@ -1,7 +1,3 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menuitemradio');
-const ARIA_CHECKED_STATES = {
-    TRUE: 'true',
-    FALSE: 'false',
-};
-export { TAG_NAME, ARIA_CHECKED_STATES };
+export { TAG_NAME };

package/dist/components/menuitemradio/menuitemradio.types.d.ts

@@ -1,9 +1,6 @@
-import { ValueOf } from '../../utils/types';
-import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
-type AriaChecked = ValueOf<typeof ARIA_CHECKED_STATES>;
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events, AriaChecked };
+export type { Events };

package/dist/components/menusection/index.d.ts

@@ -0,0 +1,7 @@
+import MenuSection from './menusection.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menusection']: MenuSection;
+    }
+}
+export default MenuSection;

package/dist/components/menusection/index.js

@@ -0,0 +1,4 @@
+import MenuSection from './menusection.component';
+import { TAG_NAME } from './menusection.constants';
+MenuSection.register(TAG_NAME);
+export default MenuSection;

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

@@ -0,0 +1,58 @@
+import { CSSResult } from 'lit';
+import type MenuItemRadio from '../menuitemradio/menuitemradio.component';
+import { Component } from '../../models';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+declare class MenuSection extends Component {
+    /**
+     * Query assigned `menuitemradio` elements from the default slot.
+     * These elements are used to enforce single-selection behavior.
+     *
+     * @internal
+     */
+    radios: MenuItemRadio[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles `click` events within the component.
+     * Delegates logic to `toggleCheckedState()` based on the clicked element.
+     *
+     * @param event - The click event from a child menu item
+     *
+     * @internal
+     */
+    private handleClick;
+    /**
+     * Handles `keydown` events within the component.
+     * Activates menu items when the Enter or Space keys are pressed.
+     *
+     * @param event - The keyboard event from a child menu item
+     *
+     * @internal
+     */
+    private handleKeydown;
+    /**
+     * Toggles the `aria-checked` state on a target menu item based on its tag name.
+     * - For checkboxes, toggles the checked state.
+     * - For radios, ensures only one item is selected in the group.
+     *
+     * @param target - The event target element to update
+     *
+     * @internal
+     */
+    private toggleCheckedState;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: CSSResult[];
+}
+export default MenuSection;

package/dist/components/menusection/menusection.component.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
+import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
+import { ARIA_CHECKED_STATES } from './menusection.constants';
+import { Component } from '../../models';
+import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+class MenuSection extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Handles `click` events within the component.
+         * Delegates logic to `toggleCheckedState()` based on the clicked element.
+         *
+         * @param event - The click event from a child menu item
+         *
+         * @internal
+         */
+        this.handleClick = (event) => {
+            this.toggleCheckedState(event.target);
+        };
+        /**
+         * Handles `keydown` events within the component.
+         * Activates menu items when the Enter or Space keys are pressed.
+         *
+         * @param event - The keyboard event from a child menu item
+         *
+         * @internal
+         */
+        this.handleKeydown = (event) => {
+            if (event.key !== KEYS.ENTER && event.key !== KEYS.SPACE)
+                return;
+            if (event.key === KEYS.SPACE) {
+                event.preventDefault(); // Prevent page scroll
+            }
+            this.toggleCheckedState(event.target);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', ROLE.GROUP);
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    /**
+     * Toggles the `aria-checked` state on a target menu item based on its tag name.
+     * - For checkboxes, toggles the checked state.
+     * - For radios, ensures only one item is selected in the group.
+     *
+     * @param target - The event target element to update
+     *
+     * @internal
+     */
+    toggleCheckedState(target) {
+        if (!(target instanceof HTMLElement))
+            return;
+        // Do not toggle state for disabled elements
+        if (target.hasAttribute('disabled'))
+            return;
+        const tagName = target.tagName.toLowerCase();
+        const currentChecked = target.getAttribute('aria-checked') === ARIA_CHECKED_STATES.TRUE;
+        switch (tagName) {
+            case MENUITEMCHECKBOX_TAGNAME:
+                target.setAttribute('aria-checked', String(!currentChecked));
+                break;
+            case MENUITEMRADIO_TAGNAME:
+                if (currentChecked)
+                    return;
+                this.radios.forEach((radio) => {
+                    const newCheckedState = radio === target ? ARIA_CHECKED_STATES.TRUE : ARIA_CHECKED_STATES.FALSE;
+                    radio.setAttribute('aria-checked', newCheckedState);
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+MenuSection.styles = [...Component.styles];
+__decorate([
+    queryAssignedElements({ selector: `${MENUITEMRADIO_TAGNAME}:not([disabled])` }),
+    __metadata("design:type", Array)
+], MenuSection.prototype, "radios", void 0);
+export default MenuSection;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-menusection";
+declare const ARIA_CHECKED_STATES: {
+    readonly TRUE: "true";
+    readonly FALSE: "false";
+};
+export { ARIA_CHECKED_STATES, TAG_NAME };

package/dist/components/menusection/menusection.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menusection');
+const ARIA_CHECKED_STATES = {
+    TRUE: 'true',
+    FALSE: 'false',
+};
+export { ARIA_CHECKED_STATES, TAG_NAME };

package/dist/components/menusection/menusection.types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '../../utils/types';
+import { ARIA_CHECKED_STATES } from './menusection.constants';
+type AriaCheckedStates = ValueOf<typeof ARIA_CHECKED_STATES>;
+export type { AriaCheckedStates };

package/dist/components/menusection/menusection.types.js

@@ -0,0 +1 @@
+export {};