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

package/dist/collection/components/mds-pref-language/mds-pref-language.js

@@ -4,6 +4,8 @@ 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";
+import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
+import miBaselineKeyboardArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
 /**
  * @slot default - Add `mds-pref-language-item` element/s.
  */
@@ -17,7 +19,7 @@ export class MdsPrefLanguage {
             es: localeEs,
             it: localeIt,
         });
-        this.showLanguageSelectDropdown = () => {
+        this.toggleDropdown = () => {
             this.showDropdown = !this.showDropdown;
         };
         this.hideLanguageSelectDropdown = () => {
@@ -38,6 +40,7 @@ export class MdsPrefLanguage {
                     this.languageChangeEvent.emit({ language: this.currentSelectedItem.code });
                     this.showDropdown = false;
                     this.setLanguage(e.detail.language);
+                    this.t.update(document);
                 });
             });
             this.elPreferLanguageItems.forEach(element => {
@@ -52,7 +55,10 @@ export class MdsPrefLanguage {
         };
         this.setLanguage = (set) => {
             var _a, _b;
-            set === 'auto' ? this.set = (_b = (_a = this.userLanguage) !== null && _a !== void 0 ? _a : this.pageLanguage) !== null && _b !== void 0 ? _b : this.systemLanguage : this.set = set;
+            if (!/(auto)|^[a-z]{2}(-[A-Z]{2})?$/gm.exec(set)) {
+                throw Error(`Language code setted not reconized: ${set}`);
+            }
+            set === 'auto' ? this.set = (_b = (_a = this.userLanguage) !== null && _a !== void 0 ? _a : this.pageLanguage) !== null && _b !== void 0 ? _b : this.systemLanguage : this.set = this.sanitizeLanguage(set);
             this.prefChangeEvent.emit({ preference: 'language' });
             localStorage.setItem(this.localStorageAlias, this.set);
             if (document) {
@@ -61,23 +67,29 @@ export class MdsPrefLanguage {
             }
         };
         this.showDropdown = false;
+        this.language = undefined;
         this.set = 'auto';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentDidLoad() {
-        var _a;
-        this.systemLanguage = this.sanitizeLanguage(navigator.language);
-        this.userLanguage = localStorage.getItem(this.localStorageAlias);
-        this.pageLanguage = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang'));
-        this.setLanguage(this.set);
         this.checkLanguageSelect();
     }
     componentWillRender() {
+        var _a, _b;
+        this.systemLanguage = this.sanitizeLanguage(navigator.language);
+        this.userLanguage = localStorage.getItem(this.localStorageAlias);
+        this.pageLanguage = (_b = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang'))) !== null && _b !== void 0 ? _b : null;
+        this.setLanguage(this.set);
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: 'ecb0dfa11b6fc9a5d8f67e7a3b0563ec05586a3a' }, h("mds-pref-language-nav", { key: 'df15f66c620b7e7cef45433ef4df6433e1955f8a', active: this.showDropdown, id: "mds-pref-language-nav", onMdsPrefLanguageNavSelect: this.showLanguageSelectDropdown, set: this.set }), h("mds-dropdown", { key: 'bbb52d770f6270c727c393939274824b4cdb6cd7', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown }, h("slot", { key: '3d1af8d93fbc0abdb905e5abc04ccc9ea56bf78e' })), this.set !== this.defaultLanguage && h("mds-text", { key: 'dc60f8c62c06e1227513ee8b8e32f2f94974cd67', typography: "caption" }, this.t.get('defaultLanguage'))));
+        var _a;
+        return (h(Host, { key: '004e6c321027b3d41aeef337a9006ec1133fe046' }, h("div", { key: 'b5f15701517827f06f623ef796d852038ed40c90', class: "menu" }, h("mds-text", { key: '575d52cb2e7263a163353a074785094e7f5dffb0', class: "info", typography: "caption" }, h("b", { key: '688d99f90e35c7a77ded0049f4866f6a64daf45f' }, this.t.get('label'))), h("mds-tab", { key: '98fcc66f3838b976593deda6d14aa72ec2c3177f' }, h("mds-tab-item", { key: '8396c3afda71454ea0ea4478d9077a9b2ff506f3', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), h("mds-dropdown", { key: 'd5cb5237e922d67b1afbe50b7478895ab80f2402', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown, autoPlacement: true }, h("slot", { key: 'dd72a6011f36cc10b6f87110665b7f1db7058e13' })), this.set !== this.defaultLanguage && h("mds-text", { key: '96eb6bfa741a3164dd05862c6c180f6a8af3c232', typography: "caption" }, this.t.get('defaultLanguage'))));
     }
     static get is() { return "mds-pref-language"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["mds-pref-language.css"]
@@ -94,21 +106,15 @@ export class MdsPrefLanguage {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "PrefLanguageType",
-                    "resolved": "`${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}`",
-                    "references": {
-                        "PrefLanguageType": {
-                            "location": "import",
-                            "path": "@type/language",
-                            "id": "src/type/language.ts::PrefLanguageType"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\n/**\n  Specifies the language code based on HTML `lang` attribute"
+                    "text": "Specifies the language code based on HTML `lang` attribute\n\nA string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}.\n\n`Examples of valid language codes include \"en\", \"en-US\", \"fr\", \"fr-FR\", \"es-ES\", etc.`\n\nSupported languages are Italiano, English, Espa\u00F1ol, \u03B5\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AC"
                 },
                 "attribute": "set",
                 "reflect": true,
@@ -118,7 +124,8 @@ export class MdsPrefLanguage {
     }
     static get states() {
         return {
-            "showDropdown": {}
+            "showDropdown": {},
+            "language": {}
         };
     }
     static get events() {
@@ -166,5 +173,26 @@ export class MdsPrefLanguage {
                 }
             }];
     }
+    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-pref-language/meta/dictionary.js

@@ -3,5 +3,7 @@ const languageDictionary = [
     'it',
     'en',
     'el',
+    'non una lingua',
+    'it-IT',
 ];
 export { languageDictionary, };

package/dist/collection/components/mds-pref-language/test/mds-pref-language.stories.js

@@ -3,7 +3,7 @@ import { languageDictionary } from "../meta/dictionary";
 export default {
     title: 'UI / Preferences / Language',
     argTypes: {
-        mode: {
+        set: {
             type: { name: 'string' },
             options: languageDictionary,
             control: { type: 'select' },

package/dist/collection/components/mds-pref-language-item/mds-pref-language-item.js

@@ -14,14 +14,21 @@ export class MdsPrefLanguageItem {
         this.handleClick = () => {
             this.selectLanguageEvent.emit({ language: this.code });
         };
+        this.language = undefined;
         this.code = undefined;
         this.selected = false;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
+        if (!localeDefault[this.code]) {
+            throw Error(`Language code not found: ${this.code}`);
+        }
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '6dab1fa475e88e3143cce9c0f9f8201a2c5c9850', onClick: this.handleClick }, this.code
+        return (h(Host, { key: '5bbbcd698ddbd64e19500ae8ea15f1f9cc98d7ef', onClick: this.handleClick }, this.code
             ? h("mds-button", { icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "quiet" }, localeDefault[this.code])
             : h("mds-button", { icon: miBaselineCheckCircle, variant: "error", tone: "quiet" }, this.t.get('noCode'))));
     }
@@ -43,18 +50,12 @@ export class MdsPrefLanguageItem {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "LanguageType",
-                    "resolved": "`${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}` | `${Lowercase<string>}${Lowercase<string>}` | undefined",
-                    "references": {
-                        "LanguageType": {
-                            "location": "import",
-                            "path": "@type/language",
-                            "id": "src/type/language.ts::LanguageType"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specifies the language code based on HTML `lang` attribute"
@@ -82,6 +83,11 @@ export class MdsPrefLanguageItem {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "selectLanguageEvent",
@@ -106,5 +112,26 @@ export class MdsPrefLanguageItem {
                 }
             }];
     }
+    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-pref-theme/mds-pref-theme.js

@@ -29,6 +29,8 @@ export class MdsPrefTheme {
         this.overlayShow = false;
         this.updateCSSCustomProps = () => {
             var _a, _b, _c;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.element);
             this.cssOverlayShowDuration = (_a = elementStyles.getPropertyValue('--mds-pref-theme-overlay-show-duration')) !== null && _a !== void 0 ? _a : '300';
             this.cssOverlayFadeoutDuration = (_b = elementStyles.getPropertyValue('--mds-pref-theme-overlay-fadeout-duration')) !== null && _b !== void 0 ? _b : '200';
@@ -142,16 +144,20 @@ export class MdsPrefTheme {
                     break;
             }
         };
+        this.language = undefined;
         this.mode = undefined;
         this.transition = 'smooth';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
+        var _a, _b;
         this.t.lang(this.element);
+        this.setTheme((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     componentDidLoad() {
-        var _a, _b;
         this.updateCSSCustomProps();
-        this.setTheme((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue, oldValue) {
         if (newValue === oldValue) {
@@ -171,17 +177,17 @@ export class MdsPrefTheme {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3e7044185f83c6332ff5bee841d0ca31b22014f5' }, h("mds-text", { key: 'e09e3245ef3d8fe817eff4be931141d7fe960969', class: "info", typography: "caption" }, h("b", { key: '96f4eadc18c3b48b7534af2c7420695261a87545' }, this.t.get('label')), " ", this.t.get(this.theme[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '03ed813a919343eab042c864c700c1f364b59c5e' }, h("mds-tab-item", { key: 'fff929bcb64fd1a1b93f17f6a90291e640e403ef', selected: this.mode === 'light', onClick: () => {
+        return (h(Host, { key: '8b4fdbfd57cac2dece783ae611672a711f561b8b' }, h("mds-text", { key: 'e6378045625e73131b96e3cc02e44411a5672bdf', class: "info", typography: "caption" }, h("b", { key: '12bb77a847664774b256b1344b7ec5e98890fb75' }, this.t.get('label')), " ", this.t.get(this.theme[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '7a0ce9a18d73ae7aa4c5631f7f46d86d6ecaca83' }, h("mds-tab-item", { key: 'a8b1d57b0b8a05eeaf993f2bab7760eb781fcc7e', selected: this.mode === 'light', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
                 this.changeTheme('light');
-            }, class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: '4349ee435b652f3a0b806d092564add83b47e3f5', selected: this.mode === 'system', onClick: () => {
+            }, class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: 'a33be13bf36905c68ded033d4f8f3d2682fb5358', selected: this.mode === 'system', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
                 this.changeTheme('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '64bbccff702b226eab64e93cf7e13c06e9fc170d', selected: this.mode === 'dark', onClick: () => {
+            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '764e9f4722f053a0c1740ccefe887cf9cb6db317', selected: this.mode === 'dark', onClick: () => {
                 if (this.overlayShow) {
                     return;
                 }
@@ -251,6 +257,11 @@ export class MdsPrefTheme {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "prefChangeEvent",
@@ -275,6 +286,27 @@ export class MdsPrefTheme {
                 }
             }];
     }
+    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"; }
     static get watchers() {
         return [{

package/dist/collection/components/mds-price-table/test/mds-price-table.stories.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 export default {
     title: 'UI / Price table',
 };
-const Template = args => h("div", { class: "grid gap-600" }, h("mds-text", { typography: "h1", class: "desktop:hidden" }, "Choose the plan for you"), h("div", { class: "grid tablet:grid-cols-2 mobile:grid-cols-1 gap-600" }, h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", null, h("mds-text", { typography: "h5", slot: "header" }, "Basic plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "49\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "10")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "10GB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" })))), h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", { class: "bg-label-amaranth-10" }, h("mds-text", { typography: "h5", slot: "header" }, "Professional plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "99\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "20")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "20GB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" })))), h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", { class: "bg-label-violet-10" }, h("mds-text", { typography: "h5", slot: "header" }, "Enterprise plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "149\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "Unlimited")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "1TB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "supported" }))))), h("mds-price-table", Object.assign({}, args, { class: "tablet-max:hidden" }), h("mds-price-table-header", Object.assign({}, args, { class: "mobile:grid-cols-1 tablet:grid-cols-3 desktop:grid-cols-4" }), h("mds-text", { typography: "h1", class: "tablet:col-span-3 col-span-1 desktop:col-span-1 desktop:py-600" }, "Choose the plan for you"), h("mds-price-table-list", null, h("mds-text", { typography: "h5", slot: "header" }, "Basic plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "49\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-list", { class: "bg-label-amaranth-10" }, h("mds-text", { typography: "h5", slot: "header" }, "Professional plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "99\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-list", { class: "bg-label-violet-10" }, h("mds-text", { typography: "h5", slot: "header" }, "Enterprise plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", slot: "price" }, "149\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia"))), h("mds-price-table-features", Object.assign({}, args), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features", h("mds-help", null, "The base features are: Login, Logout and Register.")), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "10"), h("mds-price-table-features-cell", { type: "text" }, "20"), h("mds-price-table-features-cell", { type: "text" }, "Unlimited", h("mds-help", null, "Aw, c'mon... You know it's impossible."))), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "10GB"), h("mds-price-table-features-cell", { type: "text" }, "20GB"), h("mds-price-table-features-cell", { type: "text" }, "1TB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" })))));
+const Template = args => h("div", { class: "grid gap-600" }, h("mds-text", { typography: "h1", tag: "h3", class: "desktop:hidden" }, "Choose the plan for you"), h("div", { class: "grid tablet:grid-cols-2 mobile:grid-cols-1 gap-600" }, h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", null, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Basic plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "49\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "10")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "10GB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "unsupported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" })))), h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", { class: "bg-label-amaranth-10" }, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Professional plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "99\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "20")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "20GB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" })))), h("mds-price-table", Object.assign({}, args, { class: "desktop:hidden" }), h("mds-price-table-list", { class: "bg-label-violet-10" }, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Enterprise plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "149\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-features", null, h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "Unlimited")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "1TB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "supported" }))))), h("mds-price-table", Object.assign({}, args, { class: "tablet-max:hidden" }), h("mds-price-table-header", Object.assign({}, args, { class: "mobile:grid-cols-1 tablet:grid-cols-3 desktop:grid-cols-4" }), h("mds-text", { typography: "h1", tag: "h3", class: "tablet:col-span-3 col-span-1 desktop:col-span-1 desktop:py-600" }, "Choose the plan for you"), h("mds-price-table-list", null, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Basic plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "49\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-list", { class: "bg-label-amaranth-10" }, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Professional plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "99\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia")), h("mds-price-table-list", { class: "bg-label-violet-10" }, h("mds-text", { typography: "h5", tag: "h4", slot: "header" }, "Enterprise plan"), h("mds-text", { typography: "detail", slot: "header" }, "Piano adatto a liberi professionisti con studi di piccole dimensioni."), h("mds-text", { typography: "h2", tag: "h4", slot: "price" }, "149\u20AC"), h("mds-button", { slot: "action", variant: "dark" }, "Inizia"))), h("mds-price-table-features", Object.assign({}, args), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Base features", h("mds-help", null, "The base features are: Login, Logout and Register.")), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Users"), h("mds-price-table-features-cell", { type: "text" }, "10"), h("mds-price-table-features-cell", { type: "text" }, "20"), h("mds-price-table-features-cell", { type: "text" }, "Unlimited", h("mds-help", null, "Aw, c'mon... You know it's impossible."))), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "User data"), h("mds-price-table-features-cell", { type: "text" }, "10GB"), h("mds-price-table-features-cell", { type: "text" }, "20GB"), h("mds-price-table-features-cell", { type: "text" }, "1TB")), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Customer support"), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Automated functionalities"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Analytics"), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Export reports"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Reports snapshots"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" }), h("mds-price-table-features-cell", { type: "supported" })), h("mds-price-table-features-row", null, h("mds-price-table-features-cell", { type: "label" }, "Advanced reports"), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "unsupported" }), h("mds-price-table-features-cell", { type: "supported" })))));
 export const Default = Template.bind({});
 Default.args = {
     label: 'Report e analisi',

package/dist/collection/components/mds-price-table-features/mds-price-table-features.css

@@ -53,6 +53,8 @@ header {
   }
 }
 
+@tailwind utilities;
+
 @container style(--magma-pref-theme: dark) {
   :host {
 

package/dist/collection/components/mds-price-table-list/mds-price-table-list.css

@@ -25,24 +25,24 @@
   transition-duration: 200ms;
 
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  
+
   background-color: var(--mds-price-table-list-separator-color);
   transition-property: background-color;
 }
 
 
-header {
+.header {
   display: grid;
 }
 
-main{
+.main{
 
   gap: 0.75rem;
 
   display: grid;
 }
 
-footer{
+.footer{
 
   gap: 1rem;
 

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

@@ -16,8 +16,8 @@ export class MdsPriceTableList {
         this.hasItems = this.hostElement.querySelectorAll('[slot="item"], mds-price-table-list-item').length > 0;
     }
     render() {
-        return (h(Host, { key: '8848846da137075f1279ed2a3a0d802b247f7a4c' }, h("header", { key: 'b07d5e708b943557360769e0a3552daba3ebf300', part: "header" }, h("slot", { key: '744eacfd0a9d4e4402ab58fcdc0ff92d9538694f', name: "header" })), this.hasItems && h("mds-separator", { key: 'bdb0a55215d8f80edd19121f1fd8c799814ba5e3', class: "separator" }), this.hasItems &&
-            h("main", { key: 'c7df8f7ac1c3d845cb700c5a69117c9a5c1d82fb', part: "content" }, h("slot", { key: '5b98f8cfb0d4c6142116b2e098d2777cc9b938a3', name: "item" })), h("footer", { key: '209e4f7eab14165cdb8d7797bac16791a641a576', part: "footer" }, h("slot", { key: '340a3c5c8d55c474a6ac637c6869d8f7cba82697', name: "price" }), h("slot", { key: '36fd3da57ed8f7e665caa0fa5165c19d9d7c329e', name: "action" }))));
+        return (h(Host, { key: '8848846da137075f1279ed2a3a0d802b247f7a4c' }, h("div", { key: 'ffcc0524827624fd6d195ed5a517e8b7e1904e4a', class: "header", part: "header" }, h("slot", { key: 'e07351229478f6e654801e67598a75201f80ab7e', name: "header" })), this.hasItems && h("mds-separator", { key: 'd01804193430448ee78834f0358ab4ef9d71bf3c', class: "separator" }), this.hasItems &&
+            h("main", { key: 'a0d877c27f5b076d0561ed2e89aa54da7a9246ff', class: "main", part: "content" }, h("slot", { key: '3a9029359e46082062c2dbf435ad5d6f57451583', name: "item" })), h("div", { key: 'a95176bd6168f8b60ff9a75ed1b8752f785d0650', class: "footer", part: "footer" }, h("slot", { key: 'e21ad28632027ca11064584bb9e49d7977f3b80b', name: "price" }), h("slot", { key: 'c6e7ad45301d8b27ebf4af90c8654be9fde0c005', name: "action" }))));
     }
     static get is() { return "mds-price-table-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@
 :host {
 
   --mds-progress-background: rgb(var(--tone-neutral-08));
-  --mds-progress-color: rgb(var(--brand-maggioli-03));
+  --mds-progress-color: rgb(var(--variant-primary-03));
   --mds-progress-duration: 750ms;
   --mds-progress-radius: 0.5rem;
   --mds-progress-thickness: 0.5rem;
@@ -89,7 +89,7 @@
 
 :host( [variant="primary"] ) {
 
-  --mds-progress-color: rgb(var(--brand-maggioli-03));
+  --mds-progress-color: rgb(var(--variant-primary-03));
   --mds-progress-background: rgb(var(--tone-neutral-08));
 }
 
@@ -116,7 +116,7 @@
   :host,
   :host( [variant="primary"] ) {
 
-    --mds-progress-color: rgb(var(--brand-maggioli-05));
+    --mds-progress-color: rgb(var(--variant-primary-05));
     --mds-progress-background: rgb(var(--tone-neutral-07));
   }
 
@@ -125,21 +125,21 @@
     --mds-progress-color: rgb(var(--status-error-04));
     --mds-progress-background: rgb(var(--status-error-07));
   }
-  
+
   :host( [variant="warning"] ) {
-  
+
     --mds-progress-color: rgb(var(--status-warning-04));
     --mds-progress-background: rgb(var(--status-warning-07));
   }
-  
+
   :host( [variant="success"] ) {
-  
+
     --mds-progress-color: rgb(var(--status-success-04));
     --mds-progress-background: rgb(var(--status-success-07));
   }
-  
+
   :host( [variant="info"] ) {
-  
+
     --mds-progress-color: rgb(var(--status-info-04));
     --mds-progress-background: rgb(var(--status-info-07));
   }
@@ -151,7 +151,7 @@
     :host,
     :host( [variant="primary"] ) {
 
-      --mds-progress-color: rgb(var(--brand-maggioli-05));
+      --mds-progress-color: rgb(var(--variant-primary-05));
       --mds-progress-background: rgb(var(--tone-neutral-07));
     }
 
@@ -160,21 +160,21 @@
       --mds-progress-color: rgb(var(--status-error-04));
       --mds-progress-background: rgb(var(--status-error-07));
     }
-    
+
     :host( [variant="warning"] ) {
-    
+
       --mds-progress-color: rgb(var(--status-warning-04));
       --mds-progress-background: rgb(var(--status-warning-07));
     }
-    
+
     :host( [variant="success"] ) {
-    
+
       --mds-progress-color: rgb(var(--status-success-04));
       --mds-progress-background: rgb(var(--status-success-07));
     }
-    
+
     :host( [variant="info"] ) {
-    
+
       --mds-progress-color: rgb(var(--status-info-04));
       --mds-progress-background: rgb(var(--status-info-07));
     }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { removeAttributesIf, ifAttribute } from "../../common/aria";
 export class MdsProgress {
     constructor() {
         this.stepsList = new Array();
@@ -12,10 +13,15 @@ export class MdsProgress {
         this.stepsList = this.steps.split(',');
         this.setProgress(this.progress);
     }
+    componentDidLoad() {
+        removeAttributesIf(this.element, 'aria-hidden', 'true', ['aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'role']);
+    }
     setProgress(progress) {
         if (this.steps) {
             this.currentStep = this.stepsList[Math.round(progress * (this.stepsList.length - 1))];
-            this.element.setAttribute('aria-valuetext', this.currentStep);
+            if (!ifAttribute(this.element, 'aria-hidden')) {
+                this.element.setAttribute('aria-valuetext', this.currentStep);
+            }
         }
     }
     progressChanged(progress) {
@@ -25,7 +31,7 @@ export class MdsProgress {
         this.stepsList = steps.split(',');
     }
     render() {
-        return (h(Host, { key: '11287e6d9ca73b8e06d69447b8863227971f809a', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": Math.round(this.progress * 100), role: "progressbar" }, h("div", { key: '0cf9de0aa4eeb8b8d5d5a21419a441dc70e3a354', class: "contrast-area" }), h("div", { key: 'baaa7f9392b7475836f0b22a91dd499b37bbf947', class: "progress", style: this.direction === 'horizontal'
+        return (h(Host, { key: 'c72c3bb3b536cbe6b8ac8e1c65fa98514b55ac8b', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": !ifAttribute(this.element, 'aria-hidden') && Math.round(this.progress * 100), role: "progressbar" }, h("div", { key: 'cf51b3291d06a782283cc73a615d88e9e7ada927', class: "contrast-area" }), h("div", { key: '6abdc6d4a5896ffb5ee482ef5c4401760efb3fcf', class: "progress", style: this.direction === 'horizontal'
                 ? { flexGrow: `${this.progress}` }
                 : { flexGrow: `${this.progress}`, width: '100%' } })));
     }

package/dist/collection/components/mds-progress/test/mds-progress.stories.js

@@ -23,7 +23,7 @@ export default {
         },
     },
 };
-const Template = args => h("mds-progress", Object.assign({}, args));
+const Template = args => h("mds-progress", Object.assign({ "aria-label": "Progress bar title" }, args));
 export const Default = Template.bind({});
 Default.args = {
     progress: 0.35,

package/dist/collection/components/mds-push-notification/mds-push-notification.css

@@ -162,22 +162,22 @@ header{
 @tailwind utilities;
 
 :host( [variant="primary"][tone="strong"] ) {
-  
-  --mds-push-notification-icon-background-color: rgb(var(--brand-maggioli-05));
-  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-10));
+
+  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-05));
+  --mds-push-notification-icon-color: rgb(var(--variant-primary-10));
 }
 
 :host( [variant="primary"] ),
 :host( [variant="primary"][tone="weak"] ) {
 
-  --mds-push-notification-icon-background-color: rgb(var(--brand-maggioli-09));
-  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-05));
+  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-09));
+  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));
 }
 
 :host( [variant="primary"][tone="quiet"] ) {
 
   --mds-push-notification-icon-background-color: transparent;
-  --mds-push-notification-icon-color: rgb(var(--brand-maggioli-05));
+  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));
 }
 
 @tailwind utilities;