@mgdis/mg-components 5.5.0 → 5.7.0

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

@@ -15,13 +15,14 @@ export class MgIllustratedMessage {
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const imageTags = ['img', 'svg'];
+    const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
     if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
       throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
-    else if (!isTagName(this.element.querySelector('[slot="illustration"]'), imageTags)) {
-      throw new Error(`<mg-illustrated-message> Slotted illustration must be an image: ${imageTags.join(', ')}`);
+    else if (slottedIllustrations.length !== 1) {
+      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
     }
+    slottedIllustrations[0].setAttribute('aria-hidden', 'true');
   }
   /**
    * Render

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

@@ -81,6 +81,13 @@
   top: 0;
   right: 0;
 }
+.mg-message ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+}
 
 .mg-message,
 mg-message {

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

@@ -13,22 +13,49 @@ export class MgMessage {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
+    // Manage hover
+    this.isFocused = false;
+    this.isHovered = false;
     /**
-     * Handle close button
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.handleClose = () => {
-      this.hide = true;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
-     * Hide component whith delay
+     * Clear timer
+     *
+     * @returns {void}
      */
-    this.hideWithDelay = () => {
-      if (this.delay > 0 && this.hide !== true) {
-        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-      }
-      else if (this.storedTimer !== null) {
-        clearTimeout(this.storedTimer);
-      }
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
+    /**
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
+     */
+    this.timerEvents = (event) => {
+      this.clearTimer();
+      const isMouseEvent = event.type === 'mouseenter';
+      // Needed to ensure we don't start the timer
+      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+      // Restart timer when loose focus AND mouse leave
+      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+        // Start timer if needed
+        if (!this.isFocused && !this.isHovered)
+          this.setTimer();
+      }, { once: true });
+    };
+    /**
+     * Handle close button
+     */
+    this.handleClose = () => {
+      this.hide = true;
     };
     /**
      * Get icon corresponding to variant
@@ -64,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) {
@@ -83,12 +110,26 @@ export class MgMessage {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      // Remove event Listener
+      ['focusin', 'mouseenter'].forEach(event => {
+        this.element.removeEventListener(event, this.timerEvents);
+      });
+      // Clear Timer
+      this.clearTimer();
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      // If delay is set
+      if (this.delay > 1) {
+        // Start timer
+        this.setTimer();
+        // Stop timer when get focus or mouse enter
+        ['focusin', 'mouseenter'].forEach(event => {
+          this.element.addEventListener(event, this.timerEvents);
+        });
+      }
     }
-    this.hideWithDelay();
   }
   /*************
    * Lifecycle *

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

@@ -15,7 +15,7 @@
   left: 0;
   z-index: 2000;
   padding: 2rem 0;
-  background-color: hsla(var(--color-light), 85%);
+  background-color: hsl(var(--color-light), 0.85);
 }
 .mg-modal mg-card {
   display: flex;
@@ -55,4 +55,11 @@
 }
 .mg-modal.mg-modal--hide {
   display: none;
+}
+.mg-modal ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

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.css

@@ -45,4 +45,11 @@
   flex-wrap: wrap;
   gap: 1rem;
   margin-left: auto;
+}
+.mg-panel ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

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

@@ -1,5 +1,5 @@
 :host {
-  --mg-card-padding: 1.5rem;
+  --mg-card-padding: var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));
   --mg-card-border: none;
   --mg-card-border-radius: 0.5rem;
   --mg-card-background: hsl(var(--mg-popover-background-color));
@@ -12,11 +12,12 @@
 
 .mg-popover {
   display: none;
+  padding: 1rem;
   z-index: 2000;
   color: hsl(var(--mg-popover-font-color));
 }
 .mg-popover mg-card {
-  z-index: -1;
+  position: relative;
 }
 .mg-popover[data-show] {
   display: block;
@@ -27,35 +28,91 @@
   margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
   margin-left: 3rem;
 }
-.mg-popover__arrow, .mg-popover__arrow::before {
-  position: absolute;
-  width: 2rem;
-  height: 2rem;
-  z-index: 2000;
-  background: hsl(var(--mg-popover-background-color));
-}
 .mg-popover__arrow {
+  position: absolute;
   visibility: hidden;
+  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
+  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
 }
-.mg-popover__arrow::before {
+.mg-popover__arrow:before {
   visibility: visible;
   content: "";
-  transform: rotate(45deg);
+  position: absolute;
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
+  height: 1rem;
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
+  left: calc(var(--mg-card-border-radius) + 1rem);
+  border-right: calc(3rem / 2) solid transparent;
+  border-left: calc(3rem / 2) solid transparent;
 }
 .mg-popover[data-popper-placement^=top] > .mg-popover__arrow {
-  bottom: -6px;
+  bottom: 0.1rem;
+  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow:before {
+  border-top: 1rem solid hsl(var(--mg-popover-background-color));
 }
 .mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
-  top: -6px;
+  top: 0.1rem;
+  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow:before {
+  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
+  width: 1rem;
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
+  top: calc(var(--mg-card-border-radius) + 1rem);
+  border-top: calc(3rem / 2) solid transparent;
+  border-bottom: calc(3rem / 2) solid transparent;
 }
 .mg-popover[data-popper-placement^=left] > .mg-popover__arrow {
-  right: -6px;
+  right: 0.1rem;
+  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow:before {
+  border-left: 1rem solid hsl(var(--mg-popover-background-color));
 }
 .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
-  left: -6px;
+  left: 0.1rem;
+  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
+}
+.mg-popover[data-popper-placement^=right] > .mg-popover__arrow:before {
+  border-right: 1rem solid hsl(var(--mg-popover-background-color));
+}
+.mg-popover[data-popper-placement^=left-start], .mg-popover[data-popper-placement^=left-end], .mg-popover[data-popper-placement^=right-start], .mg-popover[data-popper-placement^=right-end] {
+  padding: 0 1rem;
+}
+.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow {
+  height: calc(3rem + 2 * var(--mg-card-border-radius));
+}
+.mg-popover[data-popper-placement^=left-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=left-end] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-start] > .mg-popover__arrow:before, .mg-popover[data-popper-placement^=right-end] > .mg-popover__arrow:before {
+  top: var(--mg-card-border-radius);
 }
 .mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem !important;
   font-size: var(--mg-popover-title-font-size) !important;
   font-weight: 600;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top] {
+  padding-bottom: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom] {
+  padding-top: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=left] {
+  padding-right: 0;
+}
+.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start], .mg-popover--arrow-hide.mg-popover[data-popper-placement^=right] {
+  padding-left: 0;
+}
+.mg-popover ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

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

@@ -1,10 +1,12 @@
 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 { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
+    // Classes
+    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      *
@@ -12,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;
       }
     };
@@ -23,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
@@ -31,7 +36,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 +52,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 +66,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 +96,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,11 +132,22 @@ export class MgPopover {
         {
           name: 'offset',
           options: {
-            offset: [0, 10],
+            offset: [0, 0],
           },
         },
       ],
     });
+    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)
@@ -135,7 +166,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 +223,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 +297,11 @@ export class MgPopover {
       }
     };
   }
+  static get states() {
+    return {
+      "classList": {}
+    };
+  }
   static get events() {
     return [{
         "method": "displayChange",
@@ -269,6 +323,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/mg-skip-links.js

@@ -1,7 +1,21 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 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 +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 }, 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"; }
@@ -67,6 +81,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/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,31 @@
 .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);
+  font-weight: 400;
   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: var(--mg-disabled-opacity);
 }
 .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));