@mgdis/mg-components 5.3.0 → 5.5.0

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

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

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

@@ -19,6 +19,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 .mg-pagination {
   display: flex;
   align-items: center;

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

@@ -25,19 +25,6 @@ import { initLocales } from './../../../locales';
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-pagination');
-    /**
-     * Component total pages
-     */
-    this.totalPages = 1;
-    /**
-     * Component current page
-     */
-    this.currentPage = 1;
     /**
      * Change current page from target
      *
@@ -70,6 +57,10 @@ export class MgPagination {
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
+    this.identifier = createID('mg-pagination');
+    this.label = undefined;
+    this.totalPages = 1;
+    this.currentPage = 1;
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-skip-links',
+  title: 'Molecules/mg-skip-links',
+  parameters: { actions: { handles: ['expanded-change'] } },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-skip-links", Object.assign({}, filterArgs(args)));
+export const MgSkipLinks = Template.bind({});
+MgSkipLinks.args = {
+  links: [
+    { href: '#content', label: 'Content' },
+    { href: '#menu', label: 'Menu' },
+    { href: '#search', label: 'Search' },
+    { href: '#footer', label: 'Footer' },
+  ],
+};

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.conf.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.css

@@ -0,0 +1,28 @@
+.mg-skip-links {
+  position: absolute;
+  transform: translateY(-100%);
+  opacity: 0;
+  background: hsl(var(--color-light));
+}
+.mg-skip-links:focus-within {
+  position: relative;
+  transform: translateY(0);
+  opacity: 1;
+}
+.mg-skip-links__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0;
+  padding: 0.64rem 1.8rem;
+  list-style: none;
+}
+.mg-skip-links__link {
+  display: inline-block;
+  padding: 1.2rem;
+  color: hsl(var(--color-dark));
+}
+.mg-skip-links__link:hover {
+  background: hsl(var(--color-dark), 0.1);
+}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -0,0 +1,77 @@
+import { h } from '@stencil/core';
+import { initLocales } from '../../../locales';
+export class MgSkipLinks {
+  constructor() {
+    this.links = undefined;
+  }
+  validateLinks(links) {
+    if (links === undefined ||
+      links.length === 0 ||
+      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+      throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateLinks(this.links);
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href }, link.label)))))));
+  }
+  static get is() { return "mg-skip-links"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-skip-links.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-skip-links.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "links": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SkipLink[]",
+          "resolved": "SkipLink[]",
+          "references": {
+            "SkipLink": {
+              "location": "import",
+              "path": "./mg-skip-links.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Skip links"
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "links",
+        "methodName": "validateLinks"
+      }];
+  }
+}

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

@@ -13,31 +13,11 @@ export class MgTabs {
     /************
      * Internal *
      ************/
+    // classes
     this.tabPanel = 'panel';
-    this.startIndex = 1;
     this.buttonTabBaseClass = 'mg-tabs__navigation-button';
-    /**
-     * 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-tabs');
-    /**
-     * Define tabs size
-     */
-    this.size = 'regular';
-    /**
-     * Active tab number
-     * default: first is 1
-     */
-    this.activeTab = 1;
-    /**
-     * Component tabs
-     */
-    this.tabs = [];
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-tabs']);
+    // variables
+    this.startIndex = 1;
     /**
      * Method to set active tab
      *
@@ -128,6 +108,13 @@ export class MgTabs {
         throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
       }
     };
+    this.identifier = createID('mg-tabs');
+    this.label = undefined;
+    this.size = 'regular';
+    this.items = undefined;
+    this.activeTab = 1;
+    this.tabs = [];
+    this.classList = new ClassList(['mg-tabs']);
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {

package/dist/collection/locales/en/messages.json

@@ -40,6 +40,9 @@
   "panel": {
     "editLabel": "Edit section title."
   },
+  "skipLinks": {
+    "navLabel": "Quick access"
+  },
   "general": {
     "confirm": "Confirm",
     "cancel": "Cancel",

package/dist/collection/locales/fr/messages.json

@@ -40,6 +40,9 @@
   "panel": {
     "editLabel": "Modifier le titre de la section."
   },
+  "skipLinks": {
+    "navLabel": "Accès rapide"
+  },
   "general": {
     "confirm": "Valider",
     "cancel": "Annuler",

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",
@@ -55,6 +58,7 @@ const en = {
 	modal: modal$1,
 	pagination: pagination$1,
 	panel: panel$1,
+	skipLinks: skipLinks$1,
 	general: general$1
 };
 
@@ -99,6 +103,9 @@ const pagination = {
 const panel = {
 	editLabel: "Modifier le titre de la section."
 };
+const skipLinks = {
+	navLabel: "Accès rapide"
+};
 const general = {
 	confirm: "Valider",
 	cancel: "Annuler",
@@ -115,6 +122,7 @@ const fr = {
 	modal: modal,
 	pagination: pagination,
 	panel: panel,
+	skipLinks: skipLinks,
 	general: general
 };
 

package/dist/components/mg-badge2.js

@@ -6,7 +6,7 @@ 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);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{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,17 +18,14 @@ 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) {
+    if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }