@mgdis/mg-components 5.4.0 → 5.6.0

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

@@ -0,0 +1,24 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-skip-links',
+  title: 'Molecules/mg-skip-links',
+  parameters: { actions: { handles: ['go-to-anchor'] } },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-skip-links", Object.assign({}, filterArgs(args)));
+export const MgSkipLinks = Template.bind({});
+MgSkipLinks.args = {
+  links: [
+    { href: '#content', label: 'Content' },
+    { href: '#menu', label: 'Menu' },
+    { href: '#search', label: 'Search' },
+    { href: '#footer', label: 'Footer' },
+  ],
+};

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

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

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

@@ -0,0 +1,28 @@
+.mg-skip-links {
+  position: absolute;
+  transform: translateY(-100%);
+  opacity: 0;
+  background: hsl(var(--color-light));
+}
+.mg-skip-links:focus-within {
+  position: relative;
+  transform: translateY(0);
+  opacity: 1;
+}
+.mg-skip-links__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0;
+  padding: 0.64rem 1.8rem;
+  list-style: none;
+}
+.mg-skip-links__link {
+  display: inline-block;
+  padding: 1.2rem;
+  color: hsl(var(--color-dark));
+}
+.mg-skip-links__link:hover {
+  background: hsl(var(--color-dark), 0.1);
+}

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

@@ -0,0 +1,108 @@
+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) {
+    if (links === undefined ||
+      links.length === 0 ||
+      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+      throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateLinks(this.links);
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+  }
+  static get is() { return "mg-skip-links"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-skip-links.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-skip-links.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "links": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SkipLink[]",
+          "resolved": "SkipLink[]",
+          "references": {
+            "SkipLink": {
+              "location": "import",
+              "path": "./mg-skip-links.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Skip links"
+        }
+      }
+    };
+  }
+  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 [{
+        "propName": "links",
+        "methodName": "validateLinks"
+      }];
+  }
+}

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

@@ -13,48 +13,10 @@ export class MgTabs {
     /************
      * Internal *
      ************/
+    // classes
     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.
-     */
-    this.identifier = createID('mg-tabs');
-    /**
-     * Define tabs size
-     */
-    this.size = 'regular';
-    /**
-     * Active tab number
-     * default: first is 1
-     */
-    this.activeTab = 1;
-    /**
-     * Component tabs
-     */
-    this.tabs = [];
-    /**
-     * 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);
-    };
+    this.startIndex = 1;
     /**
      * Method to know if given tab has the given status
      *
@@ -62,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
      *
@@ -70,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
      *
@@ -85,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
      *
@@ -102,32 +76,67 @@ 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 = undefined;
+    this.tabs = [];
+    this.classList = new ClassList(['mg-tabs']);
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -143,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.');
     }
   }
   /*************
@@ -177,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
    *
@@ -186,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"; }
@@ -295,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

@@ -40,11 +40,18 @@
   "panel": {
     "editLabel": "Edit section title."
   },
+  "skipLinks": {
+    "navLabel": "Quick access"
+  },
   "general": {
     "confirm": "Confirm",
     "cancel": "Cancel",
     "close": "Close",
     "next": "next",
     "previous": "previous"
+  },
+  "plusMenu": {
+    "moreLabel": "Additional menu",
+    "badgeLabel": "Include notification(s)"
   }
 }

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

@@ -40,11 +40,18 @@
   "panel": {
     "editLabel": "Modifier le titre de la section."
   },
+  "skipLinks": {
+    "navLabel": "Accès rapide"
+  },
   "general": {
     "confirm": "Valider",
     "cancel": "Annuler",
     "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;
+}