@momentum-design/components 0.84.3 → 0.84.4

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

@@ -58,7 +58,7 @@ class MenuItemRadio extends MenuItem {
             const container = this.closest(`${MENUSECTION_TAGNAME}, ${MENUPOPOVER_TAGNAME}`);
             if (container) {
                 const radios = Array.from(container.querySelectorAll(this.tagName));
-                radios.forEach((item) => {
+                radios.forEach(item => {
                     const radio = item;
                     if (radio.name === this.name) {
                         radio.ariaChecked = ARIA_CHECKED_STATES.FALSE;

package/dist/components/menupopover/menupopover.component.js

@@ -14,10 +14,10 @@ import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.cons
 import { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
+import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
 import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
-import { popoverStack } from '../popover/popover.stack';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -84,15 +84,15 @@ class MenuPopover extends Popover {
         var _a;
         const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
-        return allAssignedElements.map((node) => {
+        return allAssignedElements
+            .map(node => {
             if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
-                return Array.from(node.children)
-                    .filter((child) => isValidMenuItem(child));
+                return Array.from(node.children).filter(child => isValidMenuItem(child));
             }
             return isValidMenuItem(node) ? node : [];
         })
             .flat()
-            .filter((node) => !!node && !node.hasAttribute('disabled'));
+            .filter(node => !!node && !node.hasAttribute('disabled'));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -115,7 +115,7 @@ class MenuPopover extends Popover {
         await super.firstUpdated(changedProperties);
         // Reset all tabindex to -1 and set the tabindex of the first menu item to 0
         if (this.menuItems.length > 0) {
-            this.menuItems.forEach((menuitem) => menuitem.setAttribute('tabindex', '-1'));
+            this.menuItems.forEach(menuitem => menuitem.setAttribute('tabindex', '-1'));
             this.menuItems[0].setAttribute('tabindex', '0');
         }
         (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
@@ -126,7 +126,7 @@ class MenuPopover extends Popover {
      * @returns - The index of the current menu item in the `menuItems` array.
      */
     getCurrentIndex(target) {
-        return this.menuItems.findIndex((node) => node === target);
+        return this.menuItems.findIndex(node => node === target);
     }
     /**
      * Resets the tabindex of the currently focused menu item and sets focus to a new menu item.
@@ -176,8 +176,8 @@ class MenuPopover extends Popover {
     handleMouseClick(event) {
         const target = event.target;
         const triggerId = target.getAttribute('id');
-        if (isActiveMenuItem(target) // menuitemcheckbox and menuitemradio are not supposed to close the popover
-            && !this.hasSubmenuWithTriggerId(triggerId)) {
+        if (isActiveMenuItem(target) && // menuitemcheckbox and menuitemradio are not supposed to close the popover
+            !this.hasSubmenuWithTriggerId(triggerId)) {
             this.closeAllMenuPopovers();
         }
     }
@@ -229,13 +229,13 @@ class MenuPopover extends Popover {
             }
             case KEYS.ARROW_DOWN: {
                 // Move focus to the next menu item
-                const newIndex = (currentIndex + 1) === this.menuItems.length ? 0 : (currentIndex + 1);
+                const newIndex = currentIndex + 1 === this.menuItems.length ? 0 : currentIndex + 1;
                 this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                 break;
             }
             case KEYS.ARROW_UP: {
                 // Move focus to the prev menu item
-                const newIndex = (currentIndex - 1) === -1 ? (this.menuItems.length - 1) : (currentIndex - 1);
+                const newIndex = currentIndex - 1 === -1 ? this.menuItems.length - 1 : currentIndex - 1;
                 this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                 break;
             }

package/dist/components/menupopover/menupopover.utils.d.ts

@@ -6,4 +6,4 @@
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
 declare const isValidPopover: (menuItem: Element | null) => boolean;
 declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
-export { isValidMenuItem, isValidPopover, isActiveMenuItem, };
+export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/menupopover/menupopover.utils.js

@@ -9,13 +9,8 @@ import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
  */
 const isValidMenuItem = (menuItem) => {
     var _a, _b;
-    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
-        .includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
+    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
 };
 const isValidPopover = (menuItem) => { var _a; return ((_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
-const isActiveMenuItem = (menuItem) => {
-    var _a, _b;
-    return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME
-        && !menuItem.hasAttribute('disabled');
-};
-export { isValidMenuItem, isValidPopover, isActiveMenuItem, };
+const isActiveMenuItem = (menuItem) => { var _a, _b; return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME && !menuItem.hasAttribute('disabled'); };
+export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/navitem/navitem.component.js

@@ -10,8 +10,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './navitem.styles';
-import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navitem.constants';
 import providerUtils from '../../utils/provider';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
@@ -19,6 +17,8 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import MenuItem from '../menuitem/menuitem.component';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
+import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navitem.constants';
+import styles from './navitem.styles';
 /**
  * `mdc-navitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
@@ -166,7 +166,8 @@ class NavItem extends IconNameMixin(MenuItem) {
       <mdc-text
         type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
         tagname=${VALID_TEXT_TAGS.SPAN}
-        part="text-container">
+        part="text-container"
+      >
         ${label}
       </mdc-text>
     `;
@@ -174,12 +175,7 @@ class NavItem extends IconNameMixin(MenuItem) {
     renderArrowIcon(showLabel) {
         const arrowClass = showLabel ? '' : 'arrow';
         return html `
-      <mdc-icon 
-        name=${ICON_NAME.RIGHT_ARROW} 
-        length-unit="rem" 
-        part="trailing-arrow" 
-        class="${arrowClass}">
-      </mdc-icon>
+      <mdc-icon name=${ICON_NAME.RIGHT_ARROW} length-unit="rem" part="trailing-arrow" class="${arrowClass}"> </mdc-icon>
     `;
     }
     renderBadge(showLabel) {
@@ -189,11 +185,12 @@ class NavItem extends IconNameMixin(MenuItem) {
             return nothing;
         }
         return html `
-      <mdc-badge 
+      <mdc-badge
         class="${badgeClass}"
-        type="${ifDefined(this.badgeType)}" 
-        counter="${ifDefined(this.counter)}" 
-        max-counter="${this.maxCounter}">
+        type="${ifDefined(this.badgeType)}"
+        counter="${ifDefined(this.counter)}"
+        max-counter="${this.maxCounter}"
+      >
       </mdc-badge>
     `;
     }
@@ -202,12 +199,7 @@ class NavItem extends IconNameMixin(MenuItem) {
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
         return html `
       <div part="icon-container">
-        <mdc-icon
-          name="${this.iconName}"
-          size="1.5"
-          length-unit="rem"
-          part="icon"
-        ></mdc-icon>
+        <mdc-icon name="${this.iconName}" size="1.5" length-unit="rem" part="icon"></mdc-icon>
         ${!this.showLabel ? this.renderBadge(this.showLabel) : nothing}
       </div>
       ${this.showLabel ? html `${this.renderTextLabel(this.label)}${this.renderBadge(this.showLabel)}` : nothing}

package/dist/components/navitem/navitem.styles.js

@@ -1,146 +1,150 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-navitem-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-navitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-navitem-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-navitem-expanded-width: 12.75rem;
-
-    /* Background color when in default (normal) or active state */
-    --mdc-navitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
-    --mdc-navitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-navitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
-    --mdc-navitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
-    --mdc-navitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
-    --mdc-navitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
-    --mdc-navitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
- 
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    color: var(--mdc-navitem-color);
-    border-color: var(--mdc-navitem-border-color);
-    border-radius: 1.25rem;
-    cursor: pointer;
-  }
-
-  :host(:dir(ltr)) {
-    margin-left: 1rem;
-  }
-
-  :host(:dir(rtl)) {
-    margin-right: 1rem;
-  }
-
-  :host([show-label]) {
-    width: var(--mdc-navitem-expanded-width);
-  }
-
-  :host([active]) {
-    background-color: var(--mdc-navitem-rest-active-background-color);
-  }
-  
-  :host([disabled]) {
-    color: var(--mdc-navitem-disabled-color);
-    background-color: var(--mdc-navitem-disabled-background-color);
-    pointer-events: none;
-  }
-
-  :host([active][disabled]) {
-    background-color: var(--mdc-navitem-disabled-active-background-color);
-    color: var(--mdc-navitem-disabled-color);
-  }
-  
-  :host(:hover) {
-    background-color: var(--mdc-navitem-hover-background-color);
-  }
-
-  :host(:hover[active]) {
-    background-color: var(--mdc-navitem-hover-active-background-color);
-  }
-
-  :host(:active) {
-    background-color: var(--mdc-navitem-pressed-background-color);
-  }
-
-  :host(:active[active]) {
-    background-color: var(--mdc-navitem-pressed-active-background-color);
-  }
-
-  :host::before {
-    content: '';
-    display: block;
-    position: absolute;
-    background-color: var(--mdc-navitem-color);
-    width: 0.25rem;
-    height: 1rem;
-    pointer-events: none;
-    visibility: hidden;
-  }
-
-  :host(:dir(ltr))::before {
-    left: -1rem;
-    border-radius: 0 0.25rem 0.25rem 0;
-  }
-
-  :host(:dir(rtl))::before {
-    right: -1rem;
-    border-radius: 0.25rem 0 0 0.25rem;
-  }
-
-  :host([active])::before {
-    visibility: visible;
-  }
-
-  :host([disabled])::before {
-    background-color: var(--mdc-navitem-disabled-color);
-  }
-
-  :host::part(text-container) {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  :host::part(icon-container) {
-    position: relative;
-  }
-  
-  :host(:dir(ltr)) .badge {
-    position: absolute;
-    right: -0.375rem;
-    top: -0.375rem;
-  }
-
-  :host(:dir(rtl)) .badge {
-    position: absolute;
-    left: -0.375rem;
-    top: -0.375rem;
-  }
-
-  :host(:not([show-label]))::part(trailing-arrow) {
-    --mdc-icon-size: 0.75rem;
-  }
-
-  :host([show-label])::part(trailing-arrow) {
-    --mdc-icon-size: 1rem;
-    flex-shrink: 0;
-  }
-
-  :host(:dir(ltr)) .arrow {
-    position: absolute;
-    right: -0.75rem;
-    top: 0.875rem;
-  }
-
-  :host(:dir(rtl)) .arrow {
-    position: absolute;
-    left: -0.75rem;
-    top: 0.875rem;
-  }
-`, ...hostFocusRingStyles()];
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-navitem-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-navitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-navitem-border-color: var(--mds-color-theme-outline-button-normal);
+      --mdc-navitem-expanded-width: 12.75rem;
+
+      /* Background color when in default (normal) or active state */
+      --mdc-navitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
+      --mdc-navitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+      --mdc-navitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
+      --mdc-navitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+      --mdc-navitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
+      --mdc-navitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-navitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
+
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      color: var(--mdc-navitem-color);
+      border-color: var(--mdc-navitem-border-color);
+      border-radius: 1.25rem;
+      cursor: pointer;
+    }
+
+    :host(:dir(ltr)) {
+      margin-left: 1rem;
+    }
+
+    :host(:dir(rtl)) {
+      margin-right: 1rem;
+    }
+
+    :host([show-label]) {
+      width: var(--mdc-navitem-expanded-width);
+    }
+
+    :host([active]) {
+      background-color: var(--mdc-navitem-rest-active-background-color);
+    }
+
+    :host([disabled]) {
+      color: var(--mdc-navitem-disabled-color);
+      background-color: var(--mdc-navitem-disabled-background-color);
+      pointer-events: none;
+    }
+
+    :host([active][disabled]) {
+      background-color: var(--mdc-navitem-disabled-active-background-color);
+      color: var(--mdc-navitem-disabled-color);
+    }
+
+    :host(:hover) {
+      background-color: var(--mdc-navitem-hover-background-color);
+    }
+
+    :host(:hover[active]) {
+      background-color: var(--mdc-navitem-hover-active-background-color);
+    }
+
+    :host(:active) {
+      background-color: var(--mdc-navitem-pressed-background-color);
+    }
+
+    :host(:active[active]) {
+      background-color: var(--mdc-navitem-pressed-active-background-color);
+    }
+
+    :host::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: var(--mdc-navitem-color);
+      width: 0.25rem;
+      height: 1rem;
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    :host(:dir(ltr))::before {
+      left: -1rem;
+      border-radius: 0 0.25rem 0.25rem 0;
+    }
+
+    :host(:dir(rtl))::before {
+      right: -1rem;
+      border-radius: 0.25rem 0 0 0.25rem;
+    }
+
+    :host([active])::before {
+      visibility: visible;
+    }
+
+    :host([disabled])::before {
+      background-color: var(--mdc-navitem-disabled-color);
+    }
+
+    :host::part(text-container) {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host::part(icon-container) {
+      position: relative;
+    }
+
+    :host(:dir(ltr)) .badge {
+      position: absolute;
+      right: -0.375rem;
+      top: -0.375rem;
+    }
+
+    :host(:dir(rtl)) .badge {
+      position: absolute;
+      left: -0.375rem;
+      top: -0.375rem;
+    }
+
+    :host(:not([show-label]))::part(trailing-arrow) {
+      --mdc-icon-size: 0.75rem;
+    }
+
+    :host([show-label])::part(trailing-arrow) {
+      --mdc-icon-size: 1rem;
+      flex-shrink: 0;
+    }
+
+    :host(:dir(ltr)) .arrow {
+      position: absolute;
+      right: -0.75rem;
+      top: 0.875rem;
+    }
+
+    :host(:dir(rtl)) .arrow {
+      position: absolute;
+      left: -0.75rem;
+      top: 0.875rem;
+    }
+  `,
+    ...hostFocusRingStyles(),
+];
 export default styles;

package/dist/components/navitemlist/navitemlist.component.js

@@ -8,13 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
-import styles from './navitemlist.styles';
 import MenuBar from '../menubar/menubar.component';
 import { MenuMixin } from '../../utils/mixins/MenuMixin';
 import { ORIENTATION } from '../menubar/menubar.constants';
 import providerUtils from '../../utils/provider';
 import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
+import styles from './navitemlist.styles';
 /**
  * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
  * It provides the structural foundation for organizing vertical nav items and
@@ -54,7 +54,7 @@ class NavItemList extends MenuMixin(MenuBar) {
          *
          * @internal
          */
-        this.findNav = (navs, navId) => navs.find((nav) => nav.navId === navId);
+        this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/components/optgroup/optgroup.component.js

@@ -29,7 +29,7 @@ import styles from './optgroup.styles';
  */
 class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
     setDisabledForAllOptions() {
-        this.options.forEach((element) => {
+        this.options.forEach(element => {
             if (this.disabled) {
                 element.setAttribute('disabled', '');
             }
@@ -46,14 +46,17 @@ class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
     }
     render() {
         var _a;
-        const headerText = this.label ? html `
-      <mdc-text
-        id="${HEADER_ID}"
-        part="header-text"
-        type="${TYPE.BODY_MIDSIZE_BOLD}"
-        tagname="${VALID_TEXT_TAGS.SPAN}"
-      >${this.label}</mdc-text>
-    ` : nothing;
+        const headerText = this.label
+            ? html `
+          <mdc-text
+            id="${HEADER_ID}"
+            part="header-text"
+            type="${TYPE.BODY_MIDSIZE_BOLD}"
+            tagname="${VALID_TEXT_TAGS.SPAN}"
+            >${this.label}</mdc-text
+          >
+        `
+            : nothing;
         return html `
       <div
         role="${ROLE.GROUP}"

package/dist/components/option/option.component.js

@@ -78,22 +78,22 @@ class Option extends FormInternalsMixin(ListItem) {
         }
     }
     render() {
-        const prefixIconContent = this.prefixIcon ? html `
-      <div part="leading-icon">
-        <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
-      </div>
-    ` : nothing;
-        const selectedIcon = this.selected ? html `
-      <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
-    ` : nothing;
+        const prefixIconContent = this.prefixIcon
+            ? html `
+          <div part="leading-icon">
+            <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
+          </div>
+        `
+            : nothing;
+        const selectedIcon = this.selected
+            ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
+            : nothing;
         return html `
       ${prefixIconContent}
       <div part="leading-text">
         ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
       </div>
-      <div part="trailing">
-        ${selectedIcon}
-      </div>
+      <div part="trailing">${selectedIcon}</div>
       <slot part="default-slot" @slotchange="${this.handleDefaultSlotChange}"></slot>
     `;
     }

package/dist/components/option/option.styles.js

@@ -11,7 +11,7 @@ const styles = css `
     height: 2.25rem;
   }
   :host::part(default-slot) {
-    display: none; 
+    display: none;
   }
   :host::part(leading-icon),
   :host::part(trailing) {

package/dist/components/popover/popover.component.js

@@ -469,7 +469,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         }
         if (changedProperties.has('trigger')) {
             const triggers = this.trigger.split(' ');
-            const validTriggers = triggers.filter((trigger) => Object.values(TRIGGER).includes(trigger));
+            const validTriggers = triggers.filter(trigger => Object.values(TRIGGER).includes(trigger));
             this.setAttribute('trigger', validTriggers.length > 0 ? this.trigger : DEFAULTS.TRIGGER);
             this.removeEventListeners();
             this.setupTriggerListener();
@@ -483,9 +483,9 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         if (changedProperties.has('append-to')) {
             this.utils.setupAppendTo();
         }
-        if (changedProperties.has('interactive')
-            || changedProperties.has('aria-label')
-            || changedProperties.has('aria-labelledby')) {
+        if (changedProperties.has('interactive') ||
+            changedProperties.has('aria-label') ||
+            changedProperties.has('aria-labelledby')) {
             this.utils.setupAccessibility();
         }
         if (changedProperties.has('disableAriaExpanded')) {

package/dist/components/popover/popover.stack.js

@@ -43,7 +43,7 @@ class PopoverStack {
      * @param popover - Popover instance
      */
     remove(popover) {
-        this.stack = this.stack.filter((item) => item !== popover);
+        this.stack = this.stack.filter(item => item !== popover);
     }
     /**
      * Clears the stack

package/dist/components/popover/popover.styles.js

@@ -37,7 +37,6 @@ const styles = css `
   }
 
   :host([color='contrast']) {
-
     .popover-arrow {
       background-color: var(--mdc-popover-inverted-background-color);
       border-color: var(--mdc-popover-inverted-border-color);

package/dist/components/popover/popover.utils.js

@@ -13,7 +13,7 @@ export class PopoverUtils {
      */
     setupDelay() {
         try {
-            const [openDelay, closeDelay] = this.popover.delay.split(',').map((delay) => {
+            const [openDelay, closeDelay] = this.popover.delay.split(',').map(delay => {
                 const parsed = parseInt(delay, 10);
                 if (Number.isNaN(parsed) || parsed < 0) {
                     throw new Error(`Invalid delay value: ${delay}`);
@@ -98,9 +98,8 @@ export class PopoverUtils {
         }
         if (this.popover.interactive) {
             if (!this.popover.ariaLabel) {
-                this.popover.ariaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
-                    || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent)
-                    || '';
+                this.popover.ariaLabel =
+                    ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel) || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent) || '';
             }
             if (!this.popover.ariaLabelledby) {
                 this.popover.ariaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';