@mgdis/mg-components 5.7.0 → 5.8.1

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

@@ -28,7 +28,7 @@
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding: 1rem 2rem;
-  height: calc(3.8rem);
+  height: 3.8rem;
 }
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -50,7 +50,7 @@
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding: 1rem 3rem;
-  height: calc(5.1rem);
+  height: 5.1rem;
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -72,7 +72,7 @@
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding: 1rem 4rem;
-  height: calc(7.1rem);
+  height: 7.1rem;
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -303,10 +303,12 @@
   margin-left: auto;
 }
 
-:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,
+:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
   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) {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),
+:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
   padding: 1rem 0;
 }
 

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

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

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

@@ -141,7 +141,7 @@ export class MgForm {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
         });
       }
     });

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

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

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

@@ -0,0 +1,30 @@
+/**
+ * A11Y
+ */
+.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;
+  }
+}
+:host {
+  display: flex;
+}

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

@@ -0,0 +1,200 @@
+import { h, Host } from '@stencil/core';
+import { initLocales } from '../../../locales';
+import { OverflowBehavior } from '../../../utils/behaviors.utils';
+import { Direction } from '../menu/mg-menu/mg-menu.conf';
+export class MgItemMore {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-item-more';
+    /***********
+     * Methods *
+     ***********/
+    /**
+     * render mg-item-more overflow element
+     *
+     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     */
+    this.renderMgMenuItemOverflowElement = () => {
+      // create menu items proxy element from item clones
+      const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');
+      this.menuItems.forEach((child) => {
+        moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
+      });
+      const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+      Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
+        // manage click on proxy to mirror it on initial element
+        proxy.addEventListener('click', () => {
+          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        });
+        // add id suffix to prevent duplicate key. default html id is: '';
+        if (proxy.id.trim() !== '')
+          proxy.id = `${proxy.id}-proxy`;
+        // manage status change miror in proxy
+        allMenuItem[index].addEventListener('status-change', (event) => {
+          proxy.setAttribute('status', event.detail);
+        });
+      });
+      return this.element;
+    };
+    this.icon = { icon: 'ellipsis-vertical' };
+    this.slotlabel = { display: false };
+    this.size = undefined;
+    this.parentMenu = undefined;
+  }
+  validateIcon(newValue) {
+    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
+      throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
+  }
+  validateSlotLabel(newValue) {
+    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
+      throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
+    else if (typeof newValue.label !== 'string')
+      this.slotlabel.label = this.messages.moreLabel;
+  }
+  validateSize(newValue) {
+    if (newValue && typeof newValue !== 'string')
+      throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Disconnect overflow ResizeObserver
+   *
+   * @returns {void} run overflow resize obeserver disconnexion
+   */
+  disconnectedCallback() {
+    this.overflowBehavior.disconnect();
+  }
+  /**
+   * Set variables and validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // init variables
+    this.messages = initLocales(this.element).messages.plusMenu;
+    this.parentMenu = this.element.closest('mg-menu');
+    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
+    // validate props
+    this.validateIcon(this.icon);
+    this.validateSlotLabel(this.slotlabel);
+    this.validateSize(this.size);
+  }
+  /**
+   * Add overflow behavior
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h(Host, { role: "menuitem", "aria-haspopup": "true" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
+  }
+  static get is() { return "mg-item-more"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-item-more.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-item-more.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IconType",
+          "resolved": "{ icon: string; }",
+          "references": {
+            "IconType": {
+              "location": "import",
+              "path": "./mg-item-more.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define icon\nDefault: {icon: 'ellipsis-vertical'}"
+        },
+        "defaultValue": "{ icon: 'ellipsis-vertical' }"
+      },
+      "slotlabel": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SlotLabelType",
+          "resolved": "{ label?: string; display?: boolean; }",
+          "references": {
+            "SlotLabelType": {
+              "location": "import",
+              "path": "./mg-item-more.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define slot label element\nDefault: {display: false}"
+        },
+        "defaultValue": "{ display: false }"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeType",
+          "resolved": "\"large\" | \"medium\" | \"regular\"",
+          "references": {
+            "SizeType": {
+              "location": "import",
+              "path": "./mg-item-more.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define component child menu size."
+        },
+        "attribute": "size",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "parentMenu": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "icon",
+        "methodName": "validateIcon"
+      }, {
+        "propName": "slotlabel",
+        "methodName": "validateSlotLabel"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }];
+  }
+}

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

@@ -1,7 +1,6 @@
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular {
   padding: 1rem 2rem;
-  height: calc();
 }
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),
@@ -23,7 +22,6 @@
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large {
   padding: 1.5rem 3rem;
-  height: calc();
 }
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),

package/dist/collection/styles/navigation-button.scss

@@ -9,7 +9,7 @@ $navigation-button-column-gap: 1rem;
     .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
     .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
       padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: calc(#{map.get($size, 'height')});
+      height: #{map.get($size, 'height')};
       &,
       ::slotted([slot='label']),
       ::slotted([slot='metadata']) {