@mgdis/mg-components 5.5.0 → 5.6.0

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js

@@ -1,7 +1,9 @@
 import { h, Host } from '@stencil/core';
+import { OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
 import { ClassList } from '../../../../utils/components.utils';
+import { initLocales } from '../../../../locales';
 import { Direction } from '../mg-menu/mg-menu.conf';
-import { sizes, Status } from './mg-menu-item.conf';
+import { Status } from './mg-menu-item.conf';
 export class MgMenuItem {
   constructor() {
     /************
@@ -9,9 +11,9 @@ export class MgMenuItem {
      ************/
     this.name = 'mg-menu-item';
     this.navigationButton = `${this.name}__navigation-button`;
-    /************
+    /***********
      * Methods *
-     ************/
+     **********/
     /**
      * Toggle expanded prop value
      *
@@ -21,20 +23,20 @@ export class MgMenuItem {
       this.expanded = !this.expanded;
     };
     /**
-     * Does an HTMLElement contain child with given Status
+     * Does an Element have given Status
      *
-     * @param {HTMLElement} element to parse
+     * @param {Element} element to parse
      * @param {MgMenuItem['status']} status to check
      * @returns {boolean} true if element with status is found
      */
-    this.hasChildElementStatus = (element, status) => element.querySelector(`${this.name}[status="${status}"]`) !== null;
+    this.hasStatus = (element, status) => element.querySelector(`${this.name}[status="${status}"]`) !== null;
     /**
      * Is component contextual direction match the given direction
      *
      * @param {MgMenuItem['direction']} direction in parent menu
      * @returns {boolean} true is direction match the direction propertie
      */
-    this.isdirection = (direction) => this.direction === direction;
+    this.isDirection = (direction) => this.direction === direction;
     /************
      * Handlers *
      ************/
@@ -45,7 +47,7 @@ export class MgMenuItem {
      * @returns {void}
      */
     this.handleElementCLick = (event) => {
-      if (this.hasChildren || this.status === Status.DISABLED) {
+      if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
         event.preventDefault();
         event.stopPropagation();
       }
@@ -53,27 +55,49 @@ export class MgMenuItem {
       if (this.hasChildren)
         this.toggleExpanded();
     };
+    /**
+     * Handle popover element display-change event
+     *
+     * @param {CustomEvent} event popover display event
+     * @returns {void}
+     */
+    this.handlePopoverDisplay = (event) => {
+      this.expanded = event.detail;
+    };
+    /**
+     * Update displayNotificationBadge
+     * current component notification badge have priority over the slot badge when submenu contain badge
+     *
+     * @returns {void} update displayNotificationBadge value
+     */
+    this.updateDisplayNotificationBadge = () => {
+      const childMenu = this.element.querySelector('mg-menu');
+      this.displayNotificationBadge =
+        childMenu !== null &&
+          Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
+    };
+    /**
+     * Render slot
+     *
+     * @returns {HTMLElement} HTML Element
+     */
+    this.renderSlot = () => h("slot", null);
     this.href = undefined;
     this.status = Status.VISIBLE;
-    this.size = 'large';
     this.expanded = false;
+    this.size = 'regular';
     this.navigationButtonClassList = new ClassList([this.navigationButton]);
     this.direction = undefined;
     this.isInMainMenu = undefined;
     this.hasChildren = false;
+    this.displayNotificationBadge = undefined;
   }
   validateStatus(newValue, oldValue) {
     if (oldValue !== undefined) {
       this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
     }
     this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-  }
-  validateSize(newValue, oldValue) {
-    if (!sizes.includes(newValue)) {
-      throw new Error(`<${this.name}> prop "size" must be one of : ${sizes.join(', ')}.`);
-    }
-    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
-    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
+    this.statusChange.emit(newValue);
   }
   validateExpanded(newValue) {
     if (typeof newValue !== 'boolean')
@@ -87,16 +111,20 @@ export class MgMenuItem {
           item.expanded = false;
         });
       }
-      else if (newValue && this.hasChildElementStatus(this.element, Status.ACTIVE)) {
+      else if (this.hasStatus(this.element, Status.ACTIVE)) {
         // - when expanded and contain an active item parents are expended too
         subItems.forEach(item => {
-          if (this.hasChildElementStatus(item, Status.ACTIVE)) {
+          if (this.hasStatus(item, Status.ACTIVE)) {
             item.expanded = true;
           }
         });
       }
     }
   }
+  validateSize(newValue, oldValue) {
+    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
+    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
+  }
   validateHasChildren(newValue) {
     if (newValue && this.element.href !== undefined) {
       throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
@@ -111,13 +139,14 @@ export class MgMenuItem {
    * @returns {void}
    */
   componentWillLoad() {
-    // has children items that is NOT [slot="illustration"] || [slot="information"] element
+    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
     // we store only matching elements
-    this.hasChildren = Array.from(this.element.children).filter(child => !['illustration', 'information', 'label', 'metadata'].includes(child.getAttribute('slot'))).length > 0;
+    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
     // Validate props
     this.validateSize(this.size);
     this.validateStatus(this.status);
     this.validateExpanded(this.expanded);
+    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
   }
   /**
    * Check if component slots configuration
@@ -141,49 +170,67 @@ export class MgMenuItem {
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      var _a, _b;
+      var _a;
       // define menu-item context states
-      if (this.element.parentElement.nodeName === 'MG-MENU') {
-        this.direction = this.element.parentElement.direction;
-      }
-      this.isInMainMenu = this.element.parentElement.className.includes('mg-menu-item') === false;
-      const hasNextMenuItem = ((_a = this.element.nextElementSibling) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-MENU-ITEM';
-      const hasPreviousMenuItem = ((_b = this.element.previousElementSibling) === null || _b === void 0 ? void 0 : _b.nodeName) === 'MG-MENU-ITEM';
-      // manage last menu item
-      if (!hasNextMenuItem && hasPreviousMenuItem && this.isdirection(Direction.HORIZONTAL)) {
-        this.element.setAttribute('data-style-position-last', '');
-      }
+      const menu = this.element.closest('mg-menu');
+      this.direction = this.element.getAttribute(OverflowBehaviorElements.MORE) !== null || menu === null ? Direction.HORIZONTAL : menu.direction;
+      this.size = menu === null || menu === void 0 ? void 0 : menu.size;
+      this.isInMainMenu = this.element.parentElement.closest('mg-menu-item') === null;
       // when main menu item contain an active item it will get the active style
       // AND if item is in vertical menu it will be expanded
-      if (this.isInMainMenu && this.hasChildElementStatus(this.element, Status.ACTIVE)) {
+      const hasActiveChild = Array.from(this.element.children).some(element => this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null);
+      if (this.isInMainMenu && hasActiveChild) {
         this.status = Status.ACTIVE;
-        this.expanded = this.direction === Direction.VERTICAL;
+        this.expanded = this.isDirection(Direction.VERTICAL);
       }
       // manage menu items style depending to parent menu horientation
       this.element.setAttribute(`data-style-direction-${this.direction}`, '');
       this.navigationButtonClassList.add(`${this.navigationButton}--${this.direction}`);
-      // manage child items level
-      const childItems = Array.from(this.element.querySelectorAll('mg-menu-item'));
-      childItems.forEach(item => {
-        if (this.direction === Direction.VERTICAL) {
+      this.updateDisplayNotificationBadge();
+      // manage all sub levels child menu-items level with data-level attribut
+      if (this.isDirection(Direction.VERTICAL)) {
+        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
           const itemLevel = Number(item.getAttribute('data-level')) || 1;
           item.setAttribute('data-level', `${itemLevel + 1}`);
-        }
+        });
+      }
+      // manage first sub-level menu-items
+      const childItems = Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).filter(item => item.nodeName === 'MG-MENU-ITEM');
+      childItems.forEach(item => {
+        // manage child menu listener
+        new MutationObserver(() => {
+          this.updateDisplayNotificationBadge();
+        }).observe(item, { attributes: true });
       });
     }, 0);
   }
   /**
-   * Render
+   * Render ineractive element
    *
    * @returns {HTMLElement} HTML Element
    */
-  render() {
+  renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status.DISABLED, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "illustration" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), h("slot", { name: "information" })), h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "info", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
-      } }, h("mg-icon", { icon: "chevron-down" })))), h("div", { class: { [`${this.name}__collapse-container`]: true, [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isdirection(Direction.HORIZONTAL) }, hidden: !this.expanded }, h("slot", null))));
+      } }, h("mg-icon", { icon: "chevron-down" })))));
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const getContainerClasses = () => ({
+      [`${this.name}__collapse-container`]: true,
+      [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isDirection(Direction.HORIZONTAL),
+    });
+    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+      this.renderInteractiveElement(),
+      h("div", { class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
+    ])));
   }
   static get is() { return "mg-menu-item"; }
   static get encapsulation() { return "shadow"; }
@@ -211,7 +258,7 @@ export class MgMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define menu-item badge\nwhen defined menu-item contain an anchor instead of button"
+          "text": "Define menu-item href\nwhen defined menu-item contain an anchor instead of button"
         },
         "attribute": "href",
         "reflect": false
@@ -239,29 +286,6 @@ export class MgMenuItem {
         "reflect": true,
         "defaultValue": "Status.VISIBLE"
       },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "MenuItemSizeType",
-          "resolved": "\"large\" | \"medium\" | \"regular\"",
-          "references": {
-            "MenuItemSizeType": {
-              "location": "import",
-              "path": "./mg-menu-item.conf"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define menu-item size. Default: \"large\"."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'large'"
-      },
       "expanded": {
         "type": "boolean",
         "mutable": true,
@@ -284,23 +308,47 @@ export class MgMenuItem {
   }
   static get states() {
     return {
+      "size": {},
       "navigationButtonClassList": {},
       "direction": {},
       "isInMainMenu": {},
-      "hasChildren": {}
+      "hasChildren": {},
+      "displayNotificationBadge": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "statusChange",
+        "name": "status-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when status change"
+        },
+        "complexType": {
+          "original": "MgMenuItem['status']",
+          "resolved": "Status.ACTIVE | Status.DISABLED | Status.HIDDEN | Status.VISIBLE",
+          "references": {
+            "MgMenuItem": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "status",
         "methodName": "validateStatus"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
       }, {
         "propName": "expanded",
         "methodName": "validateExpanded"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
       }, {
         "propName": "hasChildren",
         "methodName": "validateHasChildren"

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -15,13 +15,14 @@ export class MgIllustratedMessage {
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const imageTags = ['img', 'svg'];
+    const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
     if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
       throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
-    else if (!isTagName(this.element.querySelector('[slot="illustration"]'), imageTags)) {
-      throw new Error(`<mg-illustrated-message> Slotted illustration must be an image: ${imageTags.join(', ')}`);
+    else if (slottedIllustrations.length !== 1) {
+      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
     }
+    slottedIllustrations[0].setAttribute('aria-hidden', 'true');
   }
   /**
    * Render

package/dist/collection/components/molecules/mg-message/mg-message.css

@@ -81,6 +81,13 @@
   top: 0;
   right: 0;
 }
+.mg-message ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+}
 
 .mg-message,
 mg-message {

package/dist/collection/components/molecules/mg-message/mg-message.js

@@ -13,22 +13,49 @@ export class MgMessage {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
+    // Manage hover
+    this.isFocused = false;
+    this.isHovered = false;
     /**
-     * Handle close button
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.handleClose = () => {
-      this.hide = true;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
-     * Hide component whith delay
+     * Clear timer
+     *
+     * @returns {void}
      */
-    this.hideWithDelay = () => {
-      if (this.delay > 0 && this.hide !== true) {
-        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-      }
-      else if (this.storedTimer !== null) {
-        clearTimeout(this.storedTimer);
-      }
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
+    /**
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
+     */
+    this.timerEvents = (event) => {
+      this.clearTimer();
+      const isMouseEvent = event.type === 'mouseenter';
+      // Needed to ensure we don't start the timer
+      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+      // Restart timer when loose focus AND mouse leave
+      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+        // Start timer if needed
+        if (!this.isFocused && !this.isHovered)
+          this.setTimer();
+      }, { once: true });
+    };
+    /**
+     * Handle close button
+     */
+    this.handleClose = () => {
+      this.hide = true;
     };
     /**
      * Get icon corresponding to variant
@@ -83,12 +110,26 @@ export class MgMessage {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      // Remove event Listener
+      ['focusin', 'mouseenter'].forEach(event => {
+        this.element.removeEventListener(event, this.timerEvents);
+      });
+      // Clear Timer
+      this.clearTimer();
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      // If delay is set
+      if (this.delay > 1) {
+        // Start timer
+        this.setTimer();
+        // Stop timer when get focus or mouse enter
+        ['focusin', 'mouseenter'].forEach(event => {
+          this.element.addEventListener(event, this.timerEvents);
+        });
+      }
     }
-    this.hideWithDelay();
   }
   /*************
    * Lifecycle *

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -15,7 +15,7 @@
   left: 0;
   z-index: 2000;
   padding: 2rem 0;
-  background-color: hsla(var(--color-light), 85%);
+  background-color: hsl(var(--color-light), 0.85);
 }
 .mg-modal mg-card {
   display: flex;
@@ -55,4 +55,11 @@
 }
 .mg-modal.mg-modal--hide {
   display: none;
+}
+.mg-modal ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -45,4 +45,11 @@
   flex-wrap: wrap;
   gap: 1rem;
   margin-left: auto;
+}
+.mg-panel ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -1,5 +1,5 @@
 :host {
-  --mg-card-padding: 1.5rem;
+  --mg-card-padding: var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));
   --mg-card-border: none;
   --mg-card-border-radius: 0.5rem;
   --mg-card-background: hsl(var(--mg-popover-background-color));
@@ -12,10 +12,12 @@
 
 .mg-popover {
   display: none;
+  padding: 1rem;
   z-index: 2000;
   color: hsl(var(--mg-popover-font-color));
 }
 .mg-popover mg-card {
+  position: relative;
   z-index: -1;
 }
 .mg-popover[data-show] {
@@ -27,35 +29,91 @@
   margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
   margin-left: 3rem;
 }
-.mg-popover__arrow, .mg-popover__arrow::before {
-  position: absolute;
-  width: 2rem;
-  height: 2rem;
-  z-index: 2000;
-  background: hsl(var(--mg-popover-background-color));
-}
 .mg-popover__arrow {
+  position: absolute;
   visibility: hidden;
+  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
 }
-.mg-popover__arrow::before {
+.mg-popover__arrow:before {
   visibility: visible;
   content: "";
-  transform: rotate(45deg);
+  position: absolute;
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
+  height: 1rem;
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
+  left: calc(var(--mg-card-border-radius) + 1rem);
+  border-right: calc(3rem / 2) solid transparent;
+  border-left: calc(3rem / 2) solid transparent;
 }
 .mg-popover[data-popper-placement^=top] > .mg-popover__arrow {
-  bottom: -6px;
+  bottom: 0.1rem;
+  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before {
+  border-top: 1rem solid hsl(var(--mg-popover-background-color));
 }
 .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  top: -6px;
+  top: 0.1rem;
+  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
+  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
+  width: 1rem;
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
+  top: calc(var(--mg-card-border-radius) + 1rem);
+  border-top: calc(3rem / 2) solid transparent;
+  border-bottom: calc(3rem / 2) solid transparent;
 }
 .mg-popover[data-popper-placement^=left] > .mg-popover__arrow {
-  right: -6px;
+  right: 0.1rem;
+  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before {
+  border-left: 1rem solid hsl(var(--mg-popover-background-color));
 }
 .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  left: -6px;
+  left: 0.1rem;
+  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
+  border-right: 1rem solid hsl(var(--mg-popover-background-color));
+}
+.mg-popover[data-popper-placement^=left-start], .mg-popover[data-popper-placement^=left-end], .mg-popover[data-popper-placement^=right-start], .mg-popover[data-popper-placement^=right-end] {
+  padding: 0 1rem;
+}
+.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow {
+  height: calc(3rem + 2 * var(--mg-card-border-radius));
+}
+.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow:before {
+  top: var(--mg-card-border-radius);
 }
 .mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem !important;
   font-size: var(--mg-popover-title-font-size) !important;
   font-weight: 600;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top] {
+  padding-bottom: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom] {
+  padding-top: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=left] {
+  padding-right: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=right] {
+  padding-left: 0;
+}
+.mg-popover ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }