@mgdis/mg-components 5.5.0 → 5.6.0

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

@@ -1,10 +1,13 @@
 import { Host, h } from '@stencil/core';
 import { createID, isTagName } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
+import { getWindows, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
+    // Classes
+    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      *
@@ -31,7 +34,9 @@ export class MgPopover {
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+        });
       }, 0);
     };
     /**
@@ -45,7 +50,9 @@ export class MgPopover {
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+      });
     };
     /**
      * Handle action for close button
@@ -57,9 +64,17 @@ export class MgPopover {
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
+    this.arrowHide = false;
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
+    this.classList = new ClassList(['mg-popover']);
+  }
+  validateArrowHide(newValue) {
+    if (newValue)
+      this.classList.add(this.classArrowHide);
+    else
+      this.classList.delete(this.classArrowHide);
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -79,8 +94,11 @@ export class MgPopover {
    * @returns {void} timeout
    */
   componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
     // Get locales
     this.messages = initLocales(this.element).messages;
+    this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
@@ -112,7 +130,7 @@ export class MgPopover {
         {
           name: 'offset',
           options: {
-            offset: [0, 10],
+            offset: [0, 0],
           },
         },
       ],
@@ -135,7 +153,7 @@ export class MgPopover {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    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 }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.join() }, h("mg-card", null, 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" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }
@@ -192,6 +210,24 @@ export class MgPopover {
         "reflect": false,
         "defaultValue": "'bottom'"
       },
+      "arrowHide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide popover arrow"
+        },
+        "attribute": "arrow-hide",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "closeButton": {
         "type": "boolean",
         "mutable": false,
@@ -248,6 +284,11 @@ export class MgPopover {
       }
     };
   }
+  static get states() {
+    return {
+      "classList": {}
+    };
+  }
   static get events() {
     return [{
         "method": "displayChange",
@@ -269,6 +310,9 @@ export class MgPopover {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "arrowHide",
+        "methodName": "validateArrowHide"
+      }, {
         "propName": "display",
         "methodName": "handleDisplay"
       }];

package/dist/collection/components/molecules/mg-skip-links/doc/mg-skip-links.stories.js

@@ -3,7 +3,7 @@ import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-skip-links',
   title: 'Molecules/mg-skip-links',
-  parameters: { actions: { handles: ['expanded-change'] } },
+  parameters: { actions: { handles: ['go-to-anchor'] } },
 };
 /**
  * Template

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

@@ -2,6 +2,19 @@ import { h } from '@stencil/core';
 import { initLocales } from '../../../locales';
 export class MgSkipLinks {
   constructor() {
+    /***********
+     * Methods *
+     **********/
+    /**
+     * Handle link click and emit go-to-anchor event
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.handleLinkCLick = (event) => {
+      event.currentTarget.blur();
+      this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+    };
     this.links = undefined;
   }
   validateLinks(links) {
@@ -29,7 +42,7 @@ export class MgSkipLinks {
    * @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)))))));
+    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, onClick: this.handleLinkCLick }, link.label)))))));
   }
   static get is() { return "mg-skip-links"; }
   static get encapsulation() { return "shadow"; }
@@ -67,6 +80,24 @@ export class MgSkipLinks {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "goToAnchor",
+        "name": "go-to-anchor",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when link is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/molecules/mg-tabs/doc/mg-tabs.stories.js

@@ -24,11 +24,11 @@ export const MgTabs = Template.bind({});
 MgTabs.args = {
   items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
   label: 'Short tabs description. Needed for accessibility',
-  activeTab: undefined,
+  activeTab: 2,
   size: sizes[0], // regular
 };
 export const MgTabsItems = Template.bind({});
-MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3, items: [
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: undefined, items: [
     {
       label: 'Tab 1',
       icon: 'check',
@@ -36,12 +36,14 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3,
     },
     {
       label: 'Tab 2',
-      badge: { value: 5, label: 'messages' },
+      badge: { value: 5, label: 'messages', role: 'information' },
       status: Status.DISABLED,
     },
     {
       label: 'Tab 3',
       icon: 'cross',
+      badge: { value: '9+', label: 'messages', role: 'notification' },
+      status: Status.ACTIVE,
     },
     {
       label: 'Tab 4',

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

@@ -1,6 +1,7 @@
 .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]),
@@ -8,7 +9,7 @@
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]) {
-  font-size: 1.3rem;
+  font-size: var(--font-size);
 }
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal {
@@ -22,6 +23,7 @@
 .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]),
@@ -29,7 +31,7 @@
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]) {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-size) + 0.2rem);
 }
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal {
@@ -43,28 +45,30 @@
 .mg-tabs__navigation-button {
   display: flex;
   align-items: center;
-  column-gap: 1rem;
+  column-gap: var(--mg-tabs-navigation-button-column-gap, 1rem);
   background-color: unset;
   border: none;
   font-family: var(--font-family);
   color: hsl(var(--mg-tabs-color-hsl, var(--color-dark)));
   line-height: var(--line-height);
   text-decoration: none;
+  white-space: nowrap;
+  box-sizing: border-box;
   cursor: pointer;
 }
 .mg-tabs__navigation-button:disabled, .mg-tabs__navigation-button--disabled {
   cursor: default;
-  opacity: 30%;
+  opacity: 0.3;
 }
 .mg-tabs__navigation-button:focus-visible {
   z-index: 10;
 }
-.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled), .mg-tabs__navigation-button:focus:not(.mg-tabs__navigation-button--disabled) {
-  background-color: hsla(var(--mg-tabs-focused-background-color-hsl), 10%);
+.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled), .mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled) {
+  background-color: hsl(var(--mg-tabs-focused-background-color-hsl), 0.1);
 }
 .mg-tabs__navigation-button.mg-tabs__navigation-button--active {
   color: hsl(var(--mg-tabs-color-active-hsl));
-  font-weight: 700;
+  font-weight: 600;
 }
 .mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal {
   border-bottom-color: hsl(var(--mg-tabs-border-color-active-hsl));

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

@@ -16,25 +16,7 @@ export class MgTabs {
     // classes
     this.tabPanel = 'panel';
     this.buttonTabBaseClass = 'mg-tabs__navigation-button';
-    // variables
     this.startIndex = 1;
-    /**
-     * 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
      *
@@ -42,7 +24,7 @@ export class MgTabs {
      * @param {Status} status status to valide
      * @returns {boolean} status comparaison
      */
-    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
      *
@@ -50,14 +32,20 @@ export class MgTabs {
      * @param {number} index to generate id
      * @returns {string} generated element id
      */
-    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
-     * Method to get tab index
+     * Method to get tab item index
      *
      * @param {number} index to get
      * @returns {number} index
      */
-    this.getTabIndex = (index) => index + this.startIndex;
+    this.getTabItemIndex = (index) => index + this.startIndex;
+    /**
+     * Method to get the active-tab value
+     *
+     * @returns {number} of the active-tab
+     */
+    this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
      *
@@ -65,16 +53,22 @@ export class MgTabs {
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.getAttribute('data-index');
-      this.activeTab = Number(tabId);
+      const tab = this.tabs[Number(tabId) - this.startIndex];
+      if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
+        event.preventDefault();
+      }
+      else {
+        this.activeTab = Number(tabId);
+        this.tabFocus = undefined;
+      }
     };
     /**
      * 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}`;
+    this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -82,37 +76,65 @@ export class MgTabs {
      * @returns {void}
      */
     this.handleKeydown = (event) => {
-      let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
-      // change selected id from key code
-      if (event.key === 'ArrowRight') {
-        tabId++;
-      }
-      else if (event.key === 'ArrowLeft') {
-        tabId--;
+      if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+        this.tabFocus = Number(event.target.getAttribute('data-index'));
+        parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
+        // Move right
+        if (event.key === 'ArrowRight') {
+          this.tabFocus++;
+          // If we're at the end, go to the start
+          if (this.tabFocus > this.tabs.length)
+            this.tabFocus = this.startIndex;
+          // Move left
+        }
+        else if (event.key === 'ArrowLeft') {
+          this.tabFocus--;
+          // If we're at the start, move to the end
+          if (this.tabFocus < this.startIndex)
+            this.tabFocus = this.tabs.length;
+        }
+        // if focus item is ['hidden'] we recursively repeat action
+        if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
+          parent.querySelector(`[data-index="${this.tabFocus}"]`).dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+          // else run focus methods on tabFocus element
+        }
+        else {
+          parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '0');
+          parent.querySelector(`[data-index="${this.tabFocus}"]`).focus();
+        }
       }
-      // 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();
-        this.activeTab = tabId;
+      else if (event.key === 'Tab') {
+        this.resetFocus();
       }
     };
+    /**
+     * Method to reset focus behavior
+     *
+     * @returns {void}
+     */
+    this.resetFocus = () => {
+      // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
+      setTimeout(() => {
+        this.tabFocus = undefined;
+        Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
+          tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');
+        });
+      }, 0);
+    };
     /**
      * Validate slots setting
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-      if (slots.length !== this.tabs.length) {
+      if (slots.length !== this.tabs.length)
         throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-      }
     };
     this.identifier = createID('mg-tabs');
     this.label = undefined;
     this.size = 'regular';
     this.items = undefined;
-    this.activeTab = 1;
+    this.activeTab = undefined;
     this.tabs = [];
     this.classList = new ClassList(['mg-tabs']);
   }
@@ -130,22 +152,37 @@ export class MgTabs {
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+      this.tabs = newValue.map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isTabItem(item))) {
+    else if (newValue && newValue.length > 0 && newValue.every(item => isTabItem(item))) {
       this.tabs = newValue;
+      // init active tabs if not set. Default: index 0.
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined)
+        this.tabs[0].status = Status.ACTIVE;
     }
     else {
       throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
     }
   }
   validateActiveTab(newValue) {
-    if (newValue < 1 || newValue > this.tabs.length) {
-      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {
+      this.tabs.forEach((tab, index) => {
+        const isNewActiveTab = index === newValue - this.startIndex;
+        // reset active tabs
+        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
+          tab.status = Status.VISIBLE;
+        // set active tab from given tab key
+        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab)
+          tab.status = Status.ACTIVE;
+      });
+      // emit change active tab key event
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {
+        this.activeTabChange.emit(newValue);
+      }
     }
-    else {
-      this.setActiveTab(newValue);
+    else if (newValue !== undefined) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
   }
   /*************
@@ -164,6 +201,17 @@ export class MgTabs {
     this.validateSize(this.size);
     this.validateSlots();
   }
+  /**
+   * add listners
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    document.addEventListener('click', (event) => {
+      if (event.target.closest('mg-tabs') !== this.element)
+        this.resetFocus();
+    }, false);
+  }
   /**
    * Render
    *
@@ -173,10 +221,10 @@ export class MgTabs {
     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.buttonTabBaseClass}--horizontal`]: 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: tab.status !== Status.ACTIVE ? 'primary' : '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) }))))));
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -282,11 +330,10 @@ export class MgTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Active tab number\ndefault: first is 1"
+          "text": "Active tab number"
         },
         "attribute": "active-tab",
-        "reflect": true,
-        "defaultValue": "1"
+        "reflect": true
       }
     };
   }

package/dist/collection/locales/en/messages.json

@@ -49,5 +49,9 @@
     "close": "Close",
     "next": "next",
     "previous": "previous"
+  },
+  "plusMenu": {
+    "moreLabel": "Additional menu",
+    "badgeLabel": "Include notification(s)"
   }
 }

package/dist/collection/locales/fr/messages.json

@@ -49,5 +49,9 @@
     "close": "Fermer",
     "next": "suivant",
     "previous": "précédent"
+  },
+  "plusMenu": {
+    "moreLabel": "Menu complémentaire",
+    "badgeLabel": "Notification(s) incluse(s)"
   }
 }

package/dist/collection/locales/index.js

@@ -1,35 +1,12 @@
 import en from './en/messages.json';
 import fr from './fr/messages.json';
+import { getLocaleMessages } from '../utils/locale.utils';
 const defaultLocale = 'en';
 const messages = { en, fr };
-/**
- * Get locale
- *
- * @param {HTMLElement} element element that needs to know the locale to use
- * @returns {string} locale
- */
-const getLocale = (element) => {
-  var _a;
-  // validate locale
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
-  return closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
-};
 /**
  * Get Intl object
- * We load the defined locale but for now we only support the first subtag for messages
  *
  * @param {HTMLElement} element element we need to get the language
  * @returns {{ locale: string; messages: unknown }} messages object
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const initLocales = (element) => {
-  // Get local
-  const locale = getLocale(element);
-  // Only keep first subtag
-  const localeSubtag = locale.split('-').shift();
-  // Return
-  return {
-    locale,
-    messages: messages[localeSubtag] || messages[defaultLocale],
-  };
-};
+export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);

package/dist/collection/styles/a11y.scss

@@ -0,0 +1,32 @@
+/**
+ * A11Y
+ */
+
+// Make content available only for screen reader
+// https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+.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;
+}
+
+// Remove outline for non-keyboard :focus
+// https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/dist/collection/styles/components.scss

@@ -0,0 +1,3 @@
+[hide] {
+  display: none;
+}

package/dist/collection/styles/fonts.scss

@@ -0,0 +1,21 @@
+/**
+ * Open Sans
+ * https://fonts.google.com/specimen/Open+Sans
+ */
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
+}