@mgdis/mg-components 5.4.0 → 5.5.0

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

@@ -9,29 +9,6 @@ export class MgMenuItem {
      ************/
     this.name = 'mg-menu-item';
     this.navigationButton = `${this.name}__navigation-button`;
-    /**
-     * Define menu-item status. Default: "visible"
-     */
-    this.status = Status.VISIBLE;
-    /**
-     * Define menu-item size. Default: "large".
-     */
-    this.size = 'large';
-    /**
-     * Define menu-item content expanded. Default: false.
-     */
-    this.expanded = false;
-    /************
-     * States *
-     ************/
-    /**
-     * Component button classes
-     */
-    this.navigationButtonClassList = new ClassList([this.navigationButton]);
-    /**
-     * Does component have children. Default: false.
-     */
-    this.hasChildren = false;
     /************
      * Methods *
      ************/
@@ -68,10 +45,22 @@ export class MgMenuItem {
      * @returns {void}
      */
     this.handleElementCLick = (event) => {
-      event.preventDefault();
+      if (this.hasChildren || this.status === Status.DISABLED) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      // toggle expanded when mg-menu-item has child items
       if (this.hasChildren)
         this.toggleExpanded();
     };
+    this.href = undefined;
+    this.status = Status.VISIBLE;
+    this.size = 'large';
+    this.expanded = false;
+    this.navigationButtonClassList = new ClassList([this.navigationButton]);
+    this.direction = undefined;
+    this.isInMainMenu = undefined;
+    this.hasChildren = false;
   }
   validateStatus(newValue, oldValue) {
     if (oldValue !== undefined) {

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

@@ -1,14 +1,6 @@
 import { h } from '@stencil/core';
 export class MgDetails {
   constructor() {
-    /**
-     * Hide summary element
-     */
-    this.hideSummary = false;
-    /**
-     * Define if details are diplayed
-     */
-    this.expanded = false;
     /**
      * Handle details toggle
      *
@@ -17,6 +9,10 @@ export class MgDetails {
     this.handleToggle = () => {
       this.expanded = this.details.open;
     };
+    this.toggleClosed = undefined;
+    this.toggleOpened = undefined;
+    this.hideSummary = false;
+    this.expanded = false;
   }
   validateTitles(newValue) {
     if (newValue === undefined || newValue.trim() === '') {

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

@@ -5,28 +5,6 @@ export class MgForm {
   constructor() {
     // Classes
     this.classAllRequired = 'mg-form--all-required';
-    /**
-     * 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-form');
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if form is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if form is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-form']);
     /**
      * Define required message based on mg-inputs required elements
      * Also
@@ -96,6 +74,14 @@ export class MgForm {
           input.addEventListener('input-valid', this.checkValidity);
       });
     };
+    this.identifier = createID('mg-form');
+    this.name = this.identifier;
+    this.readonly = false;
+    this.disabled = false;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-form']);
+    this.requiredMessage = undefined;
   }
   handleAttributeChange() {
     this.setMgInputs();

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

@@ -20,13 +20,13 @@
   max-width: 47.5rem;
 }
 .mg-illustrated-message__illustration {
-  max-height: 33.5rem;
+  max-height: 18.4rem;
 }
 .mg-illustrated-message__illustration ::slotted([slot=illustration]) {
   width: auto;
   height: auto;
   max-width: 100%;
-  max-height: 33.5rem;
+  max-height: 18.4rem;
 }
 .mg-illustrated-message__illustration.mg-illustrated-message__illustration--small {
   max-height: 6rem;

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

@@ -2,13 +2,7 @@ import { h } from '@stencil/core';
 import { isTagName } from '../../../utils/components.utils';
 export class MgIllustratedMessage {
   constructor() {
-    /**
-     * Define illustration size
-     */
     this.size = 'regular';
-    /**
-     * Define component orientation
-     */
     this.direction = 'vertical';
   }
   /*************

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

@@ -1,47 +1,47 @@
+:host {
+  --mg-card-padding: 0;
+  --mg-card-border-radius: var(--mg-message-border-radius);
+  --mg-card-border: none;
+  --mg-card-overflow: hidden;
+}
+
 .mg-message {
   display: inline-block;
-  position: relative;
-  box-sizing: border-box;
   min-height: var(--default-size);
-  overflow: hidden;
-  background-color: white;
-  border-radius: var(--mg-message-border-radius);
-  box-shadow: var(--box-shadow);
 }
-.mg-message::before {
-  content: "";
+.mg-message__bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 0.3rem;
   height: 100%;
 }
-.mg-message.mg-message--info::before {
+.mg-message.mg-message--info .mg-message__bar {
   background-color: hsl(var(--color-info));
 }
 .mg-message.mg-message--info .mg-message__icon {
   color: hsl(var(--color-info));
 }
-.mg-message.mg-message--warning::before {
+.mg-message.mg-message--warning .mg-message__bar {
   background-color: hsl(var(--color-warning));
 }
 .mg-message.mg-message--warning .mg-message__icon {
   color: hsl(var(--color-warning));
 }
-.mg-message.mg-message--success::before {
+.mg-message.mg-message--success .mg-message__bar {
   background-color: hsl(var(--color-success));
 }
 .mg-message.mg-message--success .mg-message__icon {
   color: hsl(var(--color-success));
 }
-.mg-message.mg-message--danger::before {
+.mg-message.mg-message--danger .mg-message__bar {
   background-color: hsl(var(--color-danger));
 }
 .mg-message.mg-message--danger .mg-message__icon {
   color: hsl(var(--color-danger));
 }
 .mg-message.mg-message--close-button {
-  padding-right: 3.4rem;
+  --mg-card-padding: 0 3.4rem 0 0;
 }
 .mg-message.mg-message--hide {
   display: none;
@@ -50,14 +50,12 @@
   margin: 0;
   padding: 0;
 }
-
 .mg-message__icon {
   position: absolute;
   top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
   left: 1.3rem;
   line-height: 1;
 }
-
 .mg-message__content {
   display: flex;
   flex-wrap: wrap;
@@ -65,23 +63,19 @@
   align-content: stretch;
   padding: 0 1rem 0 3.8rem;
 }
-
 .mg-message__content-slot {
   flex-grow: 1;
   margin: 0.84rem 0;
 }
-
 .mg-message__content-separator {
   display: inline-block;
   width: 4.5rem;
   height: 0;
 }
-
 .mg-message__content-actions-slot {
   padding: 1rem 0;
   text-align: right;
 }
-
 .mg-message__close-button {
   position: absolute;
   top: 0;

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

@@ -13,32 +13,6 @@ export class MgMessage {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
-    /**
-     * 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-message');
-    /**
-     * Message variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    this.closeButton = false;
-    /**
-     * Define if message is hidden
-     */
-    this.hide = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-message']);
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
     /**
      * Handle close button
      */
@@ -75,6 +49,13 @@ export class MgMessage {
           break;
       }
     };
+    this.identifier = createID('mg-message');
+    this.delay = undefined;
+    this.variant = variants[0];
+    this.closeButton = false;
+    this.hide = false;
+    this.classList = new ClassList(['mg-message']);
+    this.hasActions = false;
   }
   validateDelay(newValue) {
     if (newValue && newValue < 2) {
@@ -136,7 +117,7 @@ export class MgMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,9 @@
+:host {
+  --mg-card-border-radius: var(--mg-modal-border-radius);
+  --mg-card-padding: 1.5rem 2.5rem;
+  --mg-card-border: none;
+}
+
 .mg-modal {
   display: flex;
   justify-content: center;
@@ -11,21 +17,20 @@
   padding: 2rem 0;
   background-color: hsla(var(--color-light), 85%);
 }
+.mg-modal mg-card {
+  display: flex;
+  width: 60rem;
+  max-width: 100%;
+  max-height: 100%;
+}
 .mg-modal__dialog {
   display: flex;
   position: relative;
   flex-direction: column;
   align-self: center;
   row-gap: 3rem;
-  padding: 1.5rem 2.5rem;
-  width: 60rem;
   height: fit-content;
-  max-width: 100%;
   max-height: 100%;
-  box-sizing: border-box;
-  background-color: hsl(var(--color-light));
-  box-shadow: var(--box-shadow);
-  border-radius: var(--mg-modal-border-radius);
 }
 .mg-modal__header {
   margin-bottom: 0.5rem;

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

@@ -8,31 +8,6 @@ export class MgModal {
     // IDs
     this.closeButtonId = '';
     this.titleId = '';
-    /**
-     * 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-modal');
-    /**
-     * Define if modal has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Define if modal is hidden
-     */
-    this.hide = false;
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
-    /**
-     * Define if component is using content slot
-     */
-    this.hasContent = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-modal']);
     this.setFocus = () => {
       // Get all focusable elements
       this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
@@ -75,6 +50,13 @@ export class MgModal {
     this.handleClose = () => {
       this.hide = true;
     };
+    this.identifier = createID('mg-modal');
+    this.modalTitle = undefined;
+    this.closeButton = false;
+    this.hide = false;
+    this.hasActions = false;
+    this.hasContent = false;
+    this.classList = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -150,7 +132,7 @@ export class MgModal {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -25,19 +25,6 @@ import { initLocales } from './../../../locales';
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
-    /**
-     * 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-pagination');
-    /**
-     * Component total pages
-     */
-    this.totalPages = 1;
-    /**
-     * Component current page
-     */
-    this.currentPage = 1;
     /**
      * Change current page from target
      *
@@ -70,6 +57,10 @@ export class MgPagination {
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
+    this.identifier = createID('mg-pagination');
+    this.label = undefined;
+    this.totalPages = 1;
+    this.currentPage = 1;
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {

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

@@ -1,8 +1,11 @@
-.mg-panel {
-  background-color: hsl(var(--mg-panel-background));
-  border-radius: var(--mg-panel-border-radius);
-  box-shadow: var(--mg-panel-box-shadow);
-}
+:host {
+  --mg-card-border: none;
+  --mg-card-padding: 0;
+  --mg-card-border-radius: var(--mg-panel-border-radius);
+  --mg-card-background: hsl(var(--mg-panel-background));
+  --mg-card-box-shadow: var(--mg-panel-box-shadow);
+}
+
 .mg-panel__header {
   display: flex;
   flex-wrap: wrap;
@@ -17,6 +20,8 @@
 .mg-panel__header-right {
   padding-left: 0.3rem;
   flex: 1 auto;
+  min-height: var(--default-size);
+  align-items: center;
 }
 .mg-panel__header-left mg-input-text {
   flex-grow: 1;

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

@@ -3,27 +3,6 @@ import { createID, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPanel {
   constructor() {
-    /**
-     * 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-panel');
-    /**
-     * Panel is opened
-     */
-    this.expanded = false;
-    /**
-     * Panel title is editabled
-     */
-    this.titleEditable = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-panel']);
-    /**
-     * Title is in edition mode
-     */
-    this.isEditing = false;
     /************
      * Methods *
      ************/
@@ -108,6 +87,16 @@ export class MgPanel {
       }
       return collapseButton();
     };
+    this.identifier = createID('mg-panel');
+    this.panelTitle = undefined;
+    this.titlePattern = undefined;
+    this.titlePatternErrorMessage = undefined;
+    this.expanded = false;
+    this.expandToggleDisabled = undefined;
+    this.titleEditable = false;
+    this.classList = new ClassList(['mg-panel']);
+    this.isEditing = false;
+    this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -158,7 +147,7 @@ export class MgPanel {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,19 +1,23 @@
-mg-popover {
+:host {
+  --mg-card-padding: 1.5rem;
+  --mg-card-border: none;
+  --mg-card-border-radius: 0.5rem;
+  --mg-card-background: hsl(var(--mg-popover-background-color));
+  position: relative;
   display: contents;
 }
-mg-popover::slotted(*) {
+:host::slotted(*) {
   display: inline-block;
 }
 
 .mg-popover {
   display: none;
-  padding: 1.5rem;
-  z-index: 1000;
-  border-radius: 0.5rem;
-  background-color: hsl(var(--mg-popover-background-color));
-  box-shadow: var(--box-shadow);
+  z-index: 2000;
   color: hsl(var(--mg-popover-font-color));
 }
+.mg-popover mg-card {
+  z-index: -1;
+}
 .mg-popover[data-show] {
   display: block;
 }
@@ -27,8 +31,8 @@ mg-popover::slotted(*) {
   position: absolute;
   width: 2rem;
   height: 2rem;
-  z-index: -1;
-  background: inherit;
+  z-index: 2000;
+  background: hsl(var(--mg-popover-background-color));
 }
 .mg-popover__arrow {
   visibility: hidden;

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

@@ -5,27 +5,6 @@ import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = createID('mg-popover');
-    /**
-     * Popover placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Define if popover has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Display popover
-     */
-    this.display = false;
-    /**
-     * Disable popover
-     */
-    this.disabled = false;
     /**
      * Check if clicked outside of component
      *
@@ -76,6 +55,11 @@ export class MgPopover {
     this.handleCloseButton = () => {
       this.display = false;
     };
+    this.identifier = createID('mg-popover');
+    this.placement = 'bottom';
+    this.closeButton = false;
+    this.display = false;
+    this.disabled = false;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -114,7 +98,7 @@ export class MgPopover {
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     // Get popover content
-    this.popover = this.element.shadowRoot.querySelector(`#${this.identifier}`);
+    this.popover = this.element.shadowRoot.getElementById(this.identifier);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -151,7 +135,7 @@ export class MgPopover {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, 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: "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 }))));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }

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: ['expanded-change'] } },
+};
+/**
+ * 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);
+}