@momentum-design/components 0.30.1 → 0.31.1

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

@@ -1,6 +1,5 @@
 import Popover from './popover.component';
 import '../button';
-import '../modalcontainer';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-popover']: Popover;

package/dist/components/popover/index.js

@@ -1,6 +1,5 @@
 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

@@ -1,8 +1,7 @@
 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;
+import type { PopoverPlacement, PopoverTrigger, PopoverColor } from './popover.types';
+declare const Popover_base: 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.
@@ -10,18 +9,19 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * 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-border-color - border 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
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
- * @slot - Default slot for modal container
+ * @slot - Default slot for the popover content
  *
  */
 declare class Popover extends Popover_base {
@@ -68,7 +68,7 @@ declare class Popover extends Popover_base {
      * - **contrast**
      * @default tonal
      */
-    color: ModalContainerColor;
+    color: PopoverColor;
     /**
      * The visibility of the popover.
      * @default false
@@ -165,13 +165,20 @@ declare class Popover extends Popover_base {
      * Role of the popover
      * @default dialog
      */
-    dataRole: HTMLElement['role'];
+    role: HTMLElement['role'];
+    /**
+     * aria-labelledby for an interactive popover only, defaults to the trigger component id.
+     * Used in nested cases where the triggerComponent isn't the actual button.
+     */
+    ariaLabelledby: string | null;
+    /**
+     * aria-describedby of the popover.
+     */
+    ariaDescribedby: string | null;
     arrowElement: HTMLElement | null;
     /** @internal */
     triggerElement: HTMLElement | null;
     /** @internal */
-    containerElement: HTMLElement | null;
-    /** @internal */
     private hoverTimer;
     /** @internal */
     private isTriggerClicked;
@@ -181,6 +188,8 @@ declare class Popover extends Popover_base {
     private closeDelay;
     /** @internal */
     private utils;
+    /** @internal */
+    backdropElement: HTMLElement | null;
     constructor();
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     disconnectedCallback(): Promise<void>;

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

@@ -15,11 +15,7 @@ import styles from './popover.styles';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { popoverStack } from './popover.stack';
-import { COLOR } from '../modalcontainer/modalcontainer.constants';
-import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
-import { DataAriaDescribedbyMixin } from '../../utils/mixins/DataAriaDescribedbyMixin';
-import { DataAriaLabelledbyMixin } from '../../utils/mixins/DataAriaLabelledbyMixin';
+import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
 import { PopoverUtils } from './popover.utils';
 /**
@@ -29,21 +25,22 @@ import { PopoverUtils } from './popover.utils';
  * 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-border-color - border 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
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
- * @slot - Default slot for modal container
+ * @slot - Default slot for the popover content
  *
  */
-class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescribedbyMixin(FocusTrapMixin(Component)))) {
+class Popover extends FocusTrapMixin(Component) {
     constructor() {
         super();
         /**
@@ -186,13 +183,20 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
          * Role of the popover
          * @default dialog
          */
-        this.dataRole = DEFAULTS.ROLE;
+        this.role = DEFAULTS.ROLE;
+        /**
+         * aria-labelledby for an interactive popover only, defaults to the trigger component id.
+         * Used in nested cases where the triggerComponent isn't the actual button.
+         */
+        this.ariaLabelledby = null;
+        /**
+         * aria-describedby of the popover.
+         */
+        this.ariaDescribedby = null;
         this.arrowElement = null;
         /** @internal */
         this.triggerElement = null;
         /** @internal */
-        this.containerElement = null;
-        /** @internal */
         this.hoverTimer = null;
         /** @internal */
         this.isTriggerClicked = false;
@@ -200,6 +204,8 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
         this.openDelay = 0;
         /** @internal */
         this.closeDelay = 0;
+        /** @internal */
+        this.backdropElement = null;
         /**
          * Handles the outside click event to close the popover.
          *
@@ -211,8 +217,7 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             let insidePopoverClick = false;
             const path = event.composedPath();
             insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
-            const backdropElement = this.renderRoot.querySelector('.popover-backdrop');
-            const clickedOnBackdrop = backdropElement ? path.includes(backdropElement) : false;
+            const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
             if (!insidePopoverClick || clickedOnBackdrop) {
                 this.hidePopover();
             }
@@ -271,11 +276,7 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             this.cancelCloseDelay();
             setTimeout(() => {
                 this.visible = true;
-                PopoverEventManager.onShowPopover(this);
             }, this.openDelay);
-            if (popoverStack.peek() !== this) {
-                popoverStack.push(this);
-            }
         };
         /**
          * Hides the popover.
@@ -284,10 +285,8 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             if (popoverStack.peek() === this) {
                 setTimeout(() => {
                     this.visible = false;
-                    PopoverEventManager.onHidePopover(this);
                     this.isTriggerClicked = false;
                 }, this.closeDelay);
-                popoverStack.pop();
             }
         };
         /**
@@ -306,20 +305,20 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
     }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.containerElement = this.renderRoot.querySelector('.popover-container');
         this.utils.setupAppendTo();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
         this.setupTriggerListener();
         this.utils.setupAccessibility();
+        this.style.zIndex = `${this.zIndex}`;
         PopoverEventManager.onCreatedPopover(this);
         if (this.visible) {
-            await this.positionPopover();
+            this.positionPopover();
             await this.handleCreatePopoverFirstUpdate();
         }
     }
     async disconnectedCallback() {
         super.disconnectedCallback();
-        await this.removeEventListeners();
+        this.removeEventListeners();
         PopoverEventManager.onDestroyedPopover(this);
         popoverStack.remove(this);
     }
@@ -327,7 +326,6 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
      * Sets up the trigger event listeners based on the trigger type.
      */
     setupTriggerListener() {
-        var _a, _b;
         if (!this.triggerID)
             return;
         this.triggerElement = document.getElementById(this.triggerID);
@@ -353,8 +351,8 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
             this.triggerElement.addEventListener('mouseenter', this.showPopover);
             this.triggerElement.addEventListener('mouseleave', this.startCloseDelay);
-            (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.cancelCloseDelay);
-            (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.startCloseDelay);
+            this.addEventListener('mouseenter', this.cancelCloseDelay);
+            this.addEventListener('mouseleave', this.startCloseDelay);
             hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.cancelCloseDelay);
         }
         if (this.trigger.includes('focusin')) {
@@ -369,15 +367,14 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
      * Removes the trigger event listeners.
      */
     removeEventListeners() {
-        var _a, _b;
         if (!this.triggerElement)
             return;
         const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
         this.triggerElement.removeEventListener('click', this.togglePopoverVisible);
         this.triggerElement.removeEventListener('mouseenter', this.showPopover);
         this.triggerElement.removeEventListener('mouseleave', this.hidePopover);
-        (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.cancelCloseDelay);
-        (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.startCloseDelay);
+        this.removeEventListener('mouseenter', this.cancelCloseDelay);
+        this.removeEventListener('mouseleave', this.startCloseDelay);
         this.triggerElement.removeEventListener('focusin', this.showPopover);
         this.triggerElement.removeEventListener('focusout', this.hidePopover);
         hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.cancelCloseDelay);
@@ -412,8 +409,8 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             this.utils.setupAppendTo();
         }
         if (changedProperties.has('interactive')
-            || changedProperties.has('data-aria-label')
-            || changedProperties.has('data-aria-labelledby')) {
+            || changedProperties.has('aria-label')
+            || changedProperties.has('aria-labelledby')) {
             this.utils.setupAccessibility();
         }
     }
@@ -425,22 +422,24 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (oldValue === newValue || !this.triggerElement) {
             return;
         }
         if (newValue) {
+            if (popoverStack.peek() !== this) {
+                popoverStack.push(this);
+            }
             this.enabledFocusTrap = this.focusTrap;
             this.enabledPreventScroll = this.preventScroll;
             if (this.backdrop) {
-                const popoverBackdrop = this.renderRoot.querySelector('.popover-backdrop');
-                popoverBackdrop.style.zIndex = `${this.zIndex - 1}`;
+                this.utils.createBackdrop();
                 this.triggerElement.style.zIndex = `${this.zIndex}`;
             }
             this.positionPopover();
             await this.handleCreatePopoverFirstUpdate();
             if (this.hideOnBlur) {
-                (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focusout', this.onPopoverFocusOut);
+                this.addEventListener('focusout', this.onPopoverFocusOut);
                 if (this.trigger === 'click') {
                     this.triggerElement.style.pointerEvents = 'none';
                 }
@@ -455,10 +454,16 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             if (this.interactive) {
                 this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
             }
+            PopoverEventManager.onShowPopover(this);
         }
         else {
+            popoverStack.pop();
+            if (this.backdropElement) {
+                (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
+                this.backdropElement = null;
+            }
             if (this.hideOnBlur) {
-                (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusout', this.onPopoverFocusOut);
+                this.removeEventListener('focusout', this.onPopoverFocusOut);
                 if (this.trigger === 'click') {
                     this.triggerElement.style.pointerEvents = '';
                 }
@@ -469,14 +474,15 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             if (this.hideOnEscape) {
                 document.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            (_c = this.deactivateFocusTrap) === null || _c === void 0 ? void 0 : _c.call(this);
+            (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
             this.triggerElement.removeAttribute('aria-expanded');
             if (this.interactive) {
                 this.triggerElement.removeAttribute('aria-haspopup');
             }
             if (this.focusBackToTrigger) {
-                (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.focus();
+                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();
             }
+            PopoverEventManager.onHidePopover(this);
         }
     }
     /**
@@ -496,7 +502,7 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
      * It uses the floating-ui/dom library to calculate the position.
      */
     positionPopover() {
-        if (!this.triggerElement || !this.containerElement)
+        if (!this.triggerElement)
             return;
         const middleware = [shift()];
         let popoverOffset = this.offset;
@@ -504,7 +510,7 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             middleware.push(flip());
         }
         if (this.size) {
-            const popoverContent = this.containerElement.querySelector('[part="popover-content"]');
+            const popoverContent = this.renderRoot.querySelector('[part="popover-content"]');
             middleware.push(size({
                 apply({ availableHeight }) {
                     if (!popoverContent)
@@ -526,10 +532,10 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
             }
         }
         middleware.push(offset(popoverOffset));
-        autoUpdate(this.triggerElement, this.containerElement, async () => {
-            if (!this.triggerElement || !this.containerElement)
+        autoUpdate(this.triggerElement, this, async () => {
+            if (!this.triggerElement)
                 return;
-            const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this.containerElement, {
+            const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this, {
                 placement: this.placement,
                 middleware,
             });
@@ -544,34 +550,21 @@ class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescrib
     }
     render() {
         return html `
-      ${this.backdrop && this.visible ? html `<div class="popover-backdrop"></div>` : nothing}
-      <mdc-modalcontainer
-        class="popover-container"
-        elevation="3"
-        color=${this.color}
-        ?data-aria-modal=${this.interactive}
-        data-role="${ifDefined(this.dataRole)}"
-        data-aria-label="${ifDefined(this.interactive ? this.dataAriaLabel : undefined)}"
-        data-aria-labelledby="${ifDefined(this.interactive ? this.dataAriaLabelledby : undefined)}"
-        data-aria-describedby="${ifDefined(this.interactive ? this.dataAriaDescribedby : undefined)}"
-        style="z-index: ${this.zIndex};"
-      >
-        <div class="popover-hover-bridge"></div>
-        ${this.closeButton
+      <div class="popover-hover-bridge"></div>
+      ${this.closeButton
             ? html ` <mdc-button
-              class="popover-close"
-              prefix-icon="cancel-bold"
-              variant="tertiary"
-              size="20"
-              aria-label=${ifDefined(this.closeButtonAriaLabel)}
-              @click="${this.hidePopover}"
-            ></mdc-button>`
+            class="popover-close"
+            prefix-icon="cancel-bold"
+            variant="tertiary"
+            size="20"
+            aria-label=${ifDefined(this.closeButtonAriaLabel)}
+            @click="${this.hidePopover}"
+          ></mdc-button>`
             : nothing}
-        ${this.showArrow ? html `<div class="popover-arrow"></div>` : nothing}
-        <div part="popover-content">
-          <slot></slot>
-        </div>
-      </mdc-modalcontainer>
+      ${this.showArrow ? html `<div class="popover-arrow"></div>` : nothing}
+      <div part="popover-content">
+        <slot></slot>
+      </div>
     `;
     }
 }
@@ -669,7 +662,15 @@ __decorate([
     __metadata("design:type", Object)
 ], Popover.prototype, "closeButtonAriaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'data-role' }),
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Popover.prototype, "role", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-labelledby' }),
+    __metadata("design:type", Object)
+], Popover.prototype, "ariaLabelledby", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-describedby' }),
     __metadata("design:type", Object)
-], Popover.prototype, "dataRole", void 0);
+], Popover.prototype, "ariaDescribedby", void 0);
 export default Popover;

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

@@ -19,6 +19,10 @@ declare const TRIGGER: {
     readonly FOCUSIN: "focusin";
     readonly MANUAL: "manual";
 };
+declare const COLOR: {
+    readonly TONAL: "tonal";
+    readonly CONTRAST: "contrast";
+};
 declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
@@ -41,4 +45,4 @@ declare const DEFAULTS: {
     readonly ROLE: "dialog";
     readonly Z_INDEX: 1000;
 };
-export { TAG_NAME, POPOVER_PLACEMENT, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -1,5 +1,4 @@
 import utils from '../../utils/tag-name';
-import { COLOR } from '../modalcontainer/modalcontainer.constants';
 const TAG_NAME = utils.constructTagName('popover');
 const POPOVER_PLACEMENT = {
     LEFT_START: 'left-start',
@@ -21,6 +20,10 @@ const TRIGGER = {
     FOCUSIN: 'focusin',
     MANUAL: 'manual',
 };
+const COLOR = {
+    TONAL: 'tonal',
+    CONTRAST: 'contrast',
+};
 const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
@@ -43,4 +46,4 @@ const DEFAULTS = {
     ROLE: 'dialog',
     Z_INDEX: 1000,
 };
-export { TAG_NAME, POPOVER_PLACEMENT, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

@@ -5,12 +5,33 @@ const styles = css `
     --mdc-popover-arrow-border: 0.0625rem solid var(--mds-color-theme-outline-secondary-normal);
 
     --mdc-popover-primary-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    --mdc-popover-border-color: var(--mds-color-theme-outline-secondary-normal);
     --mdc-popover-inverted-background-color: var(--mds-color-theme-inverted-background-normal);
     --mdc-popover-inverted-border-color: var(--mds-color-theme-inverted-outline-primary-normal);
     --mdc-popover-inverted-text-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-popover-elevation-3: var(--mds-elevation-3);
+
+    display: none;
+    position: absolute;
+    box-sizing: content-box;
+    background-color: var(--mdc-popover-primary-background-color);
+    border-radius: 0.5rem;
+    border: 0.0625rem solid var(--mdc-popover-border-color);
+    filter: var(--mdc-popover-elevation-3);
+  }
+
+  :host([visible]) {
+    display: block;
+  }
+
+  :host([color='contrast']) {
+    background-color: var(--mdc-popover-inverted-background-color);
+    border-color: var(--mdc-popover-inverted-border-color);
+    color: var(--mds-color-theme-inverted-text-primary-normal);
   }
 
-  :host([color='contrast']) .popover-container {
+  :host([color='contrast']) {
+
     .popover-arrow {
       background-color: var(--mdc-popover-inverted-background-color);
       border-color: var(--mdc-popover-inverted-border-color);
@@ -21,20 +42,6 @@ const styles = css `
     }
   }
 
-  .popover-container {
-    display: none;
-    position: absolute;
-    box-sizing: content-box;
-  }
-
-  :host([visible]) .popover-container {
-    display: block;
-  }
-
-  .popover-container::part(container) {
-    padding: 0;
-  }
-
   :host::part(popover-content) {
     position: relative;
     padding: 0.75rem;
@@ -43,16 +50,6 @@ const styles = css `
     z-index: 9998;
   }
 
-  .popover-backdrop {
-    z-index: 999;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-  }
-
   .popover-hover-bridge {
     position: absolute;
     transform: translateX(-50%);

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

@@ -1,4 +1,5 @@
 import type { ValueOf } from '../../utils/types';
-import { POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
 export type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
+export type PopoverColor = ValueOf<typeof COLOR>;
 export type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;

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

@@ -45,4 +45,5 @@ export declare class PopoverUtils {
      * @param y - The y position.
      */
     updatePopoverStyle(x: number, y: number): void;
+    createBackdrop(): void;
 }

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

@@ -33,7 +33,6 @@ export class PopoverUtils {
      * @param placement - The placement of the popover.
      */
     setupHoverBridge(placement) {
-        var _a;
         const hoverBridge = this.popover.renderRoot.querySelector('.popover-hover-bridge');
         Object.assign(hoverBridge.style, {
             top: '',
@@ -42,9 +41,8 @@ export class PopoverUtils {
             bottom: '',
         });
         const bridgeSize = `calc(${this.popover.showArrow ? '0.75rem + ' : ''}${this.popover.offset}px)`;
-        const modalContainer = (_a = this.popover.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('mdc-modalcontainer');
-        const popoverHeight = modalContainer.offsetHeight || 0;
-        const popoverWidth = modalContainer.offsetWidth || 0;
+        const popoverHeight = this.popover.offsetHeight || 0;
+        const popoverWidth = this.popover.offsetWidth || 0;
         if (hoverBridge) {
             const side = placement.split('-')[0];
             switch (side) {
@@ -91,14 +89,15 @@ export class PopoverUtils {
      */
     setupAccessibility() {
         var _a, _b, _c;
+        this.popover.toggleAttribute('aria-modal', this.popover.interactive);
         if (this.popover.interactive) {
-            if (!this.popover.dataAriaLabel) {
-                this.popover.dataAriaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
+            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)
                     || '';
             }
-            if (!this.popover.dataAriaLabelledby) {
-                this.popover.dataAriaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';
+            if (!this.popover.ariaLabelledby) {
+                this.popover.ariaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';
             }
         }
     }
@@ -146,11 +145,31 @@ export class PopoverUtils {
      * @param y - The y position.
      */
     updatePopoverStyle(x, y) {
-        if (!this.popover.containerElement)
-            return;
-        Object.assign(this.popover.containerElement.style, {
+        Object.assign(this.popover.style, {
             left: `${x}px`,
             top: `${y}px`,
         });
     }
+    createBackdrop() {
+        var _a;
+        if (!this.popover.backdropElement) {
+            const backdrop = document.createElement('div');
+            backdrop.classList.add('popover-backdrop');
+            (_a = this.popover.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+        .popover-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: transparent;
+          z-index: ${this.popover.zIndex - 1};
+        }
+      `;
+            backdrop.appendChild(styleElement);
+            this.popover.backdropElement = backdrop;
+        }
+    }
 }