@mgdis/mg-components 6.16.0 → 6.17.0

package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index$1 = require('./index-T3-qWqFE.js');
+var index$1 = require('./index-DCZEYvlH.js');
 var index = require('./index-CpENFzEo.js');
 var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
-var index$2 = require('./index-YM1EJx9X.js');
+var index$2 = require('./index-TUElr4Wv.js');
 
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -16380,7 +16380,7 @@ const quillSnowCss = "/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Co
 
 const editorScss = quillSnowCss + "";
 
-const mgInputRichTextEditorCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:\"\";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}";
+const mgInputRichTextEditorCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:\"\";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}";
 
 const MgInputRichTextEditor = class {
     constructor(hostRef) {

package/dist/cjs/mg-loader.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-T3-qWqFE.js');
-var index$2 = require('./index-YM1EJx9X.js');
+var index = require('./index-DCZEYvlH.js');
+var index$2 = require('./index-TUElr4Wv.js');
 var index$1 = require('./index-CpENFzEo.js');
 
 const mgLoaderCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mg-b-size-4);text-align:center}";

package/dist/cjs/mg-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-T3-qWqFE.js');
+var index = require('./index-DCZEYvlH.js');
 var index$1 = require('./index-CpENFzEo.js');
 
 /**

package/dist/collection/collection-manifest.json

@@ -45,7 +45,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.3",
+    "version": "4.38.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

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

@@ -55,7 +55,6 @@ export class MgCharacterLeft {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -70,11 +69,11 @@ export class MgCharacterLeft {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "characters": {
                 "type": "string",
-                "attribute": "characters",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,11 +89,11 @@ export class MgCharacterLeft {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "characters",
                 "defaultValue": "''"
             },
             "maxlength": {
                 "type": "number",
-                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -109,7 +108,8 @@ export class MgCharacterLeft {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "maxlength"
             }
         };
     }

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

@@ -60,7 +60,6 @@ export class MgInputTitle {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class MgInputTitle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,11 +93,11 @@ export class MgInputTitle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "required"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -113,11 +112,11 @@ export class MgInputTitle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "readonly"
             },
             "isLegend": {
                 "type": "boolean",
-                "attribute": "is-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -133,6 +132,7 @@ export class MgInputTitle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-legend",
                 "defaultValue": "false"
             }
         };

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

@@ -80,7 +80,6 @@ export class MgBadge {
         return {
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -95,11 +94,11 @@ export class MgBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +113,11 @@ export class MgBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "BadgeVariantType",
@@ -140,11 +139,11 @@ export class MgBadge {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'info'"
             },
             "outline": {
                 "type": "boolean",
-                "attribute": "outline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -160,6 +159,7 @@ export class MgBadge {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "outline",
                 "defaultValue": "false"
             }
         };

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

@@ -223,7 +223,6 @@ export class MgButton {
         return {
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": true,
                 "complexType": {
                     "original": "VariantType",
@@ -245,11 +244,11 @@ export class MgButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'primary'"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -264,11 +263,11 @@ export class MgButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
@@ -289,11 +288,11 @@ export class MgButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "type"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
@@ -315,11 +314,11 @@ export class MgButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "fullWidth": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,11 +334,11 @@ export class MgButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-width",
                 "defaultValue": "false"
             },
             "form": {
                 "type": "string",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -354,11 +353,11 @@ export class MgButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -373,11 +372,11 @@ export class MgButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disabled"
             },
             "isIcon": {
                 "type": "boolean",
-                "attribute": "is-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -393,11 +392,11 @@ export class MgButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-icon",
                 "defaultValue": "false"
             },
             "disableOnClick": {
                 "type": "boolean",
-                "attribute": "disable-on-click",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -413,6 +412,7 @@ export class MgButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disable-on-click",
                 "defaultValue": "false"
             }
         };

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

@@ -68,7 +68,6 @@ export class MgCard {
         return {
             "shadow": {
                 "type": "boolean",
-                "attribute": "shadow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -84,11 +83,11 @@ export class MgCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "shadow",
                 "defaultValue": "false"
             },
             "radiusSize": {
                 "type": "string",
-                "attribute": "radius-size",
                 "mutable": false,
                 "complexType": {
                     "original": "RadiusSizeType",
@@ -110,6 +109,7 @@ export class MgCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "radius-size",
                 "defaultValue": "'medium'"
             }
         };

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

@@ -35,7 +35,6 @@ export class MgDivider {
         return {
             "fullWidth": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -51,6 +50,7 @@ export class MgDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-width",
                 "defaultValue": "false"
             }
         };

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

@@ -5,7 +5,7 @@ export const sizes = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
 /**
  * List of all possibles variants
  */
-export const variants = ['success', 'warning', 'danger', 'info', 'app'];
+export const variants = ['success', 'warning', 'danger', 'info', 'app', 'neutral'];
 /**
  * List of all possibles variants styles
  */

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

@@ -15,14 +15,6 @@ export class MgIcon {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-icon']);
-        /**
-         * Method to set default varianStyle props
-         * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-         */
-        this.setDefaultVariantStyle = () => {
-            if (this.variantStyle === undefined)
-                this.variantStyle = 'background';
-        };
         /**
          * Render icon in shadowroot
          * @param icon - icon to render
@@ -71,24 +63,38 @@ export class MgIcon {
         }
     }
     validateVariant(newValue, oldValue) {
-        if (newValue !== undefined) {
-            if (!variants.includes(newValue))
+        var _a;
+        // Remove old variant if exists
+        if (oldValue !== undefined) {
+            this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
+        }
+        // Set new variant
+        const variant = newValue === 'neutral' ? 'dark' : newValue;
+        if (variant !== undefined) {
+            if (![...variants, 'dark'].includes(variant)) {
                 throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
+            }
             else {
-                this.setDefaultVariantStyle();
-                if (oldValue !== undefined)
-                    this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
-                this.classCollection.add(`mg-c-icon--variant-${newValue}`);
+                (_a = this.variantStyle) !== null && _a !== void 0 ? _a : (this.variantStyle = 'background');
+                this.classCollection.add(`mg-c-icon--variant-${variant}`);
             }
         }
+        else {
+            // remove variantStyle if variant is undefined
+            this.variantStyle = undefined;
+        }
     }
     validateVariantStyle(newValue, oldValue) {
+        // Remove old variantStyle if exists
+        if (oldValue !== undefined) {
+            this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
+        }
+        // Set new variantStyle
         if (newValue !== undefined) {
-            if (!variantStyles.includes(newValue))
+            if (!variantStyles.includes(newValue)) {
                 throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);
+            }
             else {
-                if (oldValue !== undefined)
-                    this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
                 this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
             }
         }
@@ -135,7 +141,6 @@ export class MgIcon {
         return {
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
@@ -156,11 +161,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "IconSizeType",
@@ -182,15 +187,15 @@ export class MgIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "IconVariantType",
-                    "resolved": "\"app\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "resolved": "\"app\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                     "references": {
                         "IconVariantType": {
                             "location": "import",
@@ -207,11 +212,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "variant"
             },
             "variantStyle": {
                 "type": "string",
-                "attribute": "variant-style",
                 "mutable": true,
                 "complexType": {
                     "original": "IconVariantStyleType",
@@ -232,11 +237,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "variant-style"
             },
             "spin": {
                 "type": "boolean",
-                "attribute": "spin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -252,6 +257,7 @@ export class MgIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "spin",
                 "defaultValue": "false"
             }
         };

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

@@ -102,7 +102,6 @@ export class MgTag {
         return {
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "TagVariantType",
@@ -124,11 +123,11 @@ export class MgTag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'primary'"
             },
             "outline": {
                 "type": "boolean",
-                "attribute": "outline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -144,11 +143,11 @@ export class MgTag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "outline",
                 "defaultValue": "false"
             },
             "soft": {
                 "type": "boolean",
-                "attribute": "soft",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -164,6 +163,7 @@ export class MgTag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "soft",
                 "defaultValue": "false"
             }
         };

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

@@ -29,7 +29,6 @@ export class MgTooltipContent {
         return {
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -44,7 +43,8 @@ export class MgTooltipContent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "message"
             }
         };
     }