@mgdis/mg-components 5.4.0 → 5.5.0

package/dist/cjs/mg-components.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-94497267.js');
+const index = require('./index-c3450336.js');
 
 /*
- Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mg-components.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-badge_29.cjs",[[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-menu-item",{"href":[1],"status":[1537],"size":[1],"expanded":[1028],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"hasChildren":[32]}],[1,"mg-card"],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-menu",{"label":[1],"direction":[513],"isChildMenu":[32]}],[1,"mg-tag",{"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-badge_30.cjs",[[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-menu-item",{"href":[1],"status":[1537],"size":[1],"expanded":[1028],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"hasChildren":[32]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-menu",{"label":[1],"direction":[513],"isChildMenu":[32]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -28,12 +28,13 @@
     "./components/molecules/mg-pagination/mg-pagination.js",
     "./components/molecules/mg-panel/mg-panel.js",
     "./components/molecules/mg-popover/mg-popover.js",
+    "./components/molecules/mg-skip-links/mg-skip-links.js",
     "./components/molecules/mg-tabs/mg-tabs.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.1",
-    "typescriptVersion": "4.7.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/mg-badge/doc/mg-badge.stories.js

@@ -5,13 +5,6 @@ export default {
   component: 'mg-badge',
   title: 'Atoms/mg-badge',
   argTypes: {
-    variant: {
-      options: variants,
-      control: { type: 'select' },
-      table: {
-        defaultValue: { summary: variants[0] },
-      },
-    },
     value: {
       control: { type: 'text' },
     },

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -8,13 +8,10 @@ export class MgBadge {
      ************/
     // 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) {

package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js

@@ -6,13 +6,6 @@ export default {
   component: 'mg-button',
   title: 'Atoms/mg-button',
   argTypes: {
-    variant: {
-      options: variants,
-      control: { type: 'select' },
-      table: {
-        defaultValue: { summary: variants[0] },
-      },
-    },
     type: {
       options: [undefined, ...buttonTypes],
       control: { type: 'select' },

package/dist/collection/components/atoms/mg-button/mg-button.conf.js

@@ -1,7 +1,7 @@
 /**
  * List of all possibles variants
  */
-export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
+export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 /**
  * List of all possibles button types
  */

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -149,6 +149,19 @@
   background: none;
   border: none;
 }
+.mg-button.mg-button--link {
+  padding: unset;
+  min-height: unset;
+  background: unset;
+  border: unset;
+  text-decoration: underline;
+}
+.mg-button.mg-button--link slot {
+  font-weight: 600;
+}
+.mg-button.mg-button--link:hover {
+  text-decoration: none;
+}
 .mg-button.mg-button--full-width {
   display: flex;
   justify-content: center;

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -10,34 +10,6 @@ export class MgButton {
     this.classDisabled = 'mg-button--disabled';
     this.classLoading = 'mg-button--loading';
     this.classFullWidth = 'mg-button--full-width';
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // Primary
-    /**
-     * Set button to full-width
-     */
-    this.fullWidth = false;
-    /**
-     * Define if button is round.
-     * Used for icon button.
-     */
-    this.isIcon = false;
-    /**
-     * Option to set input disable on click, in order to prevent multi-click.
-     * Parent component have to remove the attribute 'disabled' when the process ends.
-     */
-    this.disableOnClick = false;
-    /**
-     * Define if button is loading, default to false.
-     * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
-     * It's required to reset to false when action/promise in parent is done to stop the loading state
-     */
-    this.loading = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
      *
@@ -80,6 +52,17 @@ export class MgButton {
         this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       }
     };
+    this.variant = variants[0];
+    this.identifier = undefined;
+    this.label = undefined;
+    this.type = undefined;
+    this.fullWidth = false;
+    this.form = undefined;
+    this.disabled = undefined;
+    this.isIcon = false;
+    this.disableOnClick = false;
+    this.loading = false;
+    this.classList = new ClassList(['mg-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -173,7 +156,7 @@ export class MgButton {
         "mutable": false,
         "complexType": {
           "original": "VariantType",
-          "resolved": "\"danger\" | \"danger-alt\" | \"flat\" | \"info\" | \"primary\" | \"secondary\" | \"success\"",
+          "resolved": "\"danger\" | \"danger-alt\" | \"flat\" | \"info\" | \"link\" | \"primary\" | \"secondary\" | \"success\"",
           "references": {
             "VariantType": {
               "location": "import",

package/dist/collection/components/atoms/mg-card/mg-card.css

@@ -1,7 +1,12 @@
 .mg-card {
+  position: relative;
+  width: 100%;
   padding: var(--mg-card-padding);
-  border-radius: var(--mg-card-border-radius);
+  overflow: var(--mg-card-overflow);
+  box-sizing: border-box;
+  z-index: inherit;
   background: var(--mg-card-background);
   border: var(--mg-card-border);
+  border-radius: var(--mg-card-border-radius);
   box-shadow: var(--mg-card-box-shadow);
 }

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -2,10 +2,9 @@ import { h } from '@stencil/core';
 import { initLocales } from '../../../locales';
 export class MgCharacterLeft {
   constructor() {
-    /**
-     * Sets the characters to count
-     */
+    this.identifier = undefined;
     this.characters = '';
+    this.maxlength = undefined;
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {

package/dist/collection/components/atoms/mg-divider/mg-divider.js

@@ -1,12 +1,6 @@
 import { h } from '@stencil/core';
 export class MgDivider {
   constructor() {
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define component size
-     */
     this.size = 'regular';
   }
   /**

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -3,24 +3,17 @@ import { icons, sizes, variants } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgIcon {
   constructor() {
-    /**
-     * Define icon size
-     */
-    this.size = 'regular';
-    /**
-     * Make the icon spin
-     */
-    this.spin = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-icon']);
     /**
      * getIcon
      *
      * @returns {HTMLElement} icon html
      */
     this.getIcon = () => icons[this.icon]();
+    this.icon = undefined;
+    this.size = 'regular';
+    this.variant = undefined;
+    this.spin = false;
+    this.classList = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
     if (!Object.keys(icons).includes(newValue)) {

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -1,17 +1,13 @@
 import { h } from '@stencil/core';
 export class MgInputTitle {
   constructor() {
-    /**
-     * Switch from label to fieldset sementic
-     */
-    this.isLegend = false;
-    /**
-     * Component parent tagname
-     */
-    this.tagName = 'label';
     this.getTagName = () => {
       this.tagName = this.isLegend ? 'legend' : 'label';
     };
+    this.identifier = undefined;
+    this.required = undefined;
+    this.isLegend = false;
+    this.tagName = 'label';
   }
   validateIdentifier(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {

package/dist/collection/components/atoms/mg-tag/doc/mg-tag.stories.js

@@ -4,15 +4,6 @@ import { variants } from '../mg-tag.conf';
 export default {
   component: 'mg-tag',
   title: 'Atoms/mg-tag',
-  argTypes: {
-    variant: {
-      options: variants,
-      control: { type: 'select' },
-      table: {
-        defaultValue: { summary: variants[0] },
-      },
-    },
-  },
 };
 /**
  * Template
@@ -27,4 +18,5 @@ MgTag.args = {
   slot: 'Label',
   variant: variants[0],
   outline: false,
+  soft: false,
 };

package/dist/collection/components/atoms/mg-tag/mg-tag.css

@@ -20,6 +20,15 @@
   background-color: transparent;
   color: hsl(var(--color-dark));
 }
+.mg-tag.mg-tag--primary.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
+  border-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-dark));
+}
 .mg-tag.mg-tag--secondary {
   background-color: hsl(var(--color-light));
   border-color: hsl(var(--color-light));
@@ -29,6 +38,15 @@
   background-color: transparent;
   color: hsl(var(--color-light));
 }
+.mg-tag.mg-tag--secondary.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
+  border-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-dark));
+}
 .mg-tag.mg-tag--success {
   background-color: hsl(var(--color-success));
   border-color: hsl(var(--color-success));
@@ -38,6 +56,15 @@
   background-color: transparent;
   color: hsl(var(--color-success));
 }
+.mg-tag.mg-tag--success.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
+  border-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-success));
+}
 .mg-tag.mg-tag--warning {
   background-color: hsl(var(--color-warning));
   border-color: hsl(var(--color-warning));
@@ -47,6 +74,15 @@
   background-color: transparent;
   color: hsl(var(--color-warning));
 }
+.mg-tag.mg-tag--warning.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
+  border-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-warning));
+}
 .mg-tag.mg-tag--danger {
   background-color: hsl(var(--color-danger));
   border-color: hsl(var(--color-danger));
@@ -56,6 +92,15 @@
   background-color: transparent;
   color: hsl(var(--color-danger));
 }
+.mg-tag.mg-tag--danger.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
+  border-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-danger));
+}
 .mg-tag.mg-tag--info {
   background-color: hsl(var(--color-info));
   border-color: hsl(var(--color-info));
@@ -65,9 +110,22 @@
   background-color: transparent;
   color: hsl(var(--color-info));
 }
+.mg-tag.mg-tag--info.mg-tag--soft {
+  font-weight: 200;
+  background-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
+  border-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
+  color: hsl(var(--color-dark));
+}
+.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon) {
+  color: hsl(var(--color-info));
+}
 
 .mg-tag,
 mg-tag {
   display: inline-block;
   vertical-align: middle;
+}
+
+::slotted(mg-icon) {
+  margin-right: 0.4rem;
 }

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -8,16 +8,10 @@ export class MgTag {
      ************/
     // Classes
     this.classOutline = `mg-tag--outline`;
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // primary
-    /**
-     * Component classes
-     */
+    this.classSoft = `mg-tag--soft`;
+    this.variant = variants[0];
+    this.outline = undefined;
+    this.soft = undefined;
     this.classList = new ClassList(['mg-tag']);
   }
   validateVariant(newValue, oldValue) {
@@ -37,6 +31,29 @@ export class MgTag {
     else
       this.classList.delete(this.classOutline);
   }
+  validateSoft(newValue) {
+    // usage validation
+    if (newValue && this.outline)
+      throw new Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');
+    // apply class
+    if (newValue)
+      this.classList.add(this.classSoft);
+    else
+      this.classList.delete(this.classSoft);
+  }
+  /*************
+   * Methods *
+   *************/
+  /**
+   * Validate the given textContent
+   *
+   * @param {string} textContent html element textContent property
+   * @returns {void}
+   */
+  validateTextContent(textContent) {
+    if (!textContent || textContent.trim() === '')
+      throw new Error('<mg-tag> slot must contain a text content.');
+  }
   /*************
    * Lifecycle *
    *************/
@@ -48,6 +65,8 @@ export class MgTag {
   componentWillLoad() {
     this.validateVariant(this.variant);
     this.validateOutline(this.outline);
+    this.validateSoft(this.soft);
+    this.validateTextContent(this.element.textContent);
   }
   /**
    * Render
@@ -75,15 +94,20 @@ export class MgTag {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "TagVariantType",
+          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {
+            "TagVariantType": {
+              "location": "import",
+              "path": "./mg-tag.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define button variant"
+          "text": "Define tag variant"
         },
         "attribute": "variant",
         "reflect": false,
@@ -101,10 +125,27 @@ export class MgTag {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define if button is using outline style"
+          "text": "Define if tag is using outline style"
         },
         "attribute": "outline",
         "reflect": false
+      },
+      "soft": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if tag is using soft style"
+        },
+        "attribute": "soft",
+        "reflect": false
       }
     };
   }
@@ -113,6 +154,7 @@ export class MgTag {
       "classList": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "variant",
@@ -120,6 +162,9 @@ export class MgTag {
       }, {
         "propName": "outline",
         "methodName": "validateOutline"
+      }, {
+        "propName": "soft",
+        "methodName": "validateSoft"
       }];
   }
 }

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -4,23 +4,6 @@ import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
   constructor() {
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = createID('mg-tooltip');
-    /**
-     * Tooltip placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Display tooltip
-     */
-    this.display = false;
-    /**
-     * Disable tooltip
-     */
-    this.disabled = false;
     /**
      * Show tooltip
      *
@@ -166,6 +149,11 @@ export class MgTooltip {
         });
       });
     };
+    this.identifier = createID('mg-tooltip');
+    this.message = undefined;
+    this.placement = 'bottom';
+    this.display = false;
+    this.disabled = false;
   }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -198,8 +186,7 @@ export class MgTooltip {
     const slotElement = this.element.firstElementChild;
     // Get interactive element
     const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
-    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) ||
-      ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button