@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/collection/variables.css

@@ -96,7 +96,7 @@
   --color-secondary: hsl(var(--color-neutral));
 
   /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
   /*
     Global
@@ -180,7 +180,7 @@
   --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
-   /*
+  /*
     <mg-illustrated-message>
    */
 
@@ -189,16 +189,16 @@
   /*
     <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-card-padding-default: 1.6rem;
+  --mg-card-border-radius-default: 0.5rem;
+  --mg-card-background-default: hsl(var(--color-light));
+  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
+  --mg-card-box-shadow-default: var(--box-shadow);
 
   /*
     <mg-divider>
   */
-  --mg-divider-background-color: hsla(var(--color-dark), 15%);
+  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
   --mg-divider-thickness: 0.1rem;
   --mg-divider-vertical-spacing: 4rem;
 
@@ -245,7 +245,7 @@
   --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
-  
+
   /*
   <mg-tabs>
   */

package/dist/components/components.utils.js

@@ -86,5 +86,55 @@ const isTagName = (element, tagNames) => {
  * Focusable elements query selector
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
+/**
+ *
+ * @param {Window} localWindow the window we are lookink for other windows
+ * @returns {Window[]} The list of windows found
+ */
+const getWindows = (localWindow) => {
+  const parentWindows = getParentWindows(localWindow);
+  const childWindows = getChildWindows(localWindow);
+  return [localWindow, ...parentWindows, ...childWindows];
+};
+/**
+ * Get parent windows
+ *
+ * @param {Window} localWindow the window we are lookink for parents
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+const getParentWindows = (localWindow, windows = []) => {
+  // Check if is in iframe
+  if (localWindow.self !== localWindow.top) {
+    // Check if we have permission to access parent
+    try {
+      const parentWindow = localWindow.parent;
+      windows.push(parentWindow);
+      return getParentWindows(parentWindow, windows);
+    }
+    catch (err) {
+      console.error('Different hosts between iframes:', err);
+      return windows;
+    }
+  }
+  return windows;
+};
+/**
+ * Get child windows
+ *
+ * @param {Window} localWindow the window we are lookink for children
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+const getChildWindows = (localWindow, windows = []) => {
+  if (localWindow.frames.length > 0) {
+    for (let i = 0; i < localWindow.frames.length; i++) {
+      const childWindow = localWindow.frames[i];
+      windows.push(childWindow);
+      windows.concat(getChildWindows(childWindow, windows));
+    }
+  }
+  return windows;
+};
 
-export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, isTagName as i };
+export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };

package/dist/components/index.d.ts

@@ -25,6 +25,7 @@ export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-mo
 export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
 export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
 export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
+export { MgSkipLinks as MgSkipLinks } from '../types/components/molecules/mg-skip-links/mg-skip-links';
 export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
 export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
 export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';

package/dist/components/index.js

@@ -25,6 +25,7 @@ export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg
 export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
 export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
 export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
+export { MgSkipLinks, defineCustomElement as defineCustomElementMgSkipLinks } from './mg-skip-links.js';
 export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
 export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
 export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';

package/dist/components/index2.js

@@ -39,6 +39,9 @@ const pagination$1 = {
 const panel$1 = {
 	editLabel: "Edit section title."
 };
+const skipLinks$1 = {
+	navLabel: "Quick access"
+};
 const general$1 = {
 	confirm: "Confirm",
 	cancel: "Cancel",
@@ -46,6 +49,10 @@ const general$1 = {
 	next: "next",
 	previous: "previous"
 };
+const plusMenu$1 = {
+	moreLabel: "Additional menu",
+	badgeLabel: "Include notification(s)"
+};
 const en = {
 	errors: errors$1,
 	nbCharLeft: nbCharLeft$1,
@@ -55,7 +62,9 @@ const en = {
 	modal: modal$1,
 	pagination: pagination$1,
 	panel: panel$1,
-	general: general$1
+	skipLinks: skipLinks$1,
+	general: general$1,
+	plusMenu: plusMenu$1
 };
 
 const errors = {
@@ -99,6 +108,9 @@ const pagination = {
 const panel = {
 	editLabel: "Modifier le titre de la section."
 };
+const skipLinks = {
+	navLabel: "Accès rapide"
+};
 const general = {
 	confirm: "Valider",
 	cancel: "Annuler",
@@ -106,6 +118,10 @@ const general = {
 	next: "suivant",
 	previous: "précédent"
 };
+const plusMenu = {
+	moreLabel: "Menu complémentaire",
+	badgeLabel: "Notification(s) incluse(s)"
+};
 const fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
@@ -115,34 +131,63 @@ const fr = {
 	modal: modal,
 	pagination: pagination,
 	panel: panel,
-	general: general
+	skipLinks: skipLinks,
+	general: general,
+	plusMenu: plusMenu
 };
 
-const defaultLocale = 'en';
-const messages = { en, fr };
 /**
- * Get locale
+ * Format number to the locale currency
  *
- * @param {HTMLElement} element element that needs to know the locale to use
- * @returns {string} locale
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
+ * @returns {string} formatted currency
  */
-const getLocale = (element) => {
-  var _a;
-  // validate locale
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
-  return closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
-};
+function localeCurrency(number, locale, currency) {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
+}
 /**
- * Get Intl object
+ * Format number to locale
+ *
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @returns {string} formatted number
+ */
+function localeNumber(number, locale) {
+  return new Intl.NumberFormat(locale).format(number);
+}
+/**
+ * Date RegExp
+ */
+const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/**
+ * Locale date format
+ *
+ * @param {string} date date to format
+ * @param {string} locale locale to apply
+ * @returns {string} formatted date
+ */
+function localeDate(date, locale) {
+  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale).format(new Date(date));
+}
+/**
+ * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
  *
  * @param {HTMLElement} element element we need to get the language
+ * @param {unknown} messages messages to use
+ * @param {string} defaultLocale default messages locale
  * @returns {{ locale: string; messages: unknown }} messages object
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const initLocales = (element) => {
+const getLocaleMessages = (element, messages, defaultLocale) => {
+  var _a;
   // Get local
-  const locale = getLocale(element);
+  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
+  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
   // Only keep first subtag
   const localeSubtag = locale.split('-').shift();
   // Return
@@ -152,4 +197,14 @@ const initLocales = (element) => {
   };
 };
 
-export { initLocales as i };
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get Intl object
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
+
+export { localeCurrency as a, localeNumber as b, dateRegExp as d, initLocales as i, localeDate as l };

package/dist/components/mg-badge2.js

@@ -4,9 +4,9 @@ import { C as ClassList } from './components.utils.js';
 /**
  * List of all possibles variants
  */
-const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
+const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
 
-const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
+const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge.mg-badge--text-color{background-color:currentColor;border-color:currentColor}.mg-badge.mg-badge--text-color .mg-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-badge.mg-badge--text-color.mg-badge--outline{background-color:transparent}.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value{color:currentColor}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,18 +18,15 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      ************/
     // Classes
     this.classOutline = `mg-badge--outline`;
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Component classes
-     */
+    this.value = undefined;
+    this.label = undefined;
+    this.variant = variants[0];
+    this.outline = undefined;
     this.classList = new ClassList(['mg-badge']);
   }
   validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
-      throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
+      throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
     }
   }
   validateLabel(newValue) {
@@ -71,7 +68,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, this.value, h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classList.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],

package/dist/components/mg-button2.js

@@ -5,9 +5,9 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
  * List of all possibles variants
  */
-const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
+const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 
-const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{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}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.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 mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{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:hsl(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.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--link{padding:unset;min-height:unset;background:unset;border:unset;border-radius:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration: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() {
@@ -21,34 +21,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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.
-     */
-    this.isIcon = false;
-    /**
-     * Option to set input disable on click, in order to prevent multi-click.
-     * Parent component have to remove the attribute 'disabled' when the process ends.
-     */
-    this.disableOnClick = false;
-    /**
-     * Define if button is loading, default to false.
-     * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
-     * It's required to reset to false when action/promise in parent is done to stop the loading state
-     */
-    this.loading = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
      *
@@ -91,6 +63,17 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       }
     };
+    this.variant = variants[0];
+    this.identifier = undefined;
+    this.label = undefined;
+    this.type = undefined;
+    this.fullWidth = false;
+    this.form = undefined;
+    this.disabled = undefined;
+    this.isIcon = false;
+    this.disableOnClick = false;
+    this.loading = false;
+    this.classList = new ClassList(['mg-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {

package/dist/components/mg-card.js

@@ -1,40 +1,4 @@
-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();
+import { M as MgCard$1, d as defineCustomElement$1 } from './mg-card2.js';
 
 const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/mg-card2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::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)}";
+
+const MgCard = /*@__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() {
+  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);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgCard as M, defineCustomElement as d };

package/dist/components/mg-character-left2.js

@@ -7,10 +7,9 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Sets the characters to count
-     */
+    this.identifier = undefined;
     this.characters = '';
+    this.maxlength = undefined;
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {

package/dist/components/mg-details.js

@@ -9,14 +9,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.expandedChange = createEvent(this, "expanded-change", 7);
-    /**
-     * Hide summary element
-     */
-    this.hideSummary = false;
-    /**
-     * Define if details are diplayed
-     */
-    this.expanded = false;
     /**
      * Handle details toggle
      *
@@ -25,6 +17,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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/components/mg-divider.js

@@ -7,12 +7,6 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define component size
-     */
     this.size = 'regular';
   }
   /**

package/dist/components/mg-form.js

@@ -13,28 +13,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.formSubmit = createEvent(this, "form-submit", 7);
     // 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
@@ -104,6 +82,14 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           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();