@mgdis/mg-components 4.2.1 → 5.1.0

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

@@ -1,9 +1,8 @@
 .mg-panel {
   background-color: hsl(var(--mg-panel-background));
   border-radius: var(--mg-panel-border-radius);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--mg-panel-box-shadow);
 }
-
 .mg-panel__header {
   display: flex;
   flex-wrap: wrap;
@@ -11,38 +10,31 @@
   padding: 0 1rem 0 0.3rem;
   align-items: flex-start;
 }
-
-.mg-panel__header-left,
-.mg-panel__header-right {
+.mg-panel__header-left, .mg-panel__header-right {
   display: flex;
   margin: 0.3rem 0;
 }
-
-.mg-panel__header-left--full {
-  flex: 1 1 auto;
-}
-
 .mg-panel__header-right {
+  padding-left: 0.3rem;
   flex: 1 auto;
 }
-
 .mg-panel__header-left mg-input-text {
   flex-grow: 1;
+  margin-left: 0.3rem;
 }
-
-.mg-panel__header-left mg-button:not([slot=append-input]) {
-  margin: 0 0.3rem 0 0;
+.mg-panel__header-left mg-button + mg-button:not([slot=append-input]) {
+  margin-left: 0.3rem;
+}
+.mg-panel__header-left.mg-panel__header-left--full {
+  flex: 1 1 auto;
 }
-.mg-panel__header-left mg-button:not([slot=append-input]) > *:first-of-type {
-  font-family: var(--font-family-heading);
-  font-size: 1.4rem;
-  font-weight: 600;
+.mg-panel__collapse-button-content {
+  --font-size: 1.4rem;
+  --mg-button-font-weight: 600;
 }
-
 .mg-panel__content {
   padding: var(--mg-panel-content-padding);
 }
-
 .mg-panel ::slotted([slot=header-right]) {
   display: flex;
   flex-wrap: wrap;

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

@@ -93,7 +93,7 @@ export class MgPanel {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle)));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
@@ -111,9 +111,7 @@ export class MgPanel {
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-panel> prop "panelTitle" is required.');
-      console.error('<mg-panel> prop "panelTitle" is required.');
+      throw new Error('<mg-panel> prop "panelTitle" is required.');
     }
     this.titleChange.emit(newValue);
   }

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

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../.storybook/utils';
-import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
   title: 'Molecules/mg-popover',
@@ -11,11 +10,7 @@ export default {
   },
   argTypes: {
     placement: {
-      options: placements,
       control: { type: 'select' },
-      table: {
-        defaultValue: { summary: 'bottom' },
-      },
     },
   },
 };

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

@@ -8,7 +8,7 @@ mg-popover::slotted(*) {
 .mg-popover {
   display: none;
   padding: 1.5rem;
-  z-index: 9999;
+  z-index: 1000;
   border-radius: 0.5rem;
   background-color: hsl(var(--mg-popover-background-color));
   box-shadow: var(--box-shadow);
@@ -51,7 +51,7 @@ mg-popover::slotted(*) {
   left: -6px;
 }
 .mg-popover__title ::slotted([slot=title]) {
-  margin: 0 0 1rem;
-  font-size: var(--mg-popover-title-font-size);
+  margin: 0 0 1rem !important;
+  font-size: var(--mg-popover-title-font-size) !important;
   font-weight: 600;
 }

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

@@ -33,8 +33,7 @@ export class MgPopover {
      * @returns {void}
      */
     this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
+      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
         this.display = false;
       }
     };
@@ -106,8 +105,8 @@ export class MgPopover {
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement && !isTagName(slotedTitleElement, headingTags)) {
+    const slottedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
       throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
     // Set close button id
@@ -115,15 +114,16 @@ export class MgPopover {
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     // Get popover content
-    this.popover = this.element.querySelector(`#${this.identifier}`);
-    //Get interactive element
-    const interactiveElement = this.element.firstElementChild;
+    this.popover = this.element.shadowRoot.querySelector(`#${this.identifier}`);
+    //Get interactive element (first element without slot attribute)
+    const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
     interactiveElement.setAttribute('aria-controls', this.identifier);
     interactiveElement.setAttribute('aria-expanded', `${this.display}`);
     // Create popperjs popover
     this.popper = createPopper(interactiveElement, this.popover, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -151,10 +151,10 @@ export class MgPopover {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !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: "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 }))));
   }
   static get is() { return "mg-popover"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["mg-popover.scss"]
@@ -194,7 +194,7 @@ export class MgPopover {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "./mg-popover.conf"
+              "path": "@popperjs/core"
             }
           }
         },

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

@@ -131,9 +131,7 @@ export class MgTabs {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-tabs> prop "label" is required.');
-      console.error('<mg-tabs> prop "label" is required.');
+      throw new Error('<mg-tabs> prop "label" is required.');
     }
   }
   validateSize(newValue) {

package/dist/collection/utils/components.utils.js

@@ -5,7 +5,7 @@
  * @param {number} length ID length
  * @returns {string} ID
  */
-export function createID(prefix = '', length = 10) {
+export const createID = (prefix = '', length = 10) => {
   let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
@@ -13,7 +13,7 @@ export function createID(prefix = '', length = 10) {
     ID += chars.charAt(Math.floor(Math.random() * charsLength));
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
-}
+};
 /**
  * Class to manage component classlist
  * Set() are not working when imported in project
@@ -69,9 +69,9 @@ export class ClassList {
  * @param {string[]} items items to check
  * @returns {boolean} all items are string
  */
-export function allItemsAreString(items) {
+export const allItemsAreString = (items) => {
   return items && items.every(item => typeof item === 'string');
-}
+};
 /**
  * Check if element is a heading
  *
@@ -79,6 +79,10 @@ export function allItemsAreString(items) {
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
  */
-export function isTagName(element, tagNames) {
+export const isTagName = (element, tagNames) => {
   return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
-}
+};
+/**
+ * Focusable elements query selector
+ */
+export const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';

package/dist/collection/variables.css

@@ -168,11 +168,32 @@
   /*
     <mg-panel>
    */
-
   --mg-panel-border-radius: 0.5rem;
   --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
+  --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
+  /*
+    <mg-illustrated-message>
+   */
+  --mg-illustrated-message-padding-vertical: 4rem;
+
+  /*
+    <mg-card>
+   */
+  --mg-card-padding: 1.6rem;
+  --mg-card-border-radius: 0.5rem;
+  --mg-card-background: hsl(var(--color-light));
+  --mg-card-border: 0.1rem solid hsla(var(--color-dark), 5%);
+  --mg-card-box-shadow: var(--box-shadow);
+
+  /*
+    <mg-divider>
+  */
+  --mg-divider-background-color: hsla(var(--color-dark), 15%);
+  --mg-divider-thickness: 0.1rem;
+  --mg-divider-vertical-spacing: 4rem;
+
   /*
     Layout
    */

package/dist/components/MgInput.js

@@ -51,9 +51,7 @@ const MgInput = (props, children, utils) => {
    * Check required properties
    */
   if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
-    // TODO: throw new Error on next major (5.0.0)
-    // throw new Error('<mg-input> prop "identifier" is required.');
-    console.error('<mg-input> prop "identifier" is required.');
+    throw new Error('<mg-input> prop "identifier" is required.');
   }
   if (typeof props.label !== 'string' || props.label.trim() === '') {
     throw new Error('<mg-input> prop "label" is required.');

package/dist/components/components.utils.js

@@ -5,7 +5,7 @@
  * @param {number} length ID length
  * @returns {string} ID
  */
-function createID(prefix = '', length = 10) {
+const createID = (prefix = '', length = 10) => {
   let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
@@ -13,7 +13,7 @@ function createID(prefix = '', length = 10) {
     ID += chars.charAt(Math.floor(Math.random() * charsLength));
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
-}
+};
 /**
  * Class to manage component classlist
  * Set() are not working when imported in project
@@ -69,9 +69,9 @@ class ClassList {
  * @param {string[]} items items to check
  * @returns {boolean} all items are string
  */
-function allItemsAreString(items) {
+const allItemsAreString = (items) => {
   return items && items.every(item => typeof item === 'string');
-}
+};
 /**
  * Check if element is a heading
  *
@@ -79,8 +79,12 @@ function allItemsAreString(items) {
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
  */
-function isTagName(element, tagNames) {
+const isTagName = (element, tagNames) => {
   return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
-}
+};
+/**
+ * Focusable elements query selector
+ */
+const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 
-export { ClassList as C, allItemsAreString as a, createID as c, isTagName as i };
+export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, isTagName as i };

package/dist/components/index.d.ts

@@ -1,8 +1,10 @@
 /* MgComponents custom elements */
 export { MgBadge as MgBadge } from '../types/components/atoms/mg-badge/mg-badge';
 export { MgButton as MgButton } from '../types/components/atoms/mg-button/mg-button';
+export { MgCard as MgCard } from '../types/components/atoms/mg-card/mg-card';
 export { MgCharacterLeft as MgCharacterLeft } from '../types/components/atoms/mg-character-left/mg-character-left';
 export { MgDetails as MgDetails } from '../types/components/molecules/mg-details/mg-details';
+export { MgDivider as MgDivider } from '../types/components/atoms/mg-divider/mg-divider';
 export { MgForm as MgForm } from '../types/components/molecules/mg-form/mg-form';
 export { MgIcon as MgIcon } from '../types/components/atoms/mg-icon/mg-icon';
 export { MgIllustratedMessage as MgIllustratedMessage } from '../types/components/molecules/mg-illustrated-message/mg-illustrated-message';

package/dist/components/index.js

@@ -1,8 +1,10 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
 export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
+export { MgCard, defineCustomElement as defineCustomElementMgCard } from './mg-card.js';
 export { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
 export { MgDetails, defineCustomElement as defineCustomElementMgDetails } from './mg-details.js';
+export { MgDivider, defineCustomElement as defineCustomElementMgDivider } from './mg-divider.js';
 export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
 export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
 export { MgIllustratedMessage, defineCustomElement as defineCustomElementMgIllustratedMessage } from './mg-illustrated-message.js';

package/dist/components/mg-badge2.js

@@ -34,9 +34,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-badge> prop "label" is required.');
-      console.error('<mg-badge> prop "label" is required.');
+      throw new Error('<mg-badge> prop "label" is required.');
     }
   }
   validateVariant(newValue, oldValue) {

package/dist/components/mg-button2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { C as ClassList } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
@@ -7,20 +7,28 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
  */
 const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
 
-const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:flex;align-items:center;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
+const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button:not(.mg-button--disabled){outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}:host([full-width]){display:block}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     /************
      * Internal *
      ************/
     this.onClickElementFn = null;
+    this.classDisabled = 'mg-button--disabled';
+    this.classLoading = 'mg-button--loading';
+    this.classFullWidth = 'mg-button--full-width';
     /**
      * Define button variant
      */
     this.variant = variants[0]; // Primary
+    /**
+     * Set button to full-width
+     */
+    this.fullWidth = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -51,11 +59,38 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.disabled)
         event.stopPropagation();
       // Used to prevent multi-click.
-      if (this.disableOnClick && !this.disabled) {
+      else if (this.disableOnClick) {
         this.loading = true;
         this.disabled = true;
       }
     };
+    /**
+     * Handle onKeyDown event
+     *
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.handleKeydown = (event) => {
+      if (!this.disabled && event.key === ' ') {
+        event.preventDefault();
+      }
+      else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
+        event.preventDefault();
+        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      }
+    };
+    /**
+     * Handle onKeyUp event
+     *
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.handleKeyup = (event) => {
+      if (!this.disabled && event.key === ' ') {
+        event.preventDefault();
+        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      }
+    };
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -68,6 +103,17 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.classList.add(`mg-button--${newValue}`);
     }
   }
+  validateFullWidth(newValue) {
+    if (newValue && this.isIcon) {
+      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    }
+    else if (newValue) {
+      this.classList.add(this.classFullWidth);
+    }
+    else {
+      this.classList.delete(this.classFullWidth);
+    }
+  }
   disabledHandler(isDisabled) {
     // Remove loading when enable
     // Will be set back onclick
@@ -76,14 +122,21 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     // Manage if onclick
     this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+    // apply style
+    if (isDisabled) {
+      this.classList.add(this.classDisabled);
+    }
+    else {
+      this.classList.delete(this.classDisabled);
+    }
   }
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it
     if (newValue) {
-      this.classList.add('mg-button--loading');
+      this.classList.add(this.classLoading);
     }
     else {
-      this.classList.delete('mg-button--loading');
+      this.classList.delete(this.classLoading);
     }
   }
   /**
@@ -93,6 +146,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
+    this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
@@ -109,30 +163,26 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), type: this.type, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": this.controls, "aria-haspopup": this.haspopup !== undefined && this.haspopup.toString(), onClick: this.handleClick,
-      // has stencil does not support form attribute on button, we set the attribute from the ref
-      // https://github.com/ionic-team/stencil/issues/2703#issuecomment-1050943715
-      ref: btn => this.form && btn.setAttribute('form', this.form) }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+    return (h(Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
     "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
     "disabled": ["disabledHandler"],
     "loading": ["loadingHandler"]
   }; }
   static get style() { return mgButtonCss; }
-}, [6, "mg-button", {
+}, [1, "mg-button", {
     "variant": [1],
     "identifier": [1],
     "label": [1],
     "type": [1],
+    "fullWidth": [1028, "full-width"],
     "form": [1025],
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],
-    "expanded": [4],
-    "controls": [1],
-    "haspopup": [8],
     "loading": [32],
     "classList": [32]
   }]);

package/dist/components/mg-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgCard extends Components.MgCard, HTMLElement {}
+export const MgCard: {
+  prototype: MgCard;
+  new (): MgCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-card.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const mgCardCss = ".mg-card{padding:var(--mg-card-padding);border-radius:var(--mg-card-border-radius);background:var(--mg-card-background);border:var(--mg-card-border);box-shadow:var(--mg-card-box-shadow)}";
+
+const MgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
+  static get style() { return mgCardCss; }
+}, [1, "mg-card"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgCard$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgCard = MgCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgCard, defineCustomElement };