@mgdis/mg-components 5.4.0 → 5.5.0

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

@@ -26,7 +26,7 @@ var Status;
  */
 const sizes = ['regular', 'medium', 'large'];
 
-const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.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}.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]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:1.3rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.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:1.5rem 3rem}.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]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:1.5rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.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:2.5rem 4rem}.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]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:1.5rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(2.5rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:1rem;background-color:unset;border:none;font-family:var(--font-family);color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:30%}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus:not(.mg-menu-item__navigation-button--disabled){background-color:hsla(var(--mg-menu-item-focused-background-color-hsl), 10%)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:700}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex}:host([data-style-position-last]) .mg-menu-item__collapse-container{left:unset;right:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{box-shadow:var(--box-shadow);background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{position:absolute;top:100%;left:0;width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex}.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.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}.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]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:1.3rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.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:1.5rem 3rem}.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]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:1.5rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.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:2.5rem 4rem}.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]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:1.5rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(2.5rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:1rem;background-color:unset;border:none;font-family:var(--font-family);color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:30%}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus:not(.mg-menu-item__navigation-button--disabled){background-color:hsla(var(--mg-menu-item-focused-background-color-hsl), 10%)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:700}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex}:host([data-style-position-last]) .mg-menu-item__collapse-container{left:unset;right:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{box-shadow:var(--box-shadow);background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{position:absolute;top:100%;left:0;width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex}.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([status=disabled]){pointer-events:none}";
 
 const MgMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -38,29 +38,6 @@ const MgMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      ************/
     this.name = 'mg-menu-item';
     this.navigationButton = `${this.name}__navigation-button`;
-    /**
-     * Define menu-item status. Default: "visible"
-     */
-    this.status = Status.VISIBLE;
-    /**
-     * Define menu-item size. Default: "large".
-     */
-    this.size = 'large';
-    /**
-     * Define menu-item content expanded. Default: false.
-     */
-    this.expanded = false;
-    /************
-     * States *
-     ************/
-    /**
-     * Component button classes
-     */
-    this.navigationButtonClassList = new ClassList([this.navigationButton]);
-    /**
-     * Does component have children. Default: false.
-     */
-    this.hasChildren = false;
     /************
      * Methods *
      ************/
@@ -97,10 +74,22 @@ const MgMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * @returns {void}
      */
     this.handleElementCLick = (event) => {
-      event.preventDefault();
+      if (this.hasChildren || this.status === Status.DISABLED) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      // toggle expanded when mg-menu-item has child items
       if (this.hasChildren)
         this.toggleExpanded();
     };
+    this.href = undefined;
+    this.status = Status.VISIBLE;
+    this.size = 'large';
+    this.expanded = false;
+    this.navigationButtonClassList = new ClassList([this.navigationButton]);
+    this.direction = undefined;
+    this.isInMainMenu = undefined;
+    this.hasChildren = false;
   }
   validateStatus(newValue, oldValue) {
     if (oldValue !== undefined) {

package/dist/components/mg-menu.js

@@ -13,10 +13,6 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      ************/
     this.name = 'mg-menu';
     this.focusedMenuItem = 0;
-    /**
-     * Component display direction. Default: "horizontal"
-     */
-    this.direction = Direction.HORIZONTAL;
     /**
      * Close matching menu-item
      *
@@ -38,9 +34,7 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // add listeners on menu item and edit index
       this.menuItems.forEach((item, menuItemIndex) => {
         ['click', 'focus'].forEach(trigger => {
-          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
             this.focusedMenuItem = menuItemIndex;
             // reset expanded on previous active menu item
             this.menuItems.forEach((item, index) => {
@@ -50,6 +44,9 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         });
       });
     };
+    this.label = undefined;
+    this.direction = Direction.HORIZONTAL;
+    this.isChildMenu = undefined;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {

package/dist/components/mg-message.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-button2.js';
+import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
 /**
@@ -9,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
 
-const mgMessageCss = ".mg-message{display:inline-block;position:relative;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info .mg-message__bar{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__bar{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__bar{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__bar{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
 
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -27,32 +28,6 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-message');
-    /**
-     * Message variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    this.closeButton = false;
-    /**
-     * Define if message is hidden
-     */
-    this.hide = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-message']);
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
     /**
      * Handle close button
      */
@@ -87,6 +62,13 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           return 'exclamation-circle';
       }
     };
+    this.identifier = createID('mg-message');
+    this.delay = undefined;
+    this.variant = variants[0];
+    this.closeButton = false;
+    this.hide = false;
+    this.classList = new ClassList(['mg-message']);
+    this.hasActions = false;
   }
   validateDelay(newValue) {
     if (newValue && newValue < 2) {
@@ -148,7 +130,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -171,7 +153,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-message", "mg-button", "mg-icon"];
+  const components = ["mg-message", "mg-button", "mg-card", "mg-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-message":
       if (!customElements.get(tagName)) {
@@ -179,6 +161,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/mg-modal.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, f as focusableElements } from './components.utils.js';
+import { f as focusableElements, c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-button2.js';
+import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,31 +19,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // IDs
     this.closeButtonId = '';
     this.titleId = '';
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-modal');
-    /**
-     * Define if modal has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Define if modal is hidden
-     */
-    this.hide = false;
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
-    /**
-     * Define if component is using content slot
-     */
-    this.hasContent = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-modal']);
     this.setFocus = () => {
       // Get all focusable elements
       this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
@@ -85,6 +61,13 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleClose = () => {
       this.hide = true;
     };
+    this.identifier = createID('mg-modal');
+    this.modalTitle = undefined;
+    this.closeButton = false;
+    this.hide = false;
+    this.hasActions = false;
+    this.hasContent = false;
+    this.classList = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -160,7 +143,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -181,7 +164,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-modal", "mg-button", "mg-icon"];
+  const components = ["mg-modal", "mg-button", "mg-card", "mg-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-modal":
       if (!customElements.get(tagName)) {
@@ -189,6 +172,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/mg-pagination.js

@@ -42,19 +42,6 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.__registerHost();
     this.__attachShadow();
     this.currentPageChange = createEvent(this, "current-page-change", 7);
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-pagination');
-    /**
-     * Component total pages
-     */
-    this.totalPages = 1;
-    /**
-     * Component current page
-     */
-    this.currentPage = 1;
     /**
      * Change current page from target
      *
@@ -87,6 +74,10 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
+    this.identifier = createID('mg-pagination');
+    this.label = undefined;
+    this.totalPages = 1;
+    this.currentPage = 1;
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {

package/dist/components/mg-panel.js

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
+import { d as defineCustomElement$8 } from './mg-button2.js';
+import { d as defineCustomElement$7 } from './mg-card2.js';
 import { d as defineCustomElement$6 } from './mg-character-left2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-text2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
 
-const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -17,27 +18,6 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.titleChange = createEvent(this, "title-change", 7);
     this.expandedChange = createEvent(this, "expanded-change", 7);
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-panel');
-    /**
-     * Panel is opened
-     */
-    this.expanded = false;
-    /**
-     * Panel title is editabled
-     */
-    this.titleEditable = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-panel']);
-    /**
-     * Title is in edition mode
-     */
-    this.isEditing = false;
     /************
      * Methods *
      ************/
@@ -122,6 +102,16 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       return collapseButton();
     };
+    this.identifier = createID('mg-panel');
+    this.panelTitle = undefined;
+    this.titlePattern = undefined;
+    this.titlePatternErrorMessage = undefined;
+    this.expanded = false;
+    this.expandToggleDisabled = undefined;
+    this.titleEditable = false;
+    this.classList = new ClassList(['mg-panel']);
+    this.isEditing = false;
+    this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -172,7 +162,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -197,7 +187,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-panel", "mg-button", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-panel":
       if (!customElements.get(tagName)) {
@@ -205,6 +195,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/mg-popover.js

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createID, i as isTagName } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-button2.js';
+import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 import { c as createPopper } from './popper.js';
 
-const mgPopoverCss = "mg-popover{display:contents}mg-popover::slotted(*){display:inline-block}.mg-popover{display:none;padding:1.5rem;z-index:1000;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
+const mgPopoverCss = ":host{--mg-card-padding:1.5rem;--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{z-index:-1}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:2000;background:hsl(var(--mg-popover-background-color))}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
 
 const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,27 +15,6 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.displayChange = createEvent(this, "display-change", 7);
     this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = createID('mg-popover');
-    /**
-     * Popover placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Define if popover has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Display popover
-     */
-    this.display = false;
-    /**
-     * Disable popover
-     */
-    this.disabled = false;
     /**
      * Check if clicked outside of component
      *
@@ -85,6 +65,11 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleCloseButton = () => {
       this.display = false;
     };
+    this.identifier = createID('mg-popover');
+    this.placement = 'bottom';
+    this.closeButton = false;
+    this.display = false;
+    this.disabled = false;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -123,7 +108,7 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     // Get popover content
-    this.popover = this.element.shadowRoot.querySelector(`#${this.identifier}`);
+    this.popover = this.element.shadowRoot.getElementById(this.identifier);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -160,7 +145,7 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, h("mg-card", null, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -178,7 +163,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-popover", "mg-button", "mg-icon"];
+  const components = ["mg-popover", "mg-button", "mg-card", "mg-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-popover":
       if (!customElements.get(tagName)) {
@@ -186,6 +171,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/mg-skip-links.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgSkipLinks extends Components.MgSkipLinks, HTMLElement {}
+export const MgSkipLinks: {
+  prototype: MgSkipLinks;
+  new (): MgSkipLinks;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-skip-links.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as initLocales } from './index2.js';
+
+const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
+
+const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.links = undefined;
+  }
+  validateLinks(links) {
+    if (links === undefined ||
+      links.length === 0 ||
+      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+      throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateLinks(this.links);
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href }, link.label)))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "links": ["validateLinks"]
+  }; }
+  static get style() { return mgSkipLinksCss; }
+}, [1, "mg-skip-links", {
+    "links": [1040]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-skip-links"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-skip-links":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgSkipLinks$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgSkipLinks = MgSkipLinks$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgSkipLinks, defineCustomElement };