@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/components/mg-menu-item2.js

@@ -14,377 +14,377 @@ import { d as defineCustomElement$1 } from './mg-popover-content2.js';
  */
 var ElementPosition;
 (function (ElementPosition) {
-  ElementPosition["FIRST"] = "first";
-  ElementPosition["LAST"] = "last";
+    ElementPosition["FIRST"] = "first";
+    ElementPosition["LAST"] = "last";
 })(ElementPosition || (ElementPosition = {}));
 /**
  * Available menu item status
  */
 var Status;
 (function (Status) {
-  Status["VISIBLE"] = "visible";
-  Status["HIDDEN"] = "hidden";
-  Status["DISABLED"] = "disabled";
-  Status["ACTIVE"] = "active";
+    Status["VISIBLE"] = "visible";
+    Status["HIDDEN"] = "hidden";
+    Status["DISABLED"] = "disabled";
+    Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
 
-const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6 * 10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction-vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction-vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
 
 const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.statusChange = createEvent(this, "status-change", 7);
-    this.itemLoaded = createEvent(this, "item-loaded", 7);
-    /************
-     * Internal *
-     ************/
-    this.name = 'mg-menu-item';
-    this.navigationButton = 'mg-c-menu-item__navigation-button';
-    /***********
-     * Methods *
-     **********/
-    /**
-     * Toggle expanded prop value
-     */
-    this.toggleExpanded = () => {
-      this.expanded = !this.expanded;
-    };
-    /**
-     * Does an Element have given Status
-     * @param mgMenuItemElement - to parse
-     * @param status - to check
-     * @returns true if element with status is found
-     */
-    this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
-    /**
-     * Is component contextual direction match the given direction
-     * @param direction - in parent menu
-     * @param compareWith - direction to compare with. Default: `this.direction`
-     * @returns true is direction match the direction propertie
-     */
-    this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
-    /**
-     * Update displayNotificationBadge
-     * current component notification badge have priority over the slot badge when submenu contain badge
-     */
-    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 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 guard - prevent action whith guard. Default: false.
-     */
-    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 (!isValidString(element.textContent))
-            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 guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
-     */
-    this.updateStatus = (guard = []) => {
-      if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
-        this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
-      }
-    };
-    /**
-     * Init event-listeners
-     */
-    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();
-          });
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.statusChange = createEvent(this, "status-change", 7);
+        this.itemLoaded = createEvent(this, "item-loaded", 7);
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-menu-item';
+        this.navigationButton = 'mg-c-menu-item__navigation-button';
+        /***********
+         * Methods *
+         **********/
+        /**
+         * Toggle expanded prop value
+         */
+        this.toggleExpanded = () => {
+            this.expanded = !this.expanded;
+        };
+        /**
+         * Does an Element have given Status
+         * @param mgMenuItemElement - to parse
+         * @param status - to check
+         * @returns true if element with status is found
+         */
+        this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
+        /**
+         * Is component contextual direction match the given direction
+         * @param direction - in parent menu
+         * @param compareWith - direction to compare with. Default: `this.direction`
+         * @returns true is direction match the direction propertie
+         */
+        this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
+        /**
+         * Update displayNotificationBadge
+         * current component notification badge have priority over the slot badge when submenu contain badge
+         */
+        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 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 guard - prevent action with guard. Default: false.
+         */
+        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 (!isValidString(element.textContent))
+                        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 guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         */
+        this.updateStatus = (guard = []) => {
+            if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
+                this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
+            }
+        };
+        /**
+         * Init event-listeners
+         */
+        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 generated mg-popover identifier
+         */
+        this.getPopoverIdentifier = () => `${this.identifier}-popover`;
+        /**
+         * Condition to know if component should display a mg-popover
+         * @returns truthy if component display popover
+         */
+        this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
+        /************
+         * Handlers *
+         ************/
+        /**
+         * Handle interacrtive element click
+         * @param event - click on element
+         */
+        this.handleElementCLick = (event) => {
+            if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            // toggle expanded when mg-menu-item has child items
+            if (this.hasChildren)
+                this.toggleExpanded();
+        };
+        /**
+         * Handle popover element display-change event
+         * @param event - popover display event
+         */
+        this.handlePopoverDisplay = (event) => {
+            this.expanded = event.detail;
+        };
+        /**
+         * Render slot
+         * @returns HTML Element
+         */
+        this.renderSlot = () => h("slot", null);
+        this.identifier = createID('mg-menu-item');
+        this.href = undefined;
+        this.status = Status.VISIBLE;
+        this.expanded = false;
+        this.size = 'regular';
+        this.navigationButtonClassList = new ClassList([this.navigationButton]);
+        this.direction = undefined;
+        this.isInMainMenu = undefined;
+        this.isItemMore = 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}`);
+        this.statusChange.emit(newValue);
+    }
+    validateExpanded(newValue) {
+        if (typeof newValue !== 'boolean')
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean.`);
+        // if menu-item has sub-menu we have to apply some updates:
+        if (this.hasChildren) {
+            const subItems = Array.from(this.element.querySelectorAll(this.name));
+            if (!newValue) {
+                // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content
+                subItems.forEach(item => {
+                    item.expanded = false;
+                });
+            }
+            else if (this.element.querySelector(`${this.name}[status="${Status.ACTIVE}"]`) !== null) {
+                // - when expanded and contain an active item parents are expended too
+                subItems.forEach(item => {
+                    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}`);
+    }
+    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.`);
+        }
+    }
     /**
-     * Get mg-popover identifier
-     * @returns generated mg-popover identifier
+     * Render popover clickoutside guard for content slot
      */
-    this.getPopoverIdentifier = () => `${this.identifier}-popover`;
+    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 *
+     *************/
     /**
-     * Condition to know if component should display a mg-popover
-     * @returns truthy if component display popover
+     * Validate props
      */
-    this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
-    /************
-     * Handlers *
-     ************/
+    componentWillLoad() {
+        // 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.validateStatus(this.status);
+        this.validateExpanded(this.expanded);
+        // Validate states
+        this.validateSize(this.size);
+    }
     /**
-     * Handle interacrtive element click
-     * @param event - click on element
+     * Check if component slots configuration
+     * @returns timeout
      */
-    this.handleElementCLick = (event) => {
-      if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      // toggle expanded when mg-menu-item has child items
-      if (this.hasChildren)
-        this.toggleExpanded();
-    };
+    componentDidLoad() {
+        // 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(() => {
+            // define menu-item context states
+            const menu = this.element.closest('mg-menu');
+            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.isInMainMenu)
+                this.expanded = this.isDirection(Direction.VERTICAL);
+            this.updateStatus([Status.ACTIVE]);
+            this.updateDisplayNotificationBadge();
+            this.updatePopoverGuard();
+            // manage child dom changes with mutationObserver and listzners
+            this.initListeners();
+            // emit loaded event when component is fully loaded
+            this.itemLoaded.emit();
+            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);
+    }
     /**
-     * Handle popover element display-change event
-     * @param event - popover display event
+     * Render ineractive element
+     * @returns HTML Element
      */
-    this.handlePopoverDisplay = (event) => {
-      this.expanded = event.detail;
-    };
+    renderInteractiveElement() {
+        const TagName = this.href !== undefined ? 'a' : 'button';
+        return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, 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: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", 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,
+            } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
+    }
     /**
-     * Render slot
+     * Render
      * @returns HTML Element
      */
-    this.renderSlot = () => h("slot", null);
-    this.identifier = createID('mg-menu-item');
-    this.href = undefined;
-    this.status = Status.VISIBLE;
-    this.expanded = false;
-    this.size = 'regular';
-    this.navigationButtonClassList = new ClassList([this.navigationButton]);
-    this.direction = undefined;
-    this.isInMainMenu = undefined;
-    this.isItemMore = 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}`);
-    this.statusChange.emit(newValue);
-  }
-  validateExpanded(newValue) {
-    if (typeof newValue !== 'boolean')
-      throw new Error(`<${this.name}> prop "expanded" must be a boolean.`);
-    // if menu-item has sub-menu we have to apply some updates:
-    if (this.hasChildren) {
-      const subItems = Array.from(this.element.querySelectorAll(this.name));
-      if (!newValue) {
-        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content
-        subItems.forEach(item => {
-          item.expanded = false;
+    render() {
+        const getContainerClasses = () => ({
+            ['mg-c-menu-item__collapse-container']: true,
+            ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-      }
-      else if (this.element.querySelector(`${this.name}[status="${Status.ACTIVE}"]`) !== null) {
-        // - when expanded and contain an active item parents are expended too
-        subItems.forEach(item => {
-          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}`);
-  }
-  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}`;
-      });
+        return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, 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()),
+        ])));
     }
-  }
-  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
-   */
-  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 *
-   *************/
-  /**
-   * Validate props
-   */
-  componentWillLoad() {
-    // 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.validateStatus(this.status);
-    this.validateExpanded(this.expanded);
-    // Validate states
-    this.validateSize(this.size);
-  }
-  /**
-   * Check if component slots configuration
-   * @returns timeout
-   */
-  componentDidLoad() {
-    // 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(() => {
-      // define menu-item context states
-      const menu = this.element.closest('mg-menu');
-      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.isInMainMenu)
-        this.expanded = this.isDirection(Direction.VERTICAL);
-      this.updateStatus([Status.ACTIVE]);
-      this.updateDisplayNotificationBadge();
-      this.updatePopoverGuard();
-      // manage child dom changes with mutationObserver and listzners
-      this.initListeners();
-      // emit loaded event when component is fully loaded
-      this.itemLoaded.emit();
-      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);
-  }
-  /**
-   * Render ineractive element
-   * @returns HTML Element
-   */
-  renderInteractiveElement() {
-    const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, 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: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", 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,
-      } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    const getContainerClasses = () => ({
-      ['mg-c-menu-item__collapse-container']: true,
-      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
-    });
-    return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, 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()),
-    ])));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "status": ["validateStatus"],
-    "expanded": ["validateExpanded"],
-    "size": ["validateSize"],
-    "direction": ["validateDirection"],
-    "hasChildren": ["validateHasChildren"]
-  }; }
-  static get style() { return mgMenuItemCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "status": ["validateStatus"],
+        "expanded": ["validateExpanded"],
+        "size": ["validateSize"],
+        "direction": ["validateDirection"],
+        "hasChildren": ["validateHasChildren"]
+    }; }
+    static get style() { return mgMenuItemCss; }
 }, [1, "mg-menu-item", {
-    "identifier": [1],
-    "href": [1],
-    "status": [1537],
-    "expanded": [1028],
-    "size": [32],
-    "navigationButtonClassList": [32],
-    "direction": [32],
-    "isInMainMenu": [32],
-    "isItemMore": [32],
-    "hasChildren": [32],
-    "displayNotificationBadge": [32]
-  }, undefined, {
-    "status": ["validateStatus"],
-    "expanded": ["validateExpanded"],
-    "size": ["validateSize"],
-    "direction": ["validateDirection"],
-    "hasChildren": ["validateHasChildren"]
-  }]);
+        "identifier": [1],
+        "href": [1],
+        "status": [1537],
+        "expanded": [1028],
+        "size": [32],
+        "navigationButtonClassList": [32],
+        "direction": [32],
+        "isInMainMenu": [32],
+        "isItemMore": [32],
+        "hasChildren": [32],
+        "displayNotificationBadge": [32]
+    }, undefined, {
+        "status": ["validateStatus"],
+        "expanded": ["validateExpanded"],
+        "size": ["validateSize"],
+        "direction": ["validateDirection"],
+        "hasChildren": ["validateHasChildren"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-menu-item", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-popover", "mg-popover-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-menu-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgMenuItem);
-      }
-      break;
-    case "mg-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "mg-popover-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-menu-item", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-popover", "mg-popover-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgMenuItem);
+            }
+            break;
+        case "mg-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "mg-popover-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();