@mgdis/mg-components 5.6.0 → 5.8.0

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

@@ -0,0 +1,30 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+:host {
+  display: flex;
+}

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

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

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

@@ -91,7 +91,7 @@ export class MgMessage {
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
-      throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
+      throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {

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

@@ -59,6 +59,7 @@ export class MgPagination {
     };
     this.identifier = createID('mg-pagination');
     this.label = undefined;
+    this.hideNavigationLabels = undefined;
     this.totalPages = 1;
     this.currentPage = 1;
   }
@@ -103,7 +104,7 @@ export class MgPagination {
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -155,6 +156,23 @@ export class MgPagination {
         "attribute": "label",
         "reflect": false
       },
+      "hideNavigationLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide navigation label"
+        },
+        "attribute": "hide-navigation-labels",
+        "reflect": false
+      },
       "totalPages": {
         "type": "number",
         "mutable": false,

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

@@ -76,13 +76,13 @@ export class MgPanel {
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          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" })),
+          h("mg-button", { key: "edit-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: 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" }))),
+          h("mg-input-text", { key: "edition-input", 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();

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

@@ -18,7 +18,6 @@
 }
 .mg-popover mg-card {
   position: relative;
-  z-index: -1;
 }
 .mg-popover[data-show] {
   display: block;

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

@@ -1,7 +1,6 @@
 import { Host, h } from '@stencil/core';
-import { createID, isTagName } from '../../../utils/components.utils';
+import { createID, isTagName, getWindows, ClassList } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { getWindows, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
@@ -15,7 +14,10 @@ export class MgPopover {
      * @returns {void}
      */
     this.clickOutside = (event) => {
-      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
+      var _a;
+      if (!this.disabled &&
+        event.target.closest('mg-popover') !== this.element &&
+        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
         this.display = false;
       }
     };
@@ -26,7 +28,7 @@ export class MgPopover {
      */
     this.show = () => {
       // Make the popover visible
-      this.popover.setAttribute('data-show', '');
+      this.popover.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
@@ -135,6 +137,17 @@ export class MgPopover {
         },
       ],
     });
+    if (this.resizeObserver === undefined) {
+      // add resize observer
+      this.resizeObserver = new ResizeObserver(entries => {
+        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
+          this.popper.update();
+        }
+      });
+      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
+        this.resizeObserver.observe(element);
+      });
+    }
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 import { h } from '@stencil/core';
 import { initLocales } from '../../../locales';
 export class MgSkipLinks {
@@ -42,7 +43,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, onClick: this.handleLinkCLick }, link.label)))))));
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, 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"; }

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

@@ -1,7 +1,6 @@
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular {
   padding: 1rem 2rem;
-  height: calc();
 }
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
 .mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),
@@ -23,7 +22,6 @@
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
 .mg-tabs__navigation-button.mg-tabs__navigation-button--size-large {
   padding: 1.5rem 3rem;
-  height: calc();
 }
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
 .mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),
@@ -49,6 +47,7 @@
   background-color: unset;
   border: none;
   font-family: var(--font-family);
+  font-weight: 400;
   color: hsl(var(--mg-tabs-color-hsl, var(--color-dark)));
   line-height: var(--line-height);
   text-decoration: none;
@@ -58,7 +57,7 @@
 }
 .mg-tabs__navigation-button:disabled, .mg-tabs__navigation-button--disabled {
   cursor: default;
-  opacity: 0.3;
+  opacity: var(--mg-disabled-opacity);
 }
 .mg-tabs__navigation-button:focus-visible {
   z-index: 10;

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

@@ -52,7 +52,7 @@ export class MgTabs {
      * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
-      const tabId = event.currentTarget.getAttribute('data-index');
+      const tabId = event.currentTarget.dataset.index;
       const tab = this.tabs[Number(tabId) - this.startIndex];
       if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
         event.preventDefault();
@@ -78,7 +78,7 @@ export class MgTabs {
     this.handleKeydown = (event) => {
       const parent = event.target.parentElement;
       if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-        this.tabFocus = Number(event.target.getAttribute('data-index'));
+        this.tabFocus = Number(event.target.dataset.index);
         parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
         // Move right
         if (event.key === 'ArrowRight') {
@@ -94,14 +94,15 @@ export class MgTabs {
           if (this.tabFocus < this.startIndex)
             this.tabFocus = this.tabs.length;
         }
+        const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
         // 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 }));
+          parentButtonElement.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();
+          parentButtonElement.setAttribute('tabindex', '0');
+          parentButtonElement.focus();
         }
       }
       else if (event.key === 'Tab') {
@@ -145,7 +146,7 @@ export class MgTabs {
   }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
-      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+      throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
     this.classList.add(`mg-tabs--size-${this.size}`);
   }
@@ -218,13 +219,13 @@ export class MgTabs {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    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: {
+    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", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${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) }))))));
+      }, 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", { key: tab.label, 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"; }

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

@@ -21,7 +21,9 @@
   },
   "form": {
     "required": "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-    "allRequired": "All fields are required"
+    "requiredSingle": "Field with a <strong class=\"is-asterisk\">*</strong> is required",
+    "allRequired": "All fields are required",
+    "allRequiredSingle": "The field is required"
   },
   "message": {
     "closeButton": "Close message"
@@ -53,5 +55,8 @@
   "plusMenu": {
     "moreLabel": "Additional menu",
     "badgeLabel": "Include notification(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

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

@@ -21,7 +21,9 @@
   },
   "form": {
     "required": "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-    "allRequired": "Tous les champs sont obligatoires"
+    "requiredSingle": "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
+    "allRequired": "Tous les champs sont obligatoires",
+    "allRequiredSingle": "Le champ est obligatoire"
   },
   "message": {
     "closeButton": "Fermer le message"
@@ -53,5 +55,8 @@
   "plusMenu": {
     "moreLabel": "Menu complémentaire",
     "badgeLabel": "Notification(s) incluse(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

package/dist/collection/locales/index.js

@@ -7,6 +7,6 @@ const messages = { en, fr };
  * Get Intl object
  *
  * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);

package/dist/collection/styles/mg-icon-animation.scss

@@ -0,0 +1,6 @@
+@mixin rotate($selector, $duration) {
+  transition: $duration;
+  &--rotate#{$selector} {
+    transform: rotate(180deg);
+  }
+}

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

@@ -9,7 +9,7 @@ $navigation-button-column-gap: 1rem;
     .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
     .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
       padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: calc(#{map.get($size, 'height')});
+      height: #{map.get($size, 'height')};
       &,
       ::slotted([slot='label']),
       ::slotted([slot='metadata']) {
@@ -35,6 +35,7 @@ $navigation-button-column-gap: 1rem;
     background-color: unset;
     border: none;
     font-family: var(--font-family);
+    font-weight: 400;
     color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
     line-height: var(--line-height);
     text-decoration: none;
@@ -44,7 +45,7 @@ $navigation-button-column-gap: 1rem;
     &:disabled,
     &--disabled {
       cursor: default;
-      opacity: 0.3;
+      opacity: var(--mg-disabled-opacity);
     }
     &:focus-visible {
       z-index: 10;