@mgdis/mg-components 3.3.0 → 4.1.0

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

@@ -1,7 +1,7 @@
-import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
-import { createID } from '../../../utils/components.utils';
+import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
+import { createID, isTagName } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
@@ -66,7 +66,7 @@ export class MgPopover {
       this.popover.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove even listener
+      // Remove event listener
       document.removeEventListener('click', this.clickOutside, false);
     };
     /**
@@ -78,28 +78,37 @@ export class MgPopover {
       this.display = false;
     };
   }
-  handleDisplay(newVal) {
-    if (newVal) {
+  handleDisplay(newValue) {
+    if (newValue) {
       this.show();
     }
     else {
       this.hide();
     }
+    this.displayChange.emit(newValue);
   }
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
   /**
    * Check if component props are well configured on init
    *
    * @returns {void}
    */
   componentDidLoad() {
-    //Check if slotted title is a heading
-    const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement !== null && !headingElements.includes(slotedTitleElement.tagName.toLowerCase())) {
-      throw new Error(`<mg-popover> Slotted title must be a heading:  ${headingElements.join(', ')}.`);
+    if (slotedTitleElement && !isTagName(slotedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
     // Set close button id
     if (this.closeButton) {
@@ -145,7 +154,7 @@ export class MgPopover {
     return (h(Host, null,
       h("slot", null),
       h("div", { id: this.identifier, class: "mg-popover" },
-        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.general.close, onClick: this.handleCloseButton },
+        !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" })),
@@ -183,9 +192,14 @@ export class MgPopover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "original": "Placement",
         "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "./mg-popover.conf"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -252,6 +266,22 @@ export class MgPopover {
       "defaultValue": "false"
     }
   }; }
+  static get events() { return [{
+      "method": "displayChange",
+      "name": "display-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emited event when display value change"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "display",

package/dist/collection/components/molecules/mg-tabs/{mg-tabs.stories.js → doc/mg-tabs.stories.js}

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
-import { sizes } from './mg-tabs.conf';
+import { filterArgs } from '../../../../../.storybook/utils';
+import { sizes, Status } from '../mg-tabs.conf';
 export default {
   component: 'mg-tabs',
   title: 'Molecules/mg-tabs',
@@ -12,27 +13,26 @@ export default {
   parameters: { actions: { handles: ['active-tab-change'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // return element
-  const activeTab = args.activeTab;
-  delete args.activeTab;
-  return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
-    h("div", { slot: "tab_content-1" }, "Content 1"),
-    h("div", { slot: "tab_content-2" }, "Content 2"),
-    h("div", { slot: "tab_content-3" }, "Content 3")));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-tabs", Object.assign({}, filterArgs(args, { size: sizes[0], activeTab: 1 })),
+  h("div", { slot: "tab_content-1" }, "Content 1"),
+  h("div", { slot: "tab_content-2" }, "Content 2"),
+  h("div", { slot: "tab_content-3" }, "Content 3"),
+  h("div", { slot: "tab_content-4" }, "Content 4")));
 export const MgTabs = Template.bind({});
 MgTabs.args = {
-  items: ['Tab 1', 'Tab 2', 'Tab 3'],
+  items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
   label: 'Short tabs description. Needed for accessibility',
   activeTab: undefined,
   size: sizes[0], // regular
 };
 export const MgTabsItems = Template.bind({});
-MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3, items: [
     {
       label: 'Tab 1',
       icon: 'check',
@@ -41,10 +41,15 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
     {
       label: 'Tab 2',
       badge: { value: 5, label: 'messages' },
-      disabled: true,
+      status: Status.DISABLED,
     },
     {
       label: 'Tab 3',
       icon: 'cross',
     },
+    {
+      label: 'Tab 4',
+      icon: 'trash',
+      status: Status.HIDDEN,
+    },
   ] });

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

@@ -1,3 +1,10 @@
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
 /**
  * List of all possibles sizes
  */

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

@@ -35,6 +35,9 @@
   border-bottom-color: hsl(var(--color-info));
   font-weight: 700;
 }
+.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden {
+  display: none;
+}
 
 .mg-tabs__content-container:focus-visible {
   outline: none;

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

@@ -1,6 +1,6 @@
-import { Component, Event, h, Host, Prop, State, Element, Watch } from '@stencil/core';
+import { Component, Event, h, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
-import { sizes } from './mg-tabs.conf';
+import { sizes, Status } from './mg-tabs.conf';
 /**
  * type TabItem validation function
  *
@@ -10,6 +10,12 @@ import { sizes } from './mg-tabs.conf';
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    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.
@@ -32,6 +38,46 @@ export class MgTabs {
      * Component classes
      */
     this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
      *
@@ -41,6 +87,14 @@ export class MgTabs {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -51,16 +105,14 @@ export class MgTabs {
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -86,7 +138,7 @@ export class MgTabs {
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -101,7 +153,7 @@ export class MgTabs {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
     else {
-      this.activeTabChange.emit(newValue);
+      this.setActiveTab(newValue);
     }
   }
   /*************
@@ -125,27 +177,21 @@ export class MgTabs {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null,
-      h("div", { class: this.classList.join() },
-        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
-          const tabIndex = index + 1;
-          return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
-              'mg-tabs__navigation-button': true,
-              'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
-              'mg-tabs__navigation-button--disabled': tab.disabled,
-            }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled },
-            tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
-            tab.label,
-            tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-        })),
-        this.tabs.map((_tab, index) => {
-          const tabIndex = index + 1;
-          return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" },
-            h("slot", { name: `tab_content-${tabIndex}` })));
-        }))));
+    return (h("div", { class: this.classList.join() },
+      h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+          [`${this.buttonTabBaseClass}`]: true,
+          [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+          [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+          [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+        }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
+        tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
+        tab.label,
+        tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
+      this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
+        h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["mg-tabs.scss"]
   }; }

package/dist/collection/locales/index.js

@@ -1,4 +1,33 @@
-export const locale = 'fr-FR';
-import fr from './fr-FR/messages.json';
-export const messages = fr;
-export const currency = 'EUR';
+import en from './en/messages.json';
+import fr from './fr/messages.json';
+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
+export 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],
+  };
+};

package/dist/collection/stories/helpers.stories.js

@@ -0,0 +1,41 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../.storybook/utils';
+export default {
+  title: 'Style/Helpers',
+  argTypes: {
+    align: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+  },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
+  h("h1", null, "Helpers"),
+  h("h2", null, ".mg-group-elements"),
+  h("p", null,
+    "Buttons can be grouped in an HTMLelement using the ",
+    h("code", null, ".mg-group-elements"),
+    " class, it will ensure a 10px margin space between them, even verticaly. Above exemples are using it."),
+  h("p", null,
+    "By adding the ",
+    h("code", null, ".mg-group-elements--align-right"),
+    " class you 'll set a right alignment of the button, even when line breaks."),
+  h("h3", null, "Demo"),
+  h("div", { class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
+    h("mg-button", null, "First Button"),
+    h("mg-button", null,
+      h("mg-icon", { icon: "info-circle" }),
+      "Second Button"),
+    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { label: "Third button" }),
+      h("mg-icon", { icon: "info-circle" })))));
+export const Helpers = Template.bind({});
+Helpers.args = {
+  align: 'left',
+};

package/dist/collection/stories/icons.stories.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../.storybook/utils';
 import { icons, sizes } from '../components/atoms/mg-icon/mg-icon.conf';
 export default {
   title: 'Style/Icons',
@@ -9,9 +10,16 @@ export default {
     },
   },
 };
-const Template = args => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
   h("div", { style: { color: args.color, margin: '1rem' } },
-    h("mg-icon", { icon: icon, size: args.size })),
+    h("mg-icon", Object.assign({}, filterArgs({ icon, size: args.size }, { size: 'regular' })))),
   h("div", null, icon))))));
 export const Icons = Template.bind({});
 Icons.args = {

package/dist/collection/stories/typography.stories.js

@@ -2,7 +2,14 @@ import { h } from '@stencil/core';
 export default {
   title: 'Style/Typography',
 };
-const Template = args => (h("div", null,
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
   h("h1", null, args.h1),
   h("h2", null, args.h2),
   h("h3", null, args.h3),

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

@@ -72,3 +72,13 @@ export class ClassList {
 export 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
+ */
+export function isTagName(element, tagNames) {
+  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+}

package/dist/collection/utils/locale.utils.js

@@ -1,20 +1,22 @@
-import { locale, currency } from '../locales';
 /**
  * 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
  */
-export function localeCurrency(number) {
+export 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
  */
-export function localeNumber(number) {
+export function localeNumber(number, locale) {
   return new Intl.NumberFormat(locale).format(number);
 }
 /**
@@ -25,9 +27,10 @@ export 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
  */
-export function localeDate(date) {
+export function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }

package/dist/collection/variables.css

@@ -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 */
@@ -99,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;
@@ -111,6 +112,7 @@
   --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);
@@ -161,7 +163,7 @@
    */
   --mg-modal-border-radius: 0.5rem;
   --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.3rem;
+  --mg-modal-content-font-size: 1.2rem;
 
   /*
     <mg-panel>
@@ -187,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/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 */
@@ -99,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;
@@ -111,6 +112,7 @@
   --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);
@@ -161,7 +163,7 @@
    */
   --mg-modal-border-radius: 0.5rem;
   --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.3rem;
+  --mg-modal-content-font-size: 1.2rem;
 
   /*
     <mg-panel>
@@ -187,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); */