@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/components/MgInput.js

@@ -1,13 +1,5 @@
 import { h } from '@stencil/core/internal/client';
 
-/**
- * Possible input classes
- */
-var InputClass;
-(function (InputClass) {
-  InputClass["ERROR"] = "is-not-valid";
-})(InputClass || (InputClass = {}));
-
 /**
  * Apply in all input child node the aria-describedby attribute
  *
@@ -36,11 +28,8 @@ const manageClasses = (props) => {
     props.classList.add('mg-input--label-on-top');
   if (props.readonly)
     props.classList.add('mg-input--readonly');
-  if (props.width !== undefined)
-    props.classList.add(`mg-input--width-${props.width}`);
-  if (props.readonly || props.disabled) {
-    props.classList.delete(InputClass.ERROR);
-  }
+  if (props.mgWidth !== undefined)
+    props.classList.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
@@ -74,12 +63,7 @@ const MgInput = (props, children, utils) => {
   /**
    * a11y IDs
    */
-  const ariaDescribedbyIDs = new Set();
-  // Character Left
-  const characterLeftId = `${props.identifier}-character-left`;
-  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
-    ariaDescribedbyIDs.add(characterLeftId);
-  }
+  const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
   // Help text
   const helpTextId = `${props.identifier}-help-text`;
   if (typeof props.helpText === 'string' && props.helpText !== '') {
@@ -135,12 +119,11 @@ const MgInput = (props, children, utils) => {
     props.readonly ? (h("div", { class: "mg-input__input-container" },
       h("strong", null, props.readonlyValue || props.value),
       children)) : (h("div", { class: "mg-input__input-container" },
-      h("div", { class: "mg-input__input" },
+      h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
         children,
         !props.labelOnTop && props.tooltip && getTooltip()),
-      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
       props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
-      props.errorMessage && h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+      props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
 
-export { InputClass as I, MgInput as M };
+export { MgInput as M };

package/dist/components/components.utils.js

@@ -72,5 +72,15 @@ class ClassList {
 function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');
 }
+/**
+ * Check if element is a heading
+ *
+ * @param {Element} element slotted element
+ * @param {string[]} tagNames allowed tag names list
+ * @returns {boolean} element is a heading
+ */
+function isTagName(element, tagNames) {
+  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+}
 
-export { ClassList as C, allItemsAreString as a, createID as c };
+export { ClassList as C, allItemsAreString as a, createID as c, isTagName as i };

package/dist/components/index.d.ts

@@ -1,6 +1,29 @@
 /* MgComponents custom elements */
-
-import type { Components, JSX } from "../types/components";
+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 { 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 { 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';
+export { MgInputCheckbox as MgInputCheckbox } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox';
+export { MgInputDate as MgInputDate } from '../types/components/molecules/inputs/mg-input-date/mg-input-date';
+export { MgInputNumeric as MgInputNumeric } from '../types/components/molecules/inputs/mg-input-numeric/mg-input-numeric';
+export { MgInputPassword as MgInputPassword } from '../types/components/molecules/inputs/mg-input-password/mg-input-password';
+export { MgInputRadio as MgInputRadio } from '../types/components/molecules/inputs/mg-input-radio/mg-input-radio';
+export { MgInputSelect as MgInputSelect } from '../types/components/molecules/inputs/mg-input-select/mg-input-select';
+export { MgInputText as MgInputText } from '../types/components/molecules/inputs/mg-input-text/mg-input-text';
+export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
+export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
+export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
+export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';
+export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-modal';
+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 { 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';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -20,7 +43,4 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../types';

package/dist/components/index.js

@@ -1 +1,26 @@
 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 { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
+export { MgDetails, defineCustomElement as defineCustomElementMgDetails } from './mg-details.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';
+export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
+export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
+export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';
+export { MgInputPassword, defineCustomElement as defineCustomElementMgInputPassword } from './mg-input-password.js';
+export { MgInputRadio, defineCustomElement as defineCustomElementMgInputRadio } from './mg-input-radio.js';
+export { MgInputSelect, defineCustomElement as defineCustomElementMgInputSelect } from './mg-input-select.js';
+export { MgInputText, defineCustomElement as defineCustomElementMgInputText } from './mg-input-text.js';
+export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
+export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
+export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
+export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';
+export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg-modal.js';
+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 { 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

@@ -1,10 +1,70 @@
+const errors$1 = {
+	required: "This field is required.",
+	date: {
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		min: "The date cannot be earlier than {min}",
+		max: "The date cannot be later than {max}",
+		minMax: "The date must be between {min} and {max}"
+	},
+	numeric: {
+		min: "The value cannot be less than {min}",
+		max: "The value cannot be greater than {max}",
+		minMax: "The value must be between {min} et {max}"
+	}
+};
+const nbCharLeft$1 = "{counter} characters left.";
+const input$1 = {
+	select: {
+		placeholder: "Select a value"
+	}
+};
+const form$1 = {
+	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+	allRequired: "All fields are required"
+};
+const message$1 = {
+	closeButton: "Close message"
+};
+const modal$1 = {
+	closeButton: "Close modal"
+};
+const pagination$1 = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Next page",
+	previousPage: "Previous page",
+	selectPage: "Select the page to display."
+};
+const panel$1 = {
+	editLabel: "Edit section title."
+};
+const general$1 = {
+	confirm: "Confirm",
+	cancel: "Cancel",
+	close: "Close",
+	next: "next",
+	previous: "previous"
+};
+const en = {
+	errors: errors$1,
+	nbCharLeft: nbCharLeft$1,
+	input: input$1,
+	form: form$1,
+	message: message$1,
+	modal: modal$1,
+	pagination: pagination$1,
+	panel: panel$1,
+	general: general$1
+};
+
 const errors = {
 	required: "Ce champ est obligatoire.",
 	date: {
 		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
 		min: "La date ne peut pas être antérieure au {min}",
 		max: "La date ne peut pas être postérieure au {max}",
-		minMax: "La date doit être comprise entre {min} et {max}"
+		minMax: "La date doit être comprise entre le {min} et le {max}"
 	},
 	numeric: {
 		min: "La valeur ne peut pas être inférieure à {min}",
@@ -26,9 +86,10 @@ const message = {
 	closeButton: "Fermer le message"
 };
 const modal = {
-	closeButton: "Fermer la modal"
+	closeButton: "Fermer la modale"
 };
 const pagination = {
+	label: "Pagination",
 	page: "page",
 	pages: "pages",
 	nextPage: "Page suivante",
@@ -36,10 +97,10 @@ const pagination = {
 	selectPage: "Sélectionner la page à afficher."
 };
 const panel = {
-	editLabel: "Modifer le titre de la section."
+	editLabel: "Modifier le titre de la section."
 };
 const general = {
-	validate: "Valider",
+	confirm: "Valider",
 	cancel: "Annuler",
 	close: "Fermer",
 	next: "suivant",
@@ -57,8 +118,36 @@ const fr = {
 	general: general
 };
 
-const locale = 'fr-FR';
-const messages = fr;
-const currency = 'EUR';
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get locale
+ *
+ * @param {HTMLElement} element element that needs to know the locale to use
+ * @returns {string} locale
+ */
+const getLocale = (element) => {
+  var _a;
+  return ((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang) || navigator.language || defaultLocale;
+};
+/**
+ * Get Intl object
+ * 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
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const initLocales = (element) => {
+  // Get local
+  const locale = getLocale(element);
+  // Only keep first subtag
+  const localeSubtag = locale.split('-').shift();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};
 
-export { currency as c, locale as l, messages as m };
+export { initLocales as i };

package/dist/components/locale.utils.js

@@ -1,21 +1,22 @@
-import { l as locale, c as currency } from './index2.js';
-
 /**
  * Format number to the locale currency
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-function localeCurrency(number) {
+function localeCurrency(number, locale, currency) {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 }
 /**
  * Format number to locale
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-function localeNumber(number) {
+function localeNumber(number, locale) {
   return new Intl.NumberFormat(locale).format(number);
 }
 /**
@@ -26,9 +27,10 @@ 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) {
+function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }

package/dist/components/mg-badge2.js

@@ -6,13 +6,18 @@ import { C as ClassList } from './components.utils.js';
  */
 const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
 
-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}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);-webkit-box-sizing:border-box;box-sizing:border-box;border:0.1rem solid;border-radius:50%;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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}.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 MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant
      */
@@ -27,15 +32,22 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
     }
-    this.classList.add(`mg-badge--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-badge--${oldValue}`);
+      }
+      this.classList.add(`mg-badge--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-badge--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /**
    * Check if props are well configured on init

package/dist/components/mg-button2.js

@@ -7,7 +7,7 @@ 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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;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);-webkit-box-sizing:border-box;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;-ms-touch-action:manipulation;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;-ms-flex-pack:center;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-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));color:hsl(var(--mg-button-primary-font-color));background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))), to(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%))));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-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));color:hsl(var(--mg-button-secondary-font-color));background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))), to(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%))));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(--color-danger-h), var(--color-danger-s), var(--color-danger-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))), to(hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%))));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(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));color:hsl(var(--color-danger));background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))), to(hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%))));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(--color-info-h), var(--color-info-s), var(--color-info-l));border-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))), to(hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%))));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(--color-success-h), var(--color-success-s), var(--color-success-l));border-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - 10%));color:hsl(var(--color-dark));background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))), to(hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%))));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:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;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%;-webkit-transform:translate(-50%, -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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;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 = ".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 MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -26,10 +26,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * If not set, it will be created.
      */
     this.identifier = createID('mg-button');
-    /**
-     * Disable button
-     */
-    this.disabled = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -40,15 +36,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Parent component have to remove the attribute 'disabled' when the process ends.
      */
     this.disableOnClick = false;
-    /**
-     * Prop to set aria-expanded on button element
-     */
-    this.expanded = false;
-    /**
-     * Option to set aria-haspopup
-     * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
-     */
-    this.haspopup = false;
     /**
      * Define if button is loading, default to false.
      * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -75,11 +62,16 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-button> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    this.classList.add(`mg-button--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-button--${oldValue}`);
+      }
+      this.classList.add(`mg-button--${newValue}`);
+    }
   }
   disabledHandler(isDisabled) {
     // Remove loading when enable
@@ -122,7 +114,10 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled.toString(), "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+    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))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -135,6 +130,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "identifier": [1],
     "label": [1],
+    "type": [1],
+    "form": [1025],
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
@@ -7,32 +7,10 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /************
-     * Internal *
-     ************/
-    this.mustacheCounter = '{counter}';
-    /**
-     * Template to display remaining characters.
-     * Must have {counter} inside
-     */
-    this.template = messages.nbCharLeft;
     /**
      * Sets the characters to count
      */
     this.characters = '';
-    /**
-     * Calculate number character left
-     *
-     * @returns {string} message
-     */
-    this.getMessage = () => {
-      return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
-    };
-  }
-  validateTemplate(newValue) {
-    if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
-      throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
-    }
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {
@@ -48,8 +26,8 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @returns {void}
    */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -57,16 +35,15 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
+  get element() { return this; }
   static get watchers() { return {
-    "template": ["validateTemplate"],
     "maxlength": ["validateMaxlength"]
   }; }
   static get style() { return mgCharacterLeftCss; }
 }, [2, "mg-character-left", {
     "identifier": [1],
-    "template": [1],
     "characters": [1],
     "maxlength": [2]
   }]);

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

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