@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/components/mg-panel.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$7 } from './mg-button2.js';
 import { d as defineCustomElement$6 } from './mg-character-left2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
@@ -8,7 +8,7 @@ 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);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-panel__header{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:0 1rem 0 0.3rem;-ms-flex-align:start;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:-ms-flexbox;display:flex;margin:0.3rem 0}.mg-panel__header-left--full{-ms-flex:1 1 auto;flex:1 1 auto}.mg-panel__header-right{-ms-flex:1 auto;flex:1 auto}.mg-panel__header-left mg-input-text{-ms-flex-positive:1;flex-grow:1}.mg-panel__collapse-button{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500;margin:0 0.3rem 0 0}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--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-left--full{flex:1 1 auto}.mg-panel__header-right{flex:1 auto}.mg-panel__header-left mg-input-text{flex-grow:1}.mg-panel__header-left mg-button:not([slot=append-input]){margin:0 0.3rem 0 0}.mg-panel__header-left mg-button:not([slot=append-input])>*:first-of-type{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500}.mg-panel__content{padding:1.5rem}.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,9 +17,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);
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -29,10 +26,6 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Panel is opened
      */
     this.expanded = false;
-    /**
-     * Disable possibility to toggle expand
-     */
-    this.expandToggleDisabled = false;
     /**
      * Panel title is editabled
      */
@@ -114,17 +107,17 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
+          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();
@@ -153,6 +146,9 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validatetitlePattern(this.titlePattern);
   }
   /**
@@ -174,6 +170,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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))));
   }
+  get element() { return this; }
   static get watchers() { return {
     "panelTitle": ["handelTileChange"],
     "titlePattern": ["validatetitlePattern"],

package/dist/components/mg-popover.js

@@ -1,16 +1,17 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createID } from './components.utils.js';
-import { m as messages } from './index2.js';
+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$2 } from './mg-icon2.js';
 import { c as createPopper } from './popper.js';
 
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{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.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>*,.mg-popover__title .sc-mg-popover-s>*{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
+const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;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].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{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.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
 
 const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.displayChange = createEvent(this, "display-change", 7);
     this.closeButtonId = '';
     /**
      * Sets an `id` attribute.
@@ -73,7 +74,7 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.popover.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove even listener
+      // Remove event listener
       document.removeEventListener('click', this.clickOutside, false);
     };
     /**
@@ -85,28 +86,37 @@ const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.display = false;
     };
   }
-  handleDisplay(newVal) {
-    if (newVal) {
+  handleDisplay(newValue) {
+    if (newValue) {
       this.show();
     }
     else {
       this.hide();
     }
+    this.displayChange.emit(newValue);
   }
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
   /**
    * Check if component props are well configured on init
    *
    * @returns {void}
    */
   componentDidLoad() {
-    //Check if slotted title is a heading
-    const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement !== null && !headingElements.includes(slotedTitleElement.tagName.toLowerCase())) {
-      throw new Error(`<mg-popover> Slotted title must be a heading:  ${headingElements.join(', ')}.`);
+    if (slotedTitleElement && !isTagName(slotedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
     // Set close button id
     if (this.closeButton) {
@@ -149,7 +159,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.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: 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" }, !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 {

package/dist/components/mg-tabs.js

@@ -1,14 +1,21 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList, a as allItemsAreString } from './components.utils.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
+var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
 /**
  * List of all possibles sizes
  */
 const sizes = ['regular', 'large'];
 
-const mgTabsCss = ".mg-tabs.mg-tabs--size-regular.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.mg-tabs__navigation-button.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button.sc-mg-tabs:disabled,.mg-tabs__navigation-button--disabled.sc-mg-tabs{cursor:default;opacity:30%}.mg-tabs__navigation-button.sc-mg-tabs:hover:not(:disabled),.mg-tabs__navigation-button.sc-mg-tabs:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.sc-mg-tabs{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__content-container.sc-mg-tabs:focus-visible{outline:none}";
+const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:30%}.mg-tabs__navigation-button:hover:not(:disabled),.mg-tabs__navigation-button:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__content-container:focus-visible{outline:none}";
 
 /**
  * type TabItem validation function
@@ -21,7 +28,14 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.activeTabChange = createEvent(this, "active-tab-change", 7);
+    /************
+     * Internal *
+     ************/
+    this.tabPanel = 'panel';
+    this.startIndex = 1;
+    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -44,6 +58,46 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Component classes
      */
     this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
      *
@@ -53,6 +107,14 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -63,16 +125,14 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -98,7 +158,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -113,7 +173,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
     else {
-      this.activeTabChange.emit(newValue);
+      this.setActiveTab(newValue);
     }
   }
   /*************
@@ -137,17 +197,12 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
-      const tabIndex = index + 1;
-      return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
-          'mg-tabs__navigation-button': true,
-          'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
-          'mg-tabs__navigation-button--disabled': tab.disabled,
-        }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-    })), this.tabs.map((_tab, index) => {
-      const tabIndex = index + 1;
-      return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: `tab_content-${tabIndex}` })));
-    }))));
+    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+        [`${this.buttonTabBaseClass}`]: true,
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -156,7 +211,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activeTab": ["validateActiveTab"]
   }; }
   static get style() { return mgTabsCss; }
-}, [6, "mg-tabs", {
+}, [1, "mg-tabs", {
     "identifier": [1],
     "label": [1],
     "size": [1],

package/dist/components/mg-tag.js

@@ -6,31 +6,46 @@ import { C as ClassList } from './components.utils.js';
  */
 const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
 
-const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
+const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
 
 const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-tag--outline`;
+    /**************
+     * Decorators *
+     **************/
     /**
      * Define button variant
      */
-    this.variant = variants[0]; // info
+    this.variant = variants[0]; // primary
     /**
      * Component classes
      */
     this.classList = new ClassList(['mg-tag']);
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
     }
-    this.classList.add(`mg-tag--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-tag--${oldValue}`);
+      }
+      this.classList.add(`mg-tag--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-tag--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /*************
    * Lifecycle *

package/dist/components/mg-tooltip2.js

@@ -2,7 +2,17 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as createID } from './components.utils.js';
 import { c as createPopper } from './popper.js';
 
-const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
+/**
+ * List of all possibles placements
+ */
+var Guard;
+(function (Guard) {
+  Guard["FOCUS"] = "focus";
+  Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
+  Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
+})(Guard || (Guard = {}));
+
+const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
 
 const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -49,9 +59,51 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
     };
+    /**
+     * Method to set display prop
+     *
+     * @param {boolean} newValue display prop new value
+     * @param {boolean} condition additionnal condition to apply display prop newValue
+     * @returns {void}
+     */
+    this.setDisplay = (newValue, condition = true) => {
+      if (!this.disabled && condition)
+        this.display = newValue;
+    };
+    /**
+     * Action for tooltip element and tooltiped element mouse listener
+     *
+     * @param {Guard} elementGuard tooltip element guard
+     * @param {boolean} isMouseenter mouseenter validation
+     * @param {Guard} conditionalGuard guard condition
+     * @returns {void}
+     */
+    this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
+      // we mutate elementGuard
+      if (this.guard !== Guard.FOCUS) {
+        this.guard = elementGuard;
+        if (!isMouseenter) {
+          setTimeout(() => {
+            this.setDisplay(isMouseenter, this.guard !== conditionalGuard);
+            this.resetGuard();
+          }, 100);
+        }
+        else if (isMouseenter && elementGuard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+          this.setDisplay(isMouseenter);
+        }
+      }
+    };
+    /**
+     * Method to reset guard value
+     *
+     * @returns {void}
+     */
+    this.resetGuard = () => {
+      this.guard = undefined;
+    };
   }
-  handleDisplay(newVal) {
-    if (newVal) {
+  handleDisplay(newValue) {
+    if (newValue) {
       this.show();
     }
     else {
@@ -102,21 +154,31 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         },
       ],
     });
-    // Add events
-    ['mouseenter', 'focus'].forEach(event => {
-      tooltipedElement.addEventListener(event, () => {
-        if (!this.disabled)
-          this.display = true;
-      });
+    // Manage tooltipedElement focus/blur events
+    tooltipedElement.addEventListener('focus', () => {
+      this.guard = Guard.FOCUS;
+      this.setDisplay(true);
     });
-    ['mouseleave', 'blur', 'keydown'].forEach(event => {
+    ['blur', 'keydown'].forEach(event => {
       tooltipedElement.addEventListener(event, (e) => {
         // we continue to process ONLY for KeyboardEvents 'Escape'
         if (e.type === 'keydown' && e.code !== 'Escape') {
           return;
         }
-        if (!this.disabled)
-          this.display = false;
+        this.resetGuard();
+        this.setDisplay(false);
+      });
+    });
+    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
+    ['mouseenter', 'mouseleave'].forEach(event => {
+      const isMouseenter = event === 'mouseenter';
+      [
+        { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+        { element: tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
+      ].forEach(({ element, action }) => {
+        element.addEventListener(event, () => {
+          action();
+        });
       });
     });
     this.handleDisplay(this.display);

package/dist/components/popper.js

@@ -298,6 +298,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -521,7 +525,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -529,7 +533,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;