@mgdis/mg-components 5.7.0 → 5.8.0

package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js

@@ -31,6 +31,7 @@ export const icons = {
   'bell': () => (h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
   'briefcase': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
   'briefcase-outline': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
+  'building-outline': () => (h("path", { fill: "currentColor", d: "M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z" })),
   'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
   'calendar': () => (h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
   'calendar-outline': () => (h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
@@ -146,6 +147,7 @@ export const icons = {
   'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
   'pen-circle': () => (h("path", { fill: "currentColor", d: "M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7" })),
   'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'pen-fancy-files-outline': () => (h("path", { fill: "currentColor", d: "M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z" })),
   'pen-fancy-outline': () => (h("path", { fill: "currentColor", d: "M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z" })),
   'phone': () => (h("path", { fill: "currentColor", d: "M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z" })),
   'picture': () => (h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
@@ -164,6 +166,8 @@ export const icons = {
     h("path", { key: "tags-2", fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
   ],
   'thumb-up': () => (h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
+  'thumbtack': () => (h("path", { fill: "currentColor", d: "M8.91 2 7.71 5.594 2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09 8.91 2Z" })),
+  'thumbtack-outline': () => (h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2 7.71 5.594 2.364 7.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z" })),
   'trash': () => [
     h("path", { key: "trash-1", fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
     h("path", { key: "trash-2", fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
@@ -174,6 +178,10 @@ export const icons = {
   'upload': () => (h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
   'user': () => (h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
   'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
+  'user-pen-fancy-outline': () => [
+    h("path", { fill: "currentColor", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
+    h("path", { fill: "currentColor", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
+  ],
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'user-question-outline': () => (h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -157,6 +157,7 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.popper.update();
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -188,10 +189,13 @@ export class MgTooltip {
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
     // In this case we wrap the mg-button into a div to enable the tooltip
-    if (slotElement.tagName === 'MG-BUTTON') {
+    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
       new MutationObserver(mutationList => {
-        if (mutationList.some(mutation => mutation.attributeName === 'aria-disabled')) {
+        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
+          // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
+          // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
+          this.resetGuard();
           this.initTooltip(slotElement, interactiveElement);
         }
       }).observe(slotElement, { attributes: true });

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

@@ -6,19 +6,6 @@ export var Direction;
   Direction["VERTICAL"] = "vertical";
   Direction["HORIZONTAL"] = "horizontal";
 })(Direction || (Direction = {}));
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-export const isMoreItem = (element) => {
-  var _a, _b, _c;
-  const item = element;
-  return (item === undefined ||
-    (typeof item === 'object' &&
-      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
-};
 /**
  * List of all possibles sizes
  */

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

@@ -1,7 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { OverflowBehavior, OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
-import { Direction, isMoreItem, sizes } from './mg-menu.conf';
-import { initLocales } from '../../../../locales';
+import { Direction, sizes } from './mg-menu.conf';
 export class MgMenu {
   constructor() {
     /************
@@ -45,45 +43,23 @@ export class MgMenu {
       });
     };
     /**
-     * render mg-menu-more
+     * render mg-item-more
      *
-     * @returns {HTMLElement} formated mg-menu-item element
-     */
-    this.renderMgMenuMore = () => {
-      const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-      this.menuItems.forEach((child) => {
-        const proxy = child.cloneNode(true);
-        moreElement.querySelector('mg-menu').appendChild(proxy);
-      });
-      const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-      Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
-        // manage click on proxy to mirror it on initial element
-        proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        });
-        // manage status change miror in proxy
-        allMenuItem[index].addEventListener('status-change', (event) => {
-          proxy.setAttribute('status', event.detail);
-        });
-      });
-      this.element.appendChild(moreElement);
-      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-    };
-    /**
-     * Render mg-menu-item more element for overflow behavior
-     *
-     * @returns {HTMLElement} rendered mg-menu-item more element
+     * @returns {void}
      */
-    this.renderMgMenuItemMore = () => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      return (h("mg-menu-item", { "data-overflow-more": true }, h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    this.renderMgItemMore = () => {
+      // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
+      // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
+      const item = 'mg-item-more';
+      const mgItemMore = document.createElement(item);
+      Object.assign(mgItemMore, this.itemMore);
+      this.element.appendChild(mgItemMore);
     };
     this.label = undefined;
     this.direction = Direction.HORIZONTAL;
-    this.moreitem = undefined;
+    this.itemMore = undefined;
     this.size = 'regular';
     this.isChildMenu = undefined;
-    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -95,12 +71,9 @@ export class MgMenu {
       throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
     }
   }
-  validateMoreItem(newValue) {
+  validateItemMore(newValue) {
     if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
-    }
-    else if (newValue !== undefined && !isMoreItem(newValue)) {
-      throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
+      throw new Error(`<${this.name}> prop "itemMore" must be paired with direction ${Direction.HORIZONTAL}.`);
     }
   }
   validateSize(newValue) {
@@ -117,11 +90,9 @@ export class MgMenu {
    * @returns {void}
    */
   componentWillLoad() {
-    this.messages = initLocales(this.element).messages.plusMenu;
-    // validation
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
-    this.validateMoreItem(this.moreitem);
+    this.validateItemMore(this.itemMore);
     this.validateSize(this.size);
   }
   /**
@@ -137,36 +108,38 @@ export class MgMenu {
       // store all menu-items
       this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
-      if (this.hasOverflow && isMoreItem(this.moreitem))
-        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
+      // add mg-item-more to manage OverflowBehavior
+      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
+        this.renderMgItemMore();
+      // use mutation observer to improve reactivity
+      new MutationObserver(entries => {
+        const mgItemMore = this.element.querySelector('mg-item-more');
+        // prevent infinit loop by exclude mg-item-more deletion entry
+        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
+          return;
+        else if (mgItemMore !== null) {
+          // render a new mg-item-more
+          mgItemMore.remove();
+          this.renderMgItemMore();
+        }
+      }).observe(this.element, { childList: true, characterData: true, subtree: true });
     }, 0);
   }
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender() {
-    // add menu items listeners
     this.initMenuItemsListeners();
   }
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback() {
-    if (this.hasOverflow)
-      this.overflowBehavior.disconnect();
-  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
   }
   static get is() { return "mg-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -222,14 +195,14 @@ export class MgMenu {
         "reflect": true,
         "defaultValue": "Direction.HORIZONTAL"
       },
-      "moreitem": {
+      "itemMore": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "MoreItemType",
-          "resolved": "{ mgIcon?: { icon: string; }; slotLabel?: { label?: string; display?: boolean; }; size?: \"regular\" | \"large\" | \"medium\"; }",
+          "original": "ItemMoreType",
+          "resolved": "{ size: \"regular\" | \"large\" | \"medium\"; icon: IconType; slotlabel: SlotLabelType; }",
           "references": {
-            "MoreItemType": {
+            "ItemMoreType": {
               "location": "import",
               "path": "./mg-menu.conf"
             }
@@ -239,7 +212,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Customize mg-menu \"more element\"\nUsed with direction: 'vertical' to manage overflow"
+          "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"
         }
       },
       "size": {
@@ -269,8 +242,7 @@ export class MgMenu {
   }
   static get states() {
     return {
-      "isChildMenu": {},
-      "hasOverflow": {}
+      "isChildMenu": {}
     };
   }
   static get elementRef() { return "element"; }
@@ -282,8 +254,8 @@ export class MgMenu {
         "propName": "direction",
         "methodName": "validateDirection"
       }, {
-        "propName": "moreitem",
-        "methodName": "validateMoreItem"
+        "propName": "itemMore",
+        "methodName": "validateItemMore"
       }, {
         "propName": "size",
         "methodName": "validateSize"

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

@@ -28,7 +28,7 @@
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding: 1rem 2rem;
-  height: calc(3.8rem);
+  height: 3.8rem;
 }
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -50,7 +50,7 @@
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding: 1rem 3rem;
-  height: calc(5.1rem);
+  height: 5.1rem;
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -72,7 +72,7 @@
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding: 1rem 4rem;
-  height: calc(7.1rem);
+  height: 7.1rem;
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),

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

@@ -1,6 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList, createID } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
 import { Direction } from '../mg-menu/mg-menu.conf';
 import { Status } from './mg-menu-item.conf';
@@ -34,9 +33,91 @@ export class MgMenuItem {
      * Is component contextual direction match the given direction
      *
      * @param {MgMenuItem['direction']} direction in parent menu
+     * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
      * @returns {boolean} true is direction match the direction propertie
      */
-    this.isDirection = (direction) => this.direction === direction;
+    this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
+    /**
+     * 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);
+    };
+    /**
+     * Method to control if one of component children have active status
+     *
+     * @returns {boolean} truthy if component has active child
+     */
+    this.hasActiveChild = () => {
+      var _a;
+      return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null);
+    };
+    /**
+     * Validate slots
+     *
+     * @param {boolean} guard prevent action whith guard. Default: false.
+     * @returns {void}
+     */
+    this.validateSlot = (guard = false) => {
+      // slot title AND metadata validation
+      // add title on label AND metada slots due to text-overflow on these element
+      if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
+        throw new Error(`<${this.name}> slot "label" is required.`);
+      ['label', 'metadata'].forEach(slot => {
+        Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
+          if (element.textContent.trim().length < 1)
+            throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
+          if ((guard && element.getAttribute('title') === null) || !guard)
+            element.setAttribute('title', element.textContent);
+        });
+      });
+    };
+    /**
+     * Update status
+     *
+     * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+     * @returns {void}
+     */
+    this.updateStatus = (guard = []) => {
+      if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
+        this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
+      }
+    };
+    /**
+     * Init event-listeners
+     *
+     * @returns {void}
+     */
+    this.initListeners = () => {
+      var _a;
+      // manage first sub-level menu-items
+      Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(item => {
+        if (item.nodeName === 'MG-MENU-ITEM') {
+          // manage child menu listener
+          item.addEventListener('status-change', () => {
+            this.updateStatus();
+          });
+        }
+      });
+    };
+    /**
+     * Get mg-popover identifier
+     *
+     * @returns {MgPopover['identifier']} generated mg-popover identifier
+     */
+    this.getPopoverIdentifier = () => `${this.identifier}-popover`;
+    /**
+     * Condition to know if component should display a mg-popover
+     *
+     * @returns {boolean} truthy if component display popover
+     */
+    this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
     /************
      * Handlers *
      ************/
@@ -64,35 +145,13 @@ export class MgMenuItem {
     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);
-    };
-    /**
-     * Method to control if one of component children have active status
-     *
-     * @returns {boolean} truthy if component has active child
-     */
-    this.hasActiveChild = () => {
-      var _a;
-      return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || [])
-        .filter(element => element.nodeName === 'MG-MENU-ITEM')
-        .some((element) => this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null);
-    };
     /**
      * Render slot
      *
      * @returns {HTMLElement} HTML Element
      */
     this.renderSlot = () => h("slot", null);
+    this.identifier = createID('mg-menu-item');
     this.href = undefined;
     this.status = Status.VISIBLE;
     this.expanded = false;
@@ -100,6 +159,7 @@ export class MgMenuItem {
     this.navigationButtonClassList = new ClassList([this.navigationButton]);
     this.direction = undefined;
     this.isInMainMenu = undefined;
+    this.isItemMore = undefined;
     this.hasChildren = false;
     this.displayNotificationBadge = undefined;
   }
@@ -136,11 +196,33 @@ export class MgMenuItem {
     this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
     this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
   }
+  validateDirection(newValue) {
+    // manage menu items style depending to parent menu horientation
+    this.element.setAttribute(`data-style-direction-${newValue}`, '');
+    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
+    // manage all sub levels child menu-items level with data-level attribut
+    if (this.isDirection(Direction.VERTICAL, newValue)) {
+      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
+      });
+    }
+  }
   validateHasChildren(newValue) {
     if (newValue && this.element.href !== undefined) {
       throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
     }
   }
+  /**
+   * Render popover clickoutside guard for content slot
+   *
+   * @returns {void}
+   */
+  updatePopoverGuard() {
+    if (this.displayPopover())
+      Array.from(this.element.children)
+        .filter((child) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
+        .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+  }
   /*************
    * Lifecycle *
    *************/
@@ -153,11 +235,13 @@ export class MgMenuItem {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
     // we store only matching elements
     this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
+    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
+    this.isItemMore = this.element.dataset.overflowMore !== undefined;
     // Validate props
-    this.validateSize(this.size);
     this.validateStatus(this.status);
     this.validateExpanded(this.expanded);
-    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
+    // Validate states
+    this.validateSize(this.size);
   }
   /**
    * Check if component slots configuration
@@ -165,63 +249,36 @@ export class MgMenuItem {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
-    // slot title AND metadata validation
-    // add title on label AND metada slots due to text-overflow on these element
-    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
-      throw new Error(`<${this.name}> slot "label" is required.`);
-    ['label', 'metadata'].forEach(slot => {
-      Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-        if (element.textContent.trim().length < 1)
-          throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
-        if (element.getAttribute('title') === null)
-          element.setAttribute('title', element.textContent);
-      });
-    });
+    // validation
+    this.validateSlot(true);
     // update props and states after componentDidLoad hook
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      var _a;
       // define menu-item context states
       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;
+      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;
+      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
+      if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
+        this.size = menu.size;
+      if (this.isItemMore)
+        this.size = this.element.dataset.size;
       // 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.hasActiveChild()) {
-        this.status = Status.ACTIVE;
-        if (this.isInMainMenu)
-          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}`);
+      if (this.hasActiveChild() && this.isInMainMenu)
+        this.expanded = this.isDirection(Direction.VERTICAL);
+      this.updateStatus([Status.ACTIVE]);
       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 => {
-          item.dataset.level = `${(Number(item.dataset.level) || 1) + 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 => {
-        const updateStatus = () => {
-          if (![Status.HIDDEN, Status.DISABLED].includes(this.status)) {
-            this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
-          }
-        };
-        // manage child menu listener
-        item.addEventListener('status-change', () => {
-          updateStatus();
-        });
-        new MutationObserver(mutationsList => {
-          if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
-            updateStatus();
-          this.updateDisplayNotificationBadge();
-        }).observe(item, { attributes: true });
-      });
+      this.updatePopoverGuard();
+      // manage child dom changes with mutationObserver and listzners
+      this.initListeners();
+      new MutationObserver(mutationsList => {
+        if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+          this.updateStatus();
+        if (mutationsList.some(mutation => mutation.type === 'characterData'))
+          this.validateSlot();
+        this.updateDisplayNotificationBadge();
+      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
     }, 0);
   }
   /**
@@ -247,7 +304,7 @@ export class MgMenuItem {
       [`${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()))) : ([
+    return (h(Host, { role: !this.isItemMore && 'menuitem', "aria-haspopup": !this.isItemMore && this.hasChildren.toString() }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
       h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
     ])));
@@ -266,6 +323,24 @@ export class MgMenuItem {
   }
   static get properties() {
     return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Identifier is used to control mg-popover\nDefault: createID('mg-menu-item');"
+        },
+        "attribute": "identifier",
+        "reflect": false,
+        "defaultValue": "createID('mg-menu-item')"
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -332,6 +407,7 @@ export class MgMenuItem {
       "navigationButtonClassList": {},
       "direction": {},
       "isInMainMenu": {},
+      "isItemMore": {},
       "hasChildren": {},
       "displayNotificationBadge": {}
     };
@@ -369,6 +445,9 @@ export class MgMenuItem {
       }, {
         "propName": "size",
         "methodName": "validateSize"
+      }, {
+        "propName": "direction",
+        "methodName": "validateDirection"
       }, {
         "propName": "hasChildren",
         "methodName": "validateHasChildren"

package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js

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