@mgdis/mg-components 5.4.0 → 5.6.0

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-94497267.js');
+const index = require('./index-4dcc1812.js');
 
 /*
- Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.21.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-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-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-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"moreitem":[16],"size":[1],"isChildMenu":[32],"hasOverflow":[32]}],[1,"mg-menu-item",{"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"hasChildren":[32],"displayNotificationBadge":[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-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[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

@@ -1,7 +1,8 @@
 {
   "entries": [
-    "./components/atoms/mg-badge/mg-badge.js",
     "./components/atoms/mg-icon/mg-icon.js",
+    "./components/molecules/menu/mg-menu/mg-menu.js",
+    "./components/atoms/mg-badge/mg-badge.js",
     "./components/atoms/mg-button/mg-button.js",
     "./components/atoms/mg-card/mg-card.js",
     "./components/atoms/mg-character-left/mg-character-left.js",
@@ -18,7 +19,6 @@
     "./components/molecules/inputs/mg-input-text/mg-input-text.js",
     "./components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
     "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
-    "./components/molecules/menu/mg-menu/mg-menu.js",
     "./components/molecules/menu/mg-menu-item/mg-menu-item.js",
     "./components/molecules/mg-details/mg-details.js",
     "./components/molecules/mg-form/mg-form.js",
@@ -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.21.0",
+    "typescriptVersion": "4.9.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.conf.js

@@ -1,4 +1,4 @@
 /**
  * List of all possibles variants
  */
-export const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
+export const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];

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

@@ -94,6 +94,19 @@
   background-color: transparent;
   color: hsl(var(--color-info));
 }
+.mg-badge.mg-badge--text-color {
+  background-color: currentColor;
+  border-color: currentColor;
+}
+.mg-badge.mg-badge--text-color .mg-badge__value {
+  color: hsl(var(--mg-badge-text-color, var(--color-light)));
+}
+.mg-badge.mg-badge--text-color.mg-badge--outline {
+  background-color: transparent;
+}
+.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value {
+  color: currentColor;
+}
 
 .mg-badge,
 mg-badge {

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

@@ -8,18 +8,15 @@ 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) {
     if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
-      throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
+      throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
     }
   }
   validateLabel(newValue) {
@@ -61,7 +58,7 @@ export class MgBadge {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, this.value, h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classList.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
   }
   static get is() { return "mg-badge"; }
   static get encapsulation() { return "shadow"; }
@@ -116,7 +113,7 @@ export class MgBadge {
         "mutable": false,
         "complexType": {
           "original": "BadgeVariantType",
-          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text-color\" | \"warning\"",
           "references": {
             "BadgeVariantType": {
               "location": "import",

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

@@ -18,7 +18,7 @@
 :host(:hover) .mg-button--flat:not(.mg-button--disabled),
 :host(:focus) .mg-button--flat:not(.mg-button--disabled),
 :host(:active) .mg-button--flat:not(.mg-button--disabled) {
-  background: hsla(var(--color-dark), 0.1);
+  background: hsl(var(--color-dark), 0.1);
 }
 
 :host([full-width]) {
@@ -149,6 +149,20 @@
   background: none;
   border: none;
 }
+.mg-button.mg-button--link {
+  padding: unset;
+  min-height: unset;
+  background: unset;
+  border: unset;
+  border-radius: 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,19 @@
 .mg-card {
-  padding: var(--mg-card-padding);
-  border-radius: var(--mg-card-border-radius);
-  background: var(--mg-card-background);
-  border: var(--mg-card-border);
-  box-shadow: var(--mg-card-box-shadow);
+  position: relative;
+  width: 100%;
+  padding: var(--mg-card-padding, var(--mg-card-padding-default));
+  overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));
+  box-sizing: border-box;
+  z-index: inherit;
+  background: var(--mg-card-background, var(--mg-card-background-default));
+  border: var(--mg-card-border, var(--mg-card-border-default));
+  border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));
+  box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));
+}
+.mg-card ::slotted(*) {
+  --mg-card-border: var(--mg-card-border-default);
+  --mg-card-padding: var(--mg-card-padding-default);
+  --mg-card-border-radius: var(--mg-card-border-radius-default);
+  --mg-card-background: var(--mg-card-background-default);
+  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
 }

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.conf.js

@@ -12,6 +12,7 @@ export const icons = {
   'archive': () => (h("path", { fill: "currentColor", d: "M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6H3Zm7 2H6V7h4v1Zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1Z" })),
   'archive-outline': () => (h("path", { fill: "currentColor", d: "M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm-1 11H4.04S4 12.98 4 12.96V6h8v7Zm1-8H3V3h10v2Zm-3 3H6V7h4v1Z" })),
   'arrow-down': () => (h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
+  'arrow-down-a-z': () => (h("path", { fill: "currentColor", d: "m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71ZM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29l3.29-2.84Z" })),
   'arrow-down-right': () => (h("path", { fill: "currentColor", d: "m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z" })),
   'arrow-left': () => (h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
   'arrow-right': () => (h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
@@ -20,6 +21,7 @@ export const icons = {
   'arrow-up': () => (h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
   'arrow-up-right': () => (h("path", { fill: "currentColor", d: "m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0Z" })),
   'arrow-up-right-square': () => (h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
+  'arrow-up-z-a': () => (h("path", { fill: "currentColor", d: "m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71ZM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29l3.29-2.84Z" })),
   'arrows-compare': () => h("path", { fill: "currentColor", d: "M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2Zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93Z" }),
   'arrows-right-down': () => (h("path", { fill: "currentColor", d: "M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0Zm3.53-6.14-2.78-2.8a.438.438 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14c.02-.05.03-.11.03-.17 0-.11-.04-.23-.12-.31Z" })),
   'arrows-right-left': () => (h("path", { fill: "currentColor", d: "M.73,5.65V5.23a.64.64,0,0,1,.64-.64H12V3.31a.64.64,0,0,1,.64-.64.63.63,0,0,1,.45.18L15.19,5a.63.63,0,0,1,0,.9L13.05,8A.65.65,0,0,1,12,7.57V6.29H1.37a.64.64,0,0,1-.64-.64Zm14,4.06H4.09V8.43A.64.64,0,0,0,3,8L.87,10.11a.63.63,0,0,0,0,.9L3,13.15a.64.64,0,0,0,.91,0,.61.61,0,0,0,.18-.45V11.41H14.73a.63.63,0,0,0,.64-.64h0v-.42a.63.63,0,0,0-.64-.64Z" })),
@@ -30,8 +32,13 @@ export const icons = {
   'briefcase': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
   'briefcase-outline': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
   'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
-  'calendar': () => (h("path", { fill: "currentColor", d: "M14.52 4.43h-13V2.92a1.28 1.28 0 0 1 1.25-1.28h10.36A1.39 1.39 0 0 1 14.52 3Zm0 .93v7.91a1.41 1.41 0 0 1-1.4 1.4H2.88a1.41 1.41 0 0 1-1.4-1.4V5.36Zm-3.73 3.37a.35.35 0 0 0 .35.35h1.16a.34.34 0 0 0 .35-.35V7.57a.35.35 0 0 0-.35-.35h-1.16a.35.35 0 0 0-.35.35Zm-5.58 2.56a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.16a.34.34 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm3.72 3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.16a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Z" })),
-  'calendar-euro': () => (h("path", { fill: "currentColor", d: "M11.06 3.51h-1.04v.62a.2.2 0 0 1-.2.2H9.4c-.11 0-.21-.09-.21-.2v-.62H4.23v.62c0 .11-.09.2-.21.2h-.41c-.11 0-.21-.09-.21-.2v-.62H2.37c-.57 0-1.03.47-1.03 1.03v7.03c0 .57.47 1.03 1.03 1.03h5.3c-.25-.25-.46-.52-.63-.83H2.68a.53.53 0 0 1-.52-.52V6.61c0-.11.09-.21.21-.21h5.29a4.4 4.4 0 0 1 3.19-1.36c.43 0 .85.06 1.24.18v-.69c0-.57-.46-1.03-1.03-1.03Zm-6.83-.62c0-.11-.09-.21-.21-.21h-.41c-.11 0-.21.09-.21.21v.62h.83v-.62Zm5.79 0c0-.11-.09-.21-.21-.21H9.4c-.11 0-.21.09-.21.21v.62h.83v-.62Zm2.07 3c-.39-.13-.81-.21-1.24-.21-.83 0-1.6.26-2.23.73-.96.69-1.59 1.82-1.59 3.09 0 .86.28 1.65.77 2.29.23.32.52.6.85.83.62.45 1.38.71 2.2.71 2.11 0 3.82-1.72 3.82-3.82 0-1.67-1.08-3.09-2.58-3.61Zm.12 6.18c.01.07-.04.15-.11.16-.09.03-.2.04-.3.05-.14.03-.28.04-.43.04-.61.02-1.18-.18-1.63-.54-.41-.32-.73-.77-.88-1.29h-.37c-.08 0-.15-.06-.15-.15V10c0-.08.07-.14.15-.14h.26v-.5h-.26c-.08 0-.15-.06-.15-.14v-.37c0-.08.07-.14.15-.14h.4a2.576 2.576 0 0 1 2.37-1.7h.1c.22 0 .44.02.64.06.04.01.07.03.08.06.02.03.03.07.02.11l-.02.07-.13.46a.14.14 0 0 1-.17.1c-.15-.03-.3-.04-.45-.05h-.08c-.58.01-1.1.35-1.34.88h1.71c.08.02.12.09.11.17l-.08.36a.15.15 0 0 1-.15.11H9.73c-.01.16-.01.33 0 .5h1.66c.08.02.13.09.11.17l-.07.33c-.02.06-.08.11-.14.11H9.91c.21.56.72.94 1.3 1 .05 0 .1.01.15.01.19 0 .37-.03.55-.06.07-.02.14.03.16.09v.02l.11.52Z" })),
+  'calendar': () => (h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
+  'calendar-outline': () => (h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
+  'calendar-euro': () => [
+    h("path", { d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-10c0-.6-.4-1-1-1Zm-10 11v-8h10v8H3Z" }),
+    h("path", { d: "m9.79 11.03.71.71c-.53.48-1.23.78-2 .78-1.31 0-2.43-.85-2.83-2.02H4.5v-.75h1.02c-.02-.07-.02-.15-.02-.23 0-.09 0-.18.02-.27H4.5V8.5h1.19a2.974 2.974 0 0 1 4.81-1.2l-.71.71c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49Z" }),
+  ],
+  'calendar-euro-outline': () => (h("path", { d: "m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49ZM13 3.5v1H3v-1h10m-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1v-1Zm-9 12v-8h10v8H3Z" })),
   'check': () => (h("path", { fill: "currentColor", d: "m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01Z" })),
   'check-circle': () => (h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8Zm-8.18 3.88 5.44-5.44a.46.46 0 0 0 0-.65l-.67-.67a.48.48 0 0 0-.67 0L6.82 9.54 4.75 7.47a.46.46 0 0 0-.65 0l-.67.67a.46.46 0 0 0 0 .65l3.07 3.07a.46.46 0 0 0 .65 0Z" })),
   'chevron-down': () => (h("path", { fill: "currentColor", d: "M7.43,12.21.9,5.69a.81.81,0,0,1,0-1.14h0l.76-.77a.81.81,0,0,1,1.14,0L8,9l5.2-5.18a.81.81,0,0,1,1.14,0l.76.77a.8.8,0,0,1,0,1.13h0L8.57,12.21a.79.79,0,0,1-1.13,0Z" })),
@@ -43,6 +50,8 @@ export const icons = {
   'chevron-up': () => (h("path", { fill: "currentColor", d: "M8.57,3.79l6.53,6.52a.81.81,0,0,1,0,1.14h0l-.76.77a.81.81,0,0,1-1.14,0L8,7,2.8,12.22a.81.81,0,0,1-1.14,0L.9,11.45a.8.8,0,0,1,0-1.13h0L7.43,3.79a.79.79,0,0,1,1.13,0Z" })),
   'chevron-up-circle': () => (h("path", { fill: "currentColor", d: "M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33C3.95 15.33.67 12.05.67 8ZM7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01H7.5Z" })),
   'clock': () => (h("path", { fill: "currentColor", d: "M8,.67C3.95,.67,.67,3.95,.67,8s3.28,7.33,7.33,7.33,7.33-3.28,7.33-7.33h0C15.33,3.95,12.05,.67,8,.67h0Zm1.69,10.33l-2.61-1.88c-.09-.07-.14-.17-.14-.28V3.84c0-.19,.16-.35,.35-.36h1.42c.2,0,.35,.16,.36,.36V7.93l1.87,1.37c.16,.1,.2,.32,.09,.47v.02h-.01l-.83,1.15c-.12,.15-.34,.18-.5,.06Z" })),
+  'clock-outline': () => (h("path", { fill: "currentColor", d: "m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45ZM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7Z" })),
+  'code-square-outline': () => (h("path", { fill: "currentColor", d: "m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28Zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55l.73.73ZM3.01 14c-.27 0-.5-.1-.7-.3-.2-.2-.3-.43-.3-.7V3c0-.27.1-.5.3-.7.2-.2.43-.3.7-.3h10c.27 0 .5.1.7.3.2.2.3.43.3.7v10c0 .27-.1.5-.3.7-.2.2-.43.3-.7.3H3Zm0-1h10V3H3v10Zm0-10v10V3Z" })),
   'conversation': () => (h("path", { fill: "currentColor", d: "M11.22,6.48c0-2.11-2.36-3.81-5.28-3.81S.67,4.37.67,6.48a3.15,3.15,0,0,0,1,2.19A5.17,5.17,0,0,1,.72,10a.2.2,0,0,0,0,.21.23.23,0,0,0,.19.12,4.79,4.79,0,0,0,2.25-.6,6.84,6.84,0,0,0,2.82.6C8.86,10.29,11.22,8.58,11.22,6.48Zm3.1,5.23a3.08,3.08,0,0,0,1-2.19C15.28,7.93,14,6.57,12,6a3.84,3.84,0,0,1,0,.48C12,9,9.3,11.05,6,11.05a7.16,7.16,0,0,1-.8-.05A5.6,5.6,0,0,0,10,13.33a6.7,6.7,0,0,0,2.82-.59,4.66,4.66,0,0,0,2.25.59.21.21,0,0,0,.19-.11.2.2,0,0,0,0-.21,5.15,5.15,0,0,1-.91-1.3Z" })),
   'conversation-outline': () => [
     h("path", { fill: "currentColor", d: "M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z" }),
@@ -60,9 +69,10 @@ export const icons = {
   'download': () => (h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
   'ellipsis': () => (h("path", { fill: "currentColor", d: "M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z" })),
   'ellipsis-vertical': () => (h("path", { fill: "currentColor", d: "M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z" })),
-  'euro': () => (h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
+  'euro': () => (h("path", { fill: "currentColor", d: "m12.1 11.02 1.4 1.42a5.948 5.948 0 0 1-4 1.56c-2.64 0-4.86-1.68-5.66-4.04H1.5v-1.5h2.02C3.5 8.3 3.5 8.16 3.5 8c0-.18 0-.36.04-.54H1.5v-1.5h2.38C4.7 3.66 6.9 2 9.5 2c1.54 0 2.94.6 4 1.56l-1.4 1.42c-.7-.6-1.6-.98-2.6-.98-1.46 0-2.74.78-3.44 1.96h3.5v1.5H5.54c-.02.18-.04.36-.04.54 0 .16 0 .32.02.46h4.04v1.5H6.02C6.7 11.18 8.02 12 9.5 12c1 0 1.9-.38 2.6-.98Z" })),
   'euro-circle': () => (h("path", { fill: "currentColor", d: "M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67Zm2.27 11.4c-.38.09-.76.14-1.15.14a4.038 4.038 0 0 1-3.99-2.92h-.58c-.13 0-.23-.1-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5.34 5.34 0 0 1 0-.8h-.41c-.13 0-.23-.1-.23-.22v-.58c0-.13.11-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.12.18-.22.18H6.52c-.03.26-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.18-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.05.27.18l.17.84c.02.12-.05.24-.17.27v-.03Z" })),
   'exclamation-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
+  'exclamation-stamp': () => (h("path", { fill: "currentColor", d: "m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01Zm-6.36 3.35H7.36v-1.34h1.28v1.34Zm0-2.67H7.36V4.67h1.28v4.01Z" })),
   'exclamation-triangle': () => (h("path", { fill: "currentColor", d: "m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z" })),
   'eye': () => [
     h("circle", { fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),

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: 400;
+  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: 400;
+  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: 400;
+  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: 400;
+  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: 400;
+  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: 400;
+  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;
 }