@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/collection/components/mds-input-select/mds-input-select.css

@@ -41,7 +41,7 @@
 :host(:hover),
 :host(:focus-within) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-03);
+  --mds-input-select-variant-color: var(--variant-primary-03);
   --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);
   --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);
   --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);
@@ -169,8 +169,8 @@
 
   transition-duration: 200ms;
 
-  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));
-  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));
+  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));
+  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));
   transition-property: background-color, fill;
 }
 
@@ -192,7 +192,7 @@
 
   :host {
 
-    --mds-input-select-background: rgb(var(--brand-maggioli-07));
+    --mds-input-select-background: rgb(var(--variant-primary-07));
   }
 }
 
@@ -200,18 +200,18 @@
 
 :host {
 
-  --mds-input-select-icon-color: var(--brand-maggioli-03);
+  --mds-input-select-icon-color: var(--variant-primary-03);
   --mds-input-select-variant-color: 0 0 0;
-  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));
-  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));
-  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));
-  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));
 }
 
 :host( :hover ),
 :host( :focus-within ) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-04);
+  --mds-input-select-variant-color: var(--variant-primary-04);
 }
 
 :host( [variant="info"] ) {
@@ -316,7 +316,7 @@
 
     --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
     --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));
+    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));
     --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
     --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
     --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));
@@ -335,7 +335,7 @@
 
       --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
       --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));
+      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));
       --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
       --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
       --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));

package/dist/collection/components/mds-input-select/mds-input-select.js

@@ -81,20 +81,20 @@ export class MdsInputSelect {
      * Emits the change event when the component value changes
      */
     valueChanged() {
-        var _a;
+        var _a, _b, _c;
         this.selected = this.value !== '';
-        this.changeEvent.emit({ value: this.value });
-        this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
-            this.internals.setFormValue(this.value);
+            this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (h(Host, { key: '6de32fabaad2ade098b2eb2b518c7679c4cdf986' }, h("select", { key: '5b024f08aaa0a61afd088e6d33144d05aa920ed4', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: '0dbfee31bcd9e66faeb1ac6f6060df5aa6534319', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '31a79728c16dab94dd0f500f311dd29849b0ba84', class: "icon-container" }, h("i", { key: '40c4e77003c6df880931decad9fcfc77c943b119', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '6937fa4072834a9a52f4023ec3dd17ad3f4b473f', class: "option-container" }, h("slot", { key: '22b1c2ce6ebbc05c124b9d47fac5f5ba8fcb9e6e', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '469bc58f25c21b93179c4787e98041c973ae4ffe', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '73fdfa42bf8abff88df3ab5f91066df58d663ebe', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: 'c99eb7bdf0efb27f938bb03fb0633c0da67223ca', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: 'e1ea289b9af23ce497e370abd8d874d739d4eb77' }, h("select", { key: '0df60946dc418b09ada1dfb04ad5f0d962bd93f7', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: 'e39a3bce88402b2caf01d565d365102e35af7f52', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '4c9de2341fcf7406f053e69ae4110d74633b3817', class: "icon-container" }, h("i", { key: 'cb279deb238fbec77456e3d5322e05bbcb6068ac', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '4a83b6b1daadb49197a9dcd7db57d2670f480955', class: "option-container" }, h("slot", { key: '43a3d13257bfea367bf1abb5d95137fdc2940138', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'b8ab18d380eec1842ed12487f819e8eb32132a5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'b1bfb92dae2d4b48784958158edc2559d338931e', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '9f441604bfc6035b0f1875ae17026a8a369ec620', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -312,13 +312,13 @@ export class MdsInputSelect {
                     "text": "Emits an InputChangeEventDetail when the value of the input element changes"
                 },
                 "complexType": {
-                    "original": "InputValue",
-                    "resolved": "InputValue",
+                    "original": "MdsInputEventDetail",
+                    "resolved": "MdsInputEventDetail",
                     "references": {
-                        "InputValue": {
+                        "MdsInputEventDetail": {
                             "location": "import",
-                            "path": "@interface/input-value",
-                            "id": "src/interface/input-value.ts::InputValue"
+                            "path": "@type/input",
+                            "id": "src/type/input.ts::MdsInputEventDetail"
                         }
                     }
                 }

package/dist/collection/components/mds-input-switch/mds-input-switch.css

@@ -43,12 +43,12 @@
   --mds-input-switch-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   --mds-input-switch-duration: 300ms;
   --mds-input-switch-icon-color-checked-disabled: rgb(var(--tone-neutral-06));
-  --mds-input-switch-icon-color-checked: rgb(var(--brand-maggioli-04));
+  --mds-input-switch-icon-color-checked: rgb(var(--variant-primary-04));
   --mds-input-switch-icon-color-indeterminate-disabled: rgb(var(--tone-neutral-05));
   --mds-input-switch-icon-color-indeterminate: rgb(var(--tone-neutral-05));
   --mds-input-switch-icon-color-unchecked-disabled: rgb(var(--tone-neutral-06));
   --mds-input-switch-icon-color-unchecked: rgb(var(--tone-neutral-06));
-  --mds-input-switch-box-color-checked: rgb(var(--brand-maggioli-04));
+  --mds-input-switch-box-color-checked: rgb(var(--variant-primary-04));
   --mds-input-switch-box-color-disabled-checked: rgb(var(--tone-neutral-06));
   --mds-input-switch-box-color-disabled-unchecked: rgb(var(--tone-neutral-08));
   --mds-input-switch-box-color-unchecked: rgb(var(--tone-neutral-07));

package/dist/collection/components/mds-input-switch/mds-input-switch.js

@@ -63,19 +63,20 @@ export class MdsInputSwitch {
         this.value = '';
     }
     componentDidLoad() {
-        var _a;
-        this.internals.setFormValue(this.checked ? (_a = this.value) !== null && _a !== void 0 ? _a : null : null);
+        var _a, _b;
+        this.label = (_a = this.host.textContent) !== null && _a !== void 0 ? _a : '';
+        this.internals.setFormValue(this.checked ? (_b = this.value) !== null && _b !== void 0 ? _b : null : null);
         this.checkFocusElement();
     }
     render() {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: 'c2676f5b032e265a4cf226881f2770fe59d9a7b4', onClick: this.handleDirty }, h("input", { key: '26d6c9c59360a70777d764a0916b8b35c76c3379', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
+        return (h(Host, { key: 'f9a223e37e15669ba5b8ed7e7f771c4445f24c15', onClick: this.handleDirty }, h("input", { key: '3a3fe64406b9617e777fcb18ea02c8d32e71e7af', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
             ?
-                h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", role: "switch" }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove }))))
+                h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.label }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove }))))
             :
-                h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", role: "switch" }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: iconUnchecked })), h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), h("label", { key: 'd88da755d33ef95c388ada564b3a95ceab951b91', htmlFor: "field", class: "label-text" }, h("mds-text", { key: 'a3707cc5351f6c6193112fb7f60a8d565d0502df', typography: this.typography, variant: this.variant }, h("slot", { key: 'ac7aa4307abdc40cc51ffd9248b8564d8366ab80' })))));
+                h("label", { htmlFor: "field", class: "label-icon", "aria-hidden": "true" }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: iconUnchecked })), h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), h("label", { key: '4f9a69c82ecc673d34a2de4119709b82f5836313', htmlFor: "field", class: "label-text" }, h("mds-text", { key: '94b9e53c0ec630e477cbcada5d3c8342655b9dd9', typography: this.typography, variant: this.variant }, h("slot", { key: 'c4180e63473708002b9ccac0eb222c8194f4433a' })))));
     }
     static get is() { return "mds-input-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-input-tip-item/mds-input-tip-item.js

@@ -1,27 +1,35 @@
 import { Host, h } from "@stencil/core";
 import miBaselineDone from "@icon/mi/baseline/done.svg";
 import { Locale } from "../../common/locale";
+import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
+import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 export class MdsInputTipItem {
     constructor() {
         this.t = new Locale({
             en: localeEn,
+            el: localeEl,
+            es: localeEs,
             it: localeIt,
         });
+        this.language = undefined;
         this.variant = 'required';
         this.expanded = true;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '7c43c391e7fd0c3d55d92eedc7cc5cadd4689215' }, h("div", { key: 'afaceaa0769892dfddf433a041d292b5dc3e7c2c', class: "content" }, this.variant === 'text' &&
-            h("mds-text", { key: '5fd3f799c904e8a0a7fb5cb2e8634164d38ba818', typography: "option", truncate: "word" }, h("span", { key: 'f2ae9cb7229c5c9d08777fc42c83acabaf3367e9', class: "text" }, h("slot", { key: '79d7b2ec986da254f6382ca4560a2aa594d16394' }))), this.variant === 'readonly' &&
-            h("mds-text", { key: '1fc3a0ee8291d209e9283cc875f65c93fd6177a0', typography: "option", truncate: "word" }, h("span", { key: '2248d66766b886a38b95a014044f375adc4f37e4', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
-            h("mds-text", { key: 'fa7402f8a41bd583bb28514046efe4fabfad0c53', typography: "option", truncate: "word" }, h("span", { key: '0951fe81c0c50c9dc647d8709186d202ebb75195', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
-            h("mds-text", { key: 'faf16fe90889847544aaa976a952b352e086c4e6', typography: "option", truncate: "word" }, h("span", { key: 'fd3d53aef765e7a1ce8f08feb06f2d1959008488', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
-            h("span", { key: '422237ea1577f07a8e37a5ad964dcfbc52a60e98', class: "icon", innerHTML: miBaselineDone }))));
+        return (h(Host, { key: 'dfdba1a88042fc3a4fe6d29710e43cbddd797053' }, h("div", { key: 'cdc9cf831bb5621b046161ceed728f3cd52ab11c', class: "content" }, this.variant === 'text' &&
+            h("mds-text", { key: '3b53cc5eccd980f1666edfb1b9642d155bab8c15', typography: "option", truncate: "word" }, h("span", { key: '832d4dfa2c938a936bedbc0bdc00f446f71a53e3', class: "text" }, h("slot", { key: '5550f90749b34a8d748034f264089176d2735b55' }))), this.variant === 'readonly' &&
+            h("mds-text", { key: '7b7538403c428c440447a75b22952cc937d665f5', typography: "option", truncate: "word" }, h("span", { key: '0309833c99055fec6e8b5d8ec83220d8c0f7cf44', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
+            h("mds-text", { key: '32b1fa3193f69afb0ad9fc8c4c303c29623ea572', typography: "option", truncate: "word" }, h("span", { key: 'dd4ae36e3e512f1f734fead8941a8b66e53536b6', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
+            h("mds-text", { key: 'ffcb47a3ad73190ae42540240b7b17b71a3ddc04', typography: "option", truncate: "word" }, h("span", { key: 'f810d3748dafcdf7d23ba65a137be9b7f8ddf7b3', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
+            h("span", { key: '97aeef9538a145cf335a857a334047627d190a8c', class: "icon", innerHTML: miBaselineDone }))));
     }
     static get is() { return "mds-input-tip-item"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +54,7 @@ export class MdsInputTipItem {
                     "references": {
                         "InputTipItemVariantType": {
                             "location": "import",
-                            "path": "@component/mds-input-tip-item/meta/types",
+                            "path": "./meta/types",
                             "id": "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType"
                         }
                     }
@@ -81,5 +89,31 @@ export class MdsInputTipItem {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
+    static get methods() {
+        return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "element"; }
 }

package/dist/collection/components/mds-input-upload/mds-input-upload.css

@@ -77,7 +77,7 @@
 
   width: 3rem;
 
-  fill: rgb(var(--brand-maggioli-05));
+  fill: rgb(var(--variant-primary-05));
 }
 
 .action{

package/dist/collection/components/mds-input-upload/mds-input-upload.js

@@ -7,18 +7,24 @@ import { Host, h } from "@stencil/core";
 import { ErrorType, LOCALSTORAGE_KEY_USER_SORT, Status } from "./meta/types";
 import { genericMimeToExt } from "../../dictionary/file-extensions";
 import { Locale } from "../../common/locale";
+import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
+import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 export class MdsInputUpload {
     constructor() {
         this.fileUploaded = 0;
         this.cssMinCols = 1000;
-        this.id = 0;
+        this.idFile = 0;
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.updateCSSCustomProps = () => {
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssMinCols = Number(elementStyles.getPropertyValue('--mds-input-upload-min-cols'));
         };
@@ -81,6 +87,7 @@ export class MdsInputUpload {
                 localStorage.setItem(LOCALSTORAGE_KEY_USER_SORT, this.userSort);
             }
         };
+        this.language = undefined;
         this.actionTitle = '';
         this.files = [];
         this.progress = 0;
@@ -90,6 +97,9 @@ export class MdsInputUpload {
         this.maxFiles = 1;
         this.sort = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         var _a;
         this.extensions = this.getExtension();
@@ -137,7 +147,7 @@ export class MdsInputUpload {
         // prepare new file added
         for (const file of files) {
             // update only file not added previously or files with errors
-            this.id += 1;
+            this.idFile += 1;
             const index = this.files.findIndex(f => f.key === file.name);
             if (index === -1 || this.files[index].status !== Status.SUCCESS) {
                 // remove file with error
@@ -146,11 +156,11 @@ export class MdsInputUpload {
                 }
                 const { errorMessage, type } = this.checkError(file);
                 if (!errorMessage) {
-                    this.files.push({ key: file.name, file, id: this.id, status: Status.SUCCESS });
+                    this.files.push({ key: file.name, file, id: this.idFile, status: Status.SUCCESS });
                     this.fileUploaded += 1;
                 }
                 else {
-                    this.files.push({ key: file.name, file, id: this.id, status: Status.ERROR, errorType: type, errorMessage });
+                    this.files.push({ key: file.name, file, id: this.idFile, status: Status.ERROR, errorType: type, errorMessage });
                 }
             }
         }
@@ -262,10 +272,16 @@ export class MdsInputUpload {
     sortById(a, b) {
         return b.id - a.id;
     }
+    isSortTabShown() {
+        return !!this.sort && this.files.length > 1;
+    }
     render() {
-        return (h(Host, { key: 'bb94b47985f2008d1957c5550368917a90ed0d00' }, h("div", { key: '488a15cac92f11f5d08260dfc39272a68caa9513', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '9f5cc7df5c018bf888ee819e0dcb88e75b4166ae', class: "main-action" }, h("div", { key: '3648803f69216ecf654e5eeba83a0252ab68b026', class: "main-action-icon" }, h("i", { key: 'e508596eac96561cc88887339cca1fa509fc2f34', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '4b08448d637f8ae0d2d1331490cd32df9e57f770', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '804186cc0f2ee9d097e25190f756066d7d0189cc', class: "main-actions" }, h("mds-button", { key: '86b48032ec40f280e76644f62bc866eaf4d8c9db', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: 'c40f607e1944e5d94d81c139c08eb838b9a4a159', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '55dddf8438827648465a9f96c1885e6de7409685', class: "main-infos" }, h("mds-progress", { key: '6a43c8938281955d5b9d621fd0705f1cb7ebde78', class: "progress-bar", progress: this.progress }), h("mds-text", { key: '36934ba2b1bfa84cd824f7050244c6ab8365324f', variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles })))), h("input", { key: '5d001c732bf1789ef56616a38fe30b117d73bddd', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'b6a4a797160d0ac0e107df860ed262ba0aebda1c', class: "additional-infos" }, h("div", { key: 'c879f45388aab27311a2fdd2f62fef273419103b', class: clsx('file-specs', !this.sort && 'file-specs-sort') }, h("mds-text", { key: 'f49a71e197aebcca36c13f8b39041b08dadea261', variant: "info", typography: "caption" }, this.extensions !== '' ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '82f506590ac8a1b6bd2fadad6a278e6dbb76d540', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), !this.sort ?
-            h("mds-tab", { class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))
-            : ''), h("div", { key: 'db43015f259fc0da2b5514a79a24f426dcff9036', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
+        return (h(Host, { key: 'a792c785e3bf546af643669295339258d432ca2a' }, h("div", { key: 'a56bcd8ba423d5bcebc6db10e6c8d71a1ff4584c', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '95fe93336a217fb31c8356b549a932a9b74ebddd', class: "main-action" }, h("div", { key: '53a6907f96b65a61c03f19ba4d0bba0465f950f8', class: "main-action-icon" }, h("i", { key: '9797bad2c4df806db28e9cd6fe2331ed36c0d29c', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '39ed56cc236e03ad389a879c49af9862e259787f', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '246ae89ee012664526f2bf6da271f679b43853d1', class: "main-actions" }, h("mds-button", { key: 'fb9472b7193a50763a86f7f2f61aff469521b067', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: '068da5408a1f6b61aef95235d64b94e39ca44a8e', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '913ff1d4131646afc616888102fe662b61763da9', class: "main-infos" }, h("mds-progress", { key: '3286632acbc5411a9662ebc364fd6d72f3d5cc46', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
+            ? h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
+            : h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
+                ? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
+                : this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '7b5a9fd3aade909d4204145faa4aee8a9f53e7af', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'ed18861c7e6443fc75dcfa2d408f9b0d90f1b37c', class: "additional-infos" }, h("div", { key: '8b858fcd8ed3eab40406973105550c250fbd971d', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '835f92a0ab6d785e5ad359ef8c7908e5ed98fbcc', variant: "info", typography: "caption" }, this.extensions !== '' ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '32ee88f2bca36400021a394881764b0cea392a52', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
+            h("mds-tab", { key: '8801be0550155b365015a9e2371065f5dad58d59', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '094ddc0512dcd5404c38e18fb3ea160e4a98758c', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { key: '0977f5de0a0d1be969311cf68d272d64108f16d2', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), h("div", { key: '9019416ac646dffe8d021f0843ed979af6bfefb8', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
             switch (file.status) {
                 case Status.ERROR:
                     return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
@@ -370,6 +386,7 @@ export class MdsInputUpload {
     }
     static get states() {
         return {
+            "language": {},
             "actionTitle": {},
             "files": {},
             "progress": {},
@@ -401,6 +418,23 @@ export class MdsInputUpload {
     }
     static get methods() {
         return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "getFiles": {
                 "complexType": {
                     "signature": "() => Promise<FileList | null>",

package/dist/collection/components/mds-kpi/mds-kpi.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsKpi {
     render() {
-        return (h(Host, { key: '622778b0424d201c42d06de1809252e6e97594b9' }, h("slot", { key: 'ae4a925b07d55cb95e101b85de1ba3ac06f0f4bd' })));
+        return (h(Host, { key: '708ae136da63b0837b6b5244bd5914511c827914', role: "list" }, h("slot", { key: 'ab2517e35afd60e26f91823079372201a606f3c3' })));
     }
     static get is() { return "mds-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-kpi-item/mds-kpi-item.css

@@ -9,7 +9,7 @@
 
 :host {
 
-  --mds-kpi-item-icon-color: rgb(var(--brand-maggioli-04));
+  --mds-kpi-item-icon-color: rgb(var(--variant-primary-04));
   --mds-kpi-item-info-background: rgb(var(--tone-neutral));
   --mds-kpi-item-text-animation-placeholder-char: var(--mds-kpi-text-animation-placeholder-char, " ");
   --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);
@@ -18,7 +18,7 @@
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 
   aspect-ratio: 1;
-  background-color: rgb(var(--brand-maggioli-10));
+  background-color: rgb(var(--variant-primary-10));
   border-radius: 1rem;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   display: flex;
@@ -149,7 +149,7 @@
 
     --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));
 
-    background-color: rgb(var(--brand-maggioli-09));
+    background-color: rgb(var(--variant-primary-09));
     box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);
   }
 }
@@ -161,7 +161,7 @@
 
       --mds-kpi-item-info-background: rgb(var(--tone-neutral-09));
 
-      background-color: rgb(var(--brand-maggioli-09));
+      background-color: rgb(var(--variant-primary-09));
       box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);
     }
   }

package/dist/collection/components/mds-kpi-item/mds-kpi-item.js

@@ -7,6 +7,8 @@ import { Host, h } from "@stencil/core";
 export class MdsKpiItem {
     constructor() {
         this.setObserver = () => {
+            if (typeof window === 'undefined')
+                return;
             this.observer = new window.IntersectionObserver(([entry]) => {
                 this.isIntersecting = entry.isIntersecting;
             }, {
@@ -27,8 +29,8 @@ export class MdsKpiItem {
         }
     }
     render() {
-        return (h(Host, { key: '2911297673434a16b9049c4bf2acf555faff5e69' }, this.icon &&
-            h("div", { key: 'e2b5c2dc63faf9ee2dc64bdb00c48cd1b6deca59', class: "icon-container", part: "icon-container" }, h("mds-icon", { key: 'e15f324e1b07630765494996924ef98060d0aa2e', class: "icon", name: this.icon, part: "icon" })), h("div", { key: '21a7b8c7b194c3b3f432ef247a87a5a036d32c33', class: "info", part: "content" }, this.label && this.threshold !== 0 && h("mds-text", { key: 'dab329c0dac5b157f39fdff95bf38c9b24b11345', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && h("mds-text", { key: '76c31a347ef68900510ef026502949a12a83b187', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && h("mds-text", { key: '39e9135ff1a3b1fa425e8706b3c1253e7aa469b0', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && h("mds-text", { key: '85d3a95431d72ff6368435a3eb2e383f1955b6ec', class: "description", typography: "label" }, this.description))));
+        return (h(Host, { key: '18d4a5a877ecded781040a3f6de264e47bc3fd4f', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon &&
+            h("div", { key: '73be825f8674587b7f9f2ad48e5b4ea250f1c7b5', class: "icon-container", part: "icon-container" }, h("mds-icon", { key: 'bc1fb262cb6bffd4c63fed97d655260f91b8b61e', class: "icon", name: this.icon, part: "icon" })), h("div", { key: '6567b14fa5a69948b5099d1a1e9a37d3cba62eb4', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && h("mds-text", { key: '92e58e88536a3324040fa794736df4ce31885747', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" }), this.label && this.threshold === 0 && h("mds-text", { key: 'ae2410bad8c18ef768ce932ad3787597c0a3ccf0', class: "value", typography: "h2" }, this.label), this.description && this.threshold !== 0 && h("mds-text", { key: 'd2c315edd53a1de077bec3da3d72f5ed37e42d8c', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" }), this.description && this.threshold === 0 && h("mds-text", { key: 'a4f762c2e05ce728312cc5e140bd537ddeec155d', class: "description", typography: "label" }, this.description))));
     }
     static get is() { return "mds-kpi-item"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +92,7 @@ export class MdsKpiItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the description under the value in the KPI element"
+                    "text": "Specifies the page threshold which starts the text animation"
                 },
                 "attribute": "threshold",
                 "reflect": false,

package/dist/collection/components/mds-label/mds-label.css

@@ -66,10 +66,6 @@
 
 .button-close{
 
-  margin: 0.0625rem;
-
-  margin-left: 0.25rem;
-
   border-top-right-radius: 0.375rem;
 
   border-bottom-right-radius: 0.375rem;
@@ -78,16 +74,13 @@
 
   padding-right: 0.375rem;
 
-  transition-duration: 200ms;
-
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
   --mds-button-background: var(--mds-label-button-background);
 
   border-radius: 0 var(--mds-label-radius) var(--mds-label-radius) 0;
   fill: var(--mds-label-button-icon-color);
+  flex-shrink: 0;
   height: auto;
-  transition-property: fill;
+  transition-duration: inherit;
 }
 
 .button-close:hover {

package/dist/collection/components/mds-label/mds-label.js

@@ -1,12 +1,23 @@
-import miBaselineClose from "@icon/mi/baseline/close.svg";
+import miBaselineCancel from "@icon/mi/baseline/cancel.svg";
 import { Host, h } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
+import { Locale } from "../../common/locale";
+import localeEl from "./meta/locale.el.json";
+import localeEn from "./meta/locale.en.json";
+import localeEs from "./meta/locale.en.json";
+import localeIt from "./meta/locale.it.json";
 /**
  * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export class MdsLabel {
     constructor() {
         this.km = new KeyboardManager();
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickDelete = (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
@@ -22,6 +33,7 @@ export class MdsLabel {
             }
             this.km.detachClickBehavior();
         };
+        this.language = undefined;
         this.labelAction = 'Rimuovi';
         this.variant = 'sky';
         this.tone = 'quiet';
@@ -29,7 +41,11 @@ export class MdsLabel {
         this.typography = 'caption';
         this.deletable = false;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentDidLoad() {
+        this.t.lang(this.host);
         this.handleKeyboard();
     }
     componentDidUpdate() {
@@ -39,7 +55,7 @@ export class MdsLabel {
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '91406d3339f455e81d85cf89778a176ce5ace81d' }, h("mds-text", { key: '12cc18afce2704405ad108e4a4cc8371a3fba92d', class: "text", truncate: this.truncate, typography: this.typography }, h("slot", { key: '21b6a80dee146e3afd710826c24be3ea109b77f1' })), this.deletable && h("mds-button", { key: '7432828a7805d42aed3edd64856c45d2f864e981', class: "button-close", icon: miBaselineClose, onClick: this.onClickDelete.bind(this), title: this.labelAction })));
+        return (h(Host, { key: '298879cbb2e3124591fd56193e1fb4c9c742762f' }, h("mds-text", { key: 'd83285e05d3349893bb631c0959b308b77a61b91', class: "text", truncate: this.truncate, typography: this.typography }, h("slot", { key: '91a1447d89af77cf4c04af5c317746645b8c42d6' })), this.deletable && h("mds-button", { key: '5d19895daf7e8d9ea9c1bce66cc95446c8591f27', class: "button-close", icon: miBaselineCancel, onClick: this.onClickDelete.bind(this), title: this.t.get('remove') })));
     }
     static get is() { return "mds-label"; }
     static get encapsulation() { return "shadow"; }
@@ -188,6 +204,11 @@ export class MdsLabel {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "deletedEvent",
@@ -206,5 +227,26 @@ export class MdsLabel {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/mds-list/mds-list.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsList {
     render() {
-        return (h(Host, { key: 'ae1c37331699d0a9a641b0f717e9acb9ae386845' }, h("slot", { key: 'd16cb92b63cd86dfeb6c019428c5d50c7f5b5175' })));
+        return (h(Host, { key: '16ebaa24a0bdf2be41d7f56123f7c6715854eb24', role: "list" }, h("slot", { key: '637993685633cb101f4ec188160be16cdbc7b60b' })));
     }
     static get is() { return "mds-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-list-item/mds-list-item.js

@@ -11,7 +11,7 @@ export class MdsListItem {
     }
     render() {
         var _a;
-        return (h(Host, { key: '1f2807ad44c4136365126057c22c320bf778a92b' }, h("mds-icon", { key: '392bc8cdba10585cc2a535c88d12431ed3da5445', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: 'c1583003e9afebd66b3c48d5de36750361cebed6', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: '0c8b8aefbb6bcdc000807af72b65857fd0d296c7' }))));
+        return (h(Host, { key: '3f67b8ddd50a76c5647ad78856b9a65c65b55820', role: "listitem" }, h("mds-icon", { key: 'f6b2abd54a12676084a41d42d4afa01095562bc4', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), h("mds-text", { key: '003bb421b298448196234fc3800df6be64a1416c', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, h("slot", { key: 'ccbb7248d908cc77497aa0b58894ea896bbb9e51' }))));
     }
     static get is() { return "mds-list-item"; }
     static get encapsulation() { return "shadow"; }