@momentum-design/components 0.27.6 → 0.28.1

package/dist/components/button/button.styles.js

@@ -124,6 +124,7 @@ const styles = css `
   }
   :host([size="20"]){
     padding: 0.0625rem;
+    aspect-ratio: 1;
   }
 
   :host([color="accent"]){

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

@@ -95,6 +95,11 @@ declare class Buttonsimple extends Buttonsimple_base {
      */
     private setDisabled;
     private triggerClickEvent;
+    /**
+     * In case the button is pressed and the focus is lost while pressing,
+     * the pressed class is removed.
+     */
+    private handleBlur;
     /**
      * Handles the keydown event on the button.
      * If the key is 'Enter' or 'Space', the button is pressed.

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -80,6 +80,7 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         this.addEventListener('click', this.executeAction.bind(this));
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.handleKeyUp.bind(this));
+        this.addEventListener('blur', this.handleBlur.bind(this));
         /** @internal */
         this.internals = this.attachInternals();
     }
@@ -162,6 +163,15 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         });
         this.dispatchEvent(clickEvent);
     }
+    /**
+     * In case the button is pressed and the focus is lost while pressing,
+     * the pressed class is removed.
+     */
+    handleBlur() {
+        if (this.classList.contains('pressed')) {
+            this.classList.remove('pressed');
+        }
+    }
     /**
      * Handles the keydown event on the button.
      * If the key is 'Enter' or 'Space', the button is pressed.

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { ModalContainerColor, ModalContainerElevation, ModalContainerRole } from './modalcontainer.types';
+import type { ModalContainerColor, ModalContainerElevation } from './modalcontainer.types';
+declare const Modalcontainer_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelledbyMixin").DataAriaLabelledbyMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaDescribedbyMixin").DataAriaDescribedbyMixinInterface> & typeof Component;
 /**
  * The `mdc-modalcontainer` component is an element used to
  * display a modal container that can further be used in popover.
@@ -15,7 +16,7 @@ import type { ModalContainerColor, ModalContainerElevation, ModalContainerRole }
  *
  * @slot - Default slot for modal container
  */
-declare class Modalcontainer extends Component {
+declare class Modalcontainer extends Modalcontainer_base {
     /**
      * Color of the modalcontainer
      * - **tonal**
@@ -37,7 +38,12 @@ declare class Modalcontainer extends Component {
      * Role of the modalcontainer
      * @default dialog
      */
-    role: ModalContainerRole;
+    dataRole: HTMLElement['role'];
+    /**
+     * Aria modal of the modalcontainer
+     * @default false
+     */
+    dataAriaModal: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/modalcontainer/modalcontainer.component.js

@@ -13,6 +13,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './modalcontainer.styles';
 import { Component } from '../../models';
 import { DEFAULTS } from './modalcontainer.constants';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DataAriaDescribedbyMixin } from '../../utils/mixins/DataAriaDescribedbyMixin';
+import { DataAriaLabelledbyMixin } from '../../utils/mixins/DataAriaLabelledbyMixin';
 /**
  * The `mdc-modalcontainer` component is an element used to
  * display a modal container that can further be used in popover.
@@ -27,7 +30,7 @@ import { DEFAULTS } from './modalcontainer.constants';
  *
  * @slot - Default slot for modal container
  */
-class Modalcontainer extends Component {
+class Modalcontainer extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescribedbyMixin(Component))) {
     constructor() {
         super(...arguments);
         /**
@@ -51,22 +54,26 @@ class Modalcontainer extends Component {
          * Role of the modalcontainer
          * @default dialog
          */
-        this.role = DEFAULTS.ROLE;
+        this.dataRole = DEFAULTS.ROLE;
+        /**
+         * Aria modal of the modalcontainer
+         * @default false
+         */
+        this.dataAriaModal = DEFAULTS.ARIA_MODAL;
     }
     render() {
         return html `
-      <div 
-        id='mdc-modal-container' 
-        class='mdc-modal-container'  
-        ?contrast="${this.color === 'contrast'}"
-        role="${this.role}"
-        aria-modal='true'
-        aria-label=${ifDefined(this.ariaLabel)}
-        data-elevation="${this.elevation}"
-        >
+      <div
+        role="${ifDefined(this.dataRole)}"
+        aria-modal=${ifDefined(this.dataAriaModal === true ? 'true' : undefined)}
+        aria-label="${ifDefined(this.dataAriaLabel)}"
+        aria-labelledby="${ifDefined(this.dataAriaLabelledby)}"
+        aria-describedby="${ifDefined(this.dataAriaDescribedby)}"
+        part="container"
+      >
         <slot></slot>
       </div>
-      `;
+    `;
     }
 }
 Modalcontainer.styles = [...Component.styles, ...styles];
@@ -79,7 +86,11 @@ __decorate([
     __metadata("design:type", Number)
 ], Modalcontainer.prototype, "elevation", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Modalcontainer.prototype, "role", void 0);
+    property({ type: String, reflect: true, attribute: 'data-role' }),
+    __metadata("design:type", Object)
+], Modalcontainer.prototype, "dataRole", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-aria-modal' }),
+    __metadata("design:type", Boolean)
+], Modalcontainer.prototype, "dataAriaModal", void 0);
 export default Modalcontainer;

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

@@ -10,14 +10,11 @@ declare const ELEVATION: {
     readonly 3: 3;
     readonly 4: 4;
 };
-declare const ROLE: {
-    readonly DIALOG: "dialog";
-    readonly ALERT_DIALOG: "alertdialog";
-};
 declare const DEFAULTS: {
     readonly COLOR: "tonal";
     readonly ELEVATION: 0;
     readonly ROLE: "dialog";
+    readonly ARIA_MODAL: false;
     readonly CHILDREN: "Lorem ipsum dolor sit amet";
 };
-export { TAG_NAME, COLOR, DEFAULTS, ELEVATION, ROLE };
+export { TAG_NAME, COLOR, DEFAULTS, ELEVATION };

package/dist/components/modalcontainer/modalcontainer.constants.js

@@ -11,14 +11,11 @@ const ELEVATION = {
     3: 3,
     4: 4,
 };
-const ROLE = {
-    DIALOG: 'dialog',
-    ALERT_DIALOG: 'alertdialog',
-};
 const DEFAULTS = {
     COLOR: COLOR.TONAL,
     ELEVATION: ELEVATION[0],
-    ROLE: ROLE.DIALOG,
+    ROLE: 'dialog',
+    ARIA_MODAL: false,
     CHILDREN: 'Lorem ipsum dolor sit amet',
 };
-export { TAG_NAME, COLOR, DEFAULTS, ELEVATION, ROLE };
+export { TAG_NAME, COLOR, DEFAULTS, ELEVATION };

package/dist/components/modalcontainer/modalcontainer.styles.js

@@ -15,29 +15,29 @@ const styles = [
       --mdc-modalcontainer-elevation-4: var(--mds-elevation-4);
     }
 
-    .mdc-modal-container {
+    :host::part(container) {
       padding: 0.75rem;
       background-color: var(--mdc-modalcontainer-primary-background-color);
       border-radius: 0.5rem;
       border: 0.0625rem solid var(--mdc-modalcontainer-border-color);
     }
 
-    .mdc-modal-container[contrast] {
+    :host([color='contrast'])::part(container) {
       background-color: var(--mdc-modalcontainer-inverted-background-color);
       border: 0.0625rem solid var(--mdc-modalcontainer-inverted-border-color);
       color: var(--mdc-modalcontainer-inverted-text-color);
     }
 
-    .mdc-modal-container[data-elevation='1'] {
+    :host([elevation='1'])::part(container) {
       filter: var(--mdc-modalcontainer-elevation-1);
     }
-    .mdc-modal-container[data-elevation='2'] {
+    :host([elevation='2'])::part(container) {
       filter: var(--mdc-modalcontainer-elevation-2);
     }
-    .mdc-modal-container[data-elevation='3'] {
+    :host([elevation='3'])::part(container) {
       filter: var(--mdc-modalcontainer-elevation-3);
     }
-    .mdc-modal-container[data-elevation='4'] {
+    :host([elevation='4'])::part(container) {
       filter: var(--mdc-modalcontainer-elevation-4);
     }
   `,

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

@@ -1,5 +1,4 @@
 import type { ValueOf } from '../../utils/types';
-import { COLOR, ELEVATION, ROLE } from './modalcontainer.constants';
+import { COLOR, ELEVATION } from './modalcontainer.constants';
 export type ModalContainerColor = ValueOf<typeof COLOR>;
 export type ModalContainerElevation = ValueOf<typeof ELEVATION>;
-export type ModalContainerRole = ValueOf<typeof ROLE>;

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

@@ -0,0 +1,9 @@
+import Popover from './popover.component';
+import '../button';
+import '../modalcontainer';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-popover']: Popover;
+    }
+}
+export default Popover;

package/dist/components/popover/index.js

@@ -0,0 +1,6 @@
+import Popover from './popover.component';
+import { TAG_NAME } from './popover.constants';
+import '../button';
+import '../modalcontainer';
+Popover.register(TAG_NAME);
+export default Popover;

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

@@ -0,0 +1,256 @@
+import { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import type { PopoverPlacement, PopoverTrigger } from './popover.types';
+import type { ModalContainerColor } from '../modalcontainer/modalcontainer.types';
+declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelledbyMixin").DataAriaLabelledbyMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaDescribedbyMixin").DataAriaDescribedbyMixinInterface> & import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
+/**
+ * Popover component is a lightweight floating UI element that displays additional content when triggered.
+ * It can be used for tooltips, dropdowns, or contextual menus.
+ * The popover automatically positions itself based on available space and
+ * supports dynamic height adjustments with scrollable content when needed。
+ *
+ * @dependency mdc-button
+ * @dependency mdc-modalcontainer
+ *
+ * @tagname mdc-popover
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+declare class Popover extends Popover_base {
+    /**
+     * The unique ID of the popover.
+     */
+    id: string;
+    /**
+     * The ID of the element that triggers the popover.
+     * This attribute is required for the popover to work.
+     */
+    triggerID: string;
+    /**
+     * Determines the events that cause the Popover to show.
+     * Multiple event names should be separated by spaces.
+     * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+     * - **click**
+     * - **mouseenter**
+     * - **focusin**
+     * - **manual**
+     * @default click
+     */
+    trigger: PopoverTrigger;
+    /**
+     * The placement of the popover.
+     * - **top**
+     * - **top-start**
+     * - **top-end**
+     * - **bottom**
+     * - **bottom-start**
+     * - **bottom-end**
+     * - **left**
+     * - **left-start**
+     * - **left-end**
+     * - **right**
+     * - **right-start**
+     * - **right-end**
+     * @default bottom
+     */
+    placement: PopoverPlacement;
+    /**
+     * Color of the popover
+     * - **tonal**
+     * - **contrast**
+     * @default tonal
+     */
+    color: ModalContainerColor;
+    /**
+     * The visibility of the popover.
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * The offset of the popover.
+     * @default 4
+     */
+    offset: number;
+    /**
+     * Determines whether the focus trap is enabled.
+     * If true, focus will be restricted to the content within this component.
+     * @default false
+     */
+    focusTrap: boolean;
+    /**
+     * Prevent outside scrolling when popover show.
+     * @default false
+     */
+    preventScroll: boolean;
+    /**
+     * The arrow visibility of the popover.
+     * @default false
+     */
+    showArrow: boolean;
+    /**
+     * The close button visibility of the popover.
+     * @default false
+     */
+    closeButton: boolean;
+    /**
+     * Determines whether the popover is interactive。
+     * @default false
+     */
+    interactive: boolean;
+    /**
+     * The delay of the show/hide popover.
+     * @default 0,0
+     */
+    delay: string;
+    /**
+     * Hide popover on escape key press.
+     * @default false
+     */
+    hideOnEscape: boolean;
+    /**
+     * Hide popover on blur.
+     * @default false
+     */
+    hideOnBlur: boolean;
+    /**
+     * Hide on outside click of the popover.
+     * @default false
+     */
+    hideOnOutsideClick: boolean;
+    /**
+     * The focus back to trigger after the popover hide.
+     * @default false
+     */
+    focusBackToTrigger: boolean;
+    /**
+     * Determines whether the popover with backdrop.
+     * Other than popover and trigger element, the rest of the screen will be covered with a backdrop.
+     * @default false
+     */
+    backdrop: boolean;
+    /**
+     * Changes the placement of popover to keep it in view when scrolling.
+     * @default true
+     */
+    flip: boolean;
+    /**
+     * Changes the size of popover to keep it in view when scrolling.
+     * @default false
+     */
+    size: boolean;
+    /**
+     * The z-index of the popover.
+     * @default 1000
+     */
+    zIndex: number;
+    /**
+     * Element ID that the popover append to.
+     * @default ''
+     */
+    appendTo: string;
+    /**
+     * aria-label attribute to be set for close button accessibility.
+     * @default null
+     */
+    closeButtonAriaLabel: string | null;
+    /**
+     * Role of the popover
+     * @default dialog
+     */
+    dataRole: HTMLElement['role'];
+    arrowElement: HTMLElement | null;
+    /** @internal */
+    triggerElement: HTMLElement | null;
+    /** @internal */
+    containerElement: HTMLElement | null;
+    /** @internal */
+    private hoverTimer;
+    /** @internal */
+    private isTriggerClicked;
+    /** @internal */
+    private openDelay;
+    /** @internal */
+    private closeDelay;
+    /** @internal */
+    private utils;
+    constructor();
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    /**
+     * Sets up the trigger event listeners based on the trigger type.
+     */
+    private setupTriggerListener;
+    /**
+     * Removes the trigger event listeners.
+     */
+    private removeEventListeners;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * Handles the outside click event to close the popover.
+     *
+     * @param event - The mouse event.
+     */
+    private onOutsidePopoverClick;
+    /**
+     * Handles the escape keydown event to close the popover.
+     *
+     * @param event - The keyboard event.
+     */
+    private onEscapeKeydown;
+    /**
+     * Handles the popover focus out event.
+     *
+     * @param event - The focus event.
+     */
+    private onPopoverFocusOut;
+    /**
+     * Handles the popover visibility change and position the popover.
+     * Handles the exit event to close the popover.
+     *
+     * @param oldValue - The old value of the visible property.
+     * @param newValue - The new value of the visible property.
+     */
+    private isOpenUpdated;
+    /**
+     * Starts the close delay timer.
+     * If the popover is not interactive, it will close the popover after the delay.
+     */
+    private startCloseDelay;
+    /**
+     * Cancels the close delay timer.
+     */
+    private cancelCloseDelay;
+    /**
+     * Shows the popover.
+     */
+    showPopover: () => void;
+    /**
+     * Hides the popover.
+     */
+    hidePopover: () => void;
+    /**
+     * Toggles the popover visibility.
+     */
+    togglePopoverVisible: () => void;
+    /**
+     * Sets the focusable elements inside the popover.
+     */
+    private handleCreatePopoverFirstUpdate;
+    /**
+     * Positions the popover based on the trigger element.
+     * It also handles the flip, size and arrow placement.
+     * It uses the floating-ui/dom library to calculate the position.
+     */
+    private positionPopover;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Popover;