@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/collection/variables.scss

@@ -53,11 +53,11 @@
   --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
 
   /* Danger */
-  /* #df242c; */
-  /* rgb(223, 36, 44); */
+  /* #db1f29; */
+  /* rgb(219, 31, 41); */
   --color-danger-h: 357;
-  --color-danger-s: 74.5%;
-  --color-danger-l: 50.8%;
+  --color-danger-s: 75%;
+  --color-danger-l: 49%;
   --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
 
   /* Dark */
@@ -76,6 +76,21 @@
   --color-light-l: 100%;
   --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
 
+  /* Primary */
+  --color-primary-h: hsl(var(--color-dark-h));
+  --color-primary-s: hsl(var(--color-dark-s));
+  --color-primary-l: hsl(var(--color-dark-l));
+  --color-primary: hsl(var(--color-dark));
+
+  /* Secondary */
+  --color-secondary-h: hsl(var(--color-neutral-h));
+  --color-secondary-s: hsl(var(--color-neutral-s));
+  --color-secondary-l: hsl(var(--color-neutral-l));
+  --color-secondary: hsl(var(--color-neutral));
+
+  /* Shadow */
+  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+
   /*
     Global
    */
@@ -84,6 +99,7 @@
   /*
     <mg-icon>
    */
+  --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
   --mg-icon-large-size: 2.4rem;
   --mg-icon-extra-large-size: 3.6rem;
@@ -95,6 +111,8 @@
   --mg-button-border-radius: 0.3rem;
   --mg-button-icon-border-radius: var(--default-size);
   --mg-button-disabled-opacity: 0.6;
+  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
+  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -140,6 +158,20 @@
    */
   --mg-message-border-radius: 0.3rem;
 
+  /*
+    <mg-modal>
+   */
+  --mg-modal-border-radius: 0.5rem;
+  --mg-modal-title-font-size: 1.8rem;
+  --mg-modal-content-font-size: 1.2rem;
+
+  /*
+    <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%);
+
   /*
     Layout
    */
@@ -148,7 +180,6 @@
   /*
     Forms
    */
-  --mg-form-group-vertical-space: 1.5rem;
 
   /*
     <mg-input-...>
@@ -158,6 +189,9 @@
   --mg-inputs-color: #b5c2c9;
   --mg-inputs-spacer: 1rem;
 
+  /* Error message background */
+  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
+
   /* Input focus shadow */
   /* #b5c2c9 */
   /* rgb(0, 221, 255); */

package/dist/components/MgInput.js

@@ -1,19 +1,12 @@
 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
- * @param children
- * @param ariaDescribedbyIDs
- * @param utils
- * @returns {VNode[]}
+ *
+ * @param {VNode[]} children Represent scoped elements
+ * @param {Set<string>} ariaDescribedbyIDs List of IDs
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
   if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -26,7 +19,8 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- * @param props
+ *
+ * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
   props.classList.add('mg-input');
@@ -34,24 +28,23 @@ 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}`);
 };
 /**
- * Define tagname based on props
- * @param isFieldset
+ * Get tagname
+ *
+ * @param {boolean} isFieldset is fieldset
  * @returns {string} tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- * @param props MgInput Interface Props
- * @param children Represent scoped elements
- * @param utils Stencil.js utils
- * @returns JSX template
+ *
+ * @param {MgInputProps} props MgInput Interface Props
+ * @param {VNode[]} children Represent scoped elements
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} input template
  */
 const MgInput = (props, children, utils) => {
   /**
@@ -70,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 !== '') {
@@ -113,15 +101,17 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   * @returns mg-tooltip
+   *
+   * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
     h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
-   * @returns mg-input-title
+   *
+   * @returns {VNode[]} mg-input-title
    */
-  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required, "is-legend": props.isFieldset }, props.label));
+  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled, "is-legend": props.isFieldset }, props.label));
   return (h(TagName, { class: props.classList.join() },
     props.labelOnTop ? (h("div", { class: "mg-input__title" },
       getInputTitle(),
@@ -129,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

@@ -1,13 +1,15 @@
 /**
  * Create random ID
- * @param prefix {string} add prefix to created ID
+ *
+ * @param {string} prefix  add prefix to created ID
+ * @param {number} length ID length
  * @returns {string} ID
  */
 function createID(prefix = '', length = 10) {
   let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
-  for (var i = 0; i < length; i++) {
+  for (let i = 0; i < length; i++) {
     ID += chars.charAt(Math.floor(Math.random() * charsLength));
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
@@ -20,7 +22,8 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     * @param className
+     *
+     * @param {string} className class name to add
      * @returns {void}
      */
     this.add = (className) => {
@@ -30,7 +33,8 @@ class ClassList {
     };
     /**
      * Delete class
-     * @param className
+     *
+     * @param {string} className class name to delete
      * @returns {void}
      */
     this.delete = (className) => {
@@ -41,15 +45,17 @@ class ClassList {
     };
     /**
      * Check if class exist in list
-     * @param className
-     * @returns {boolean}
+     *
+     * @param {string} className class name to check
+     * @returns {boolean} class name is in the list
      */
     this.has = (className) => {
       return this.classes.includes(className);
     };
     /**
      * Join classes seperated by spaces
-     * @returns {string}
+     *
+     * @returns {string} joined values
      */
     this.join = () => {
       return this.classes.join(' ');
@@ -59,8 +65,9 @@ class ClassList {
 }
 /**
  * Check if all items are string
- * @param items
- * @returns {boolean}
+ *
+ * @param {string[]} items items to check
+ * @returns {boolean} all items are string
  */
 function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');

package/dist/components/index.d.ts

@@ -1,6 +1,27 @@
 /* MgComponents custom elements */
-
-import type { Components, JSX } from "../types/components";
+export { MgBadge as MgBadge } from '../types/components/mg-badge/mg-badge';
+export { MgButton as MgButton } from '../types/components/mg-button/mg-button';
+export { MgCharacterLeft as MgCharacterLeft } from '../types/components/mg-character-left/mg-character-left';
+export { MgForm as MgForm } from '../types/components/mg-form/mg-form';
+export { MgIcon as MgIcon } from '../types/components/mg-icon/mg-icon';
+export { MgInputCheckbox as MgInputCheckbox } from '../types/components/mg-input-checkbox/mg-input-checkbox';
+export { MgInputDate as MgInputDate } from '../types/components/mg-input-date/mg-input-date';
+export { MgInputNumeric as MgInputNumeric } from '../types/components/mg-input-numeric/mg-input-numeric';
+export { MgInputPassword as MgInputPassword } from '../types/components/mg-input-password/mg-input-password';
+export { MgInputRadio as MgInputRadio } from '../types/components/mg-input-radio/mg-input-radio';
+export { MgInputSelect as MgInputSelect } from '../types/components/mg-input-select/mg-input-select';
+export { MgInputText as MgInputText } from '../types/components/mg-input-text/mg-input-text';
+export { MgInputTextarea as MgInputTextarea } from '../types/components/mg-input-textarea/mg-input-textarea';
+export { MgInputTitle as MgInputTitle } from '../types/components/mg-input-title/mg-input-title';
+export { MgInputToggle as MgInputToggle } from '../types/components/mg-input-toggle/mg-input-toggle';
+export { MgMessage as MgMessage } from '../types/components/mg-message/mg-message';
+export { MgModal as MgModal } from '../types/components/mg-modal/mg-modal';
+export { MgPagination as MgPagination } from '../types/components/mg-pagination/mg-pagination';
+export { MgPanel as MgPanel } from '../types/components/mg-panel/mg-panel';
+export { MgPopover as MgPopover } from '../types/components/mg-popover/mg-popover';
+export { MgTabs as MgTabs } from '../types/components/mg-tabs/mg-tabs';
+export { MgTag as MgTag } from '../types/components/mg-tag/mg-tag';
+export { MgTooltip as MgTooltip } from '../types/components/mg-tooltip/mg-tooltip';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -9,7 +30,7 @@ import type { Components, JSX } from "../types/components";
  * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
  * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  */
 export declare const setAssetPath: (path: string) => void;
@@ -20,7 +41,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,24 @@
 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 { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
+export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.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}",
@@ -15,40 +75,79 @@ const errors = {
 const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
 	select: {
-		placeholder: "Veuillez sélectionner une valeur"
-	},
-	checkbox: {
-		"true": "Oui",
-		"false": "Non",
-		indeterminate: "Indéterminé"
+		placeholder: "Sélectionnez une valeur"
 	}
 };
+const form = {
+	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
+	allRequired: "Tous les champs sont obligatoires"
+};
 const message = {
 	closeButton: "Fermer le message"
 };
-const popover = {
-	closeButton: "Fermer"
+const modal = {
+	closeButton: "Fermer la modale"
 };
 const pagination = {
+	label: "Pagination",
 	page: "page",
 	pages: "pages",
-	next: "suivant",
-	previous: "précédent",
 	nextPage: "Page suivante",
 	previousPage: "Page précédente",
 	selectPage: "Sélectionner la page à afficher."
 };
+const panel = {
+	editLabel: "Modifier le titre de la section."
+};
+const general = {
+	confirm: "Valider",
+	cancel: "Annuler",
+	close: "Fermer",
+	next: "suivant",
+	previous: "précédent"
+};
 const fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
 	input: input,
+	form: form,
 	message: message,
-	popover: popover,
-	pagination: pagination
+	modal: modal,
+	pagination: pagination,
+	panel: panel,
+	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,19 +1,22 @@
-import { l as locale, c as currency } from './index2.js';
-
 /**
  * Format number to the locale currency
- * @param number {number}
+ *
+ * @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}
+ *
+ * @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);
 }
 /**
@@ -22,10 +25,12 @@ function localeNumber(number) {
 const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- * @param date {string}
+ *
+ * @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

@@ -4,55 +4,71 @@ import { C as ClassList } from './components.utils.js';
 /**
  * List of all possibles variants
  */
-const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+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
      */
-    this.variant = variants[variants.length - 1];
+    this.variant = variants[0]; // info
     /**
      * Component classes
      */
     this.classList = new ClassList(['mg-badge']);
   }
-  valideValue(newValue) {
+  validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+|[?*!a-z])$/i) === null) {
       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
+   *
+   * @returns {void}
    */
   componentWillLoad() {
-    this.valideValue(this.value);
+    this.validateValue(this.value);
     this.validateVariant(this.variant);
     this.validateOutline(this.outline);
   }
   /**
    * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
   render() {
     return (h("span", { class: this.classList.join() }, this.value, h("span", { class: "sr-only" }, this.label)));
   }
   static get watchers() { return {
-    "value": ["valideValue"],
+    "value": ["validateValue"],
     "variant": ["validateVariant"],
     "outline": ["validateOutline"]
   }; }