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

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

@@ -14,6 +14,8 @@ export class MdsModal {
         this.bottom = false;
         this.updateCSSCustomProps = () => {
             var _a;
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssTransitionDuration = (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
@@ -58,7 +60,7 @@ export class MdsModal {
         this.top = this.host.querySelector('[slot="top"]') !== null;
         this.window = this.host.querySelector('[slot="window"]') !== null;
         if (this.window) {
-            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
+            (_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
     componentWillRender() {
@@ -81,11 +83,11 @@ export class MdsModal {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '0affc28ca7bad26ba60ad836dfed7b77490d9858', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
+        return (h(Host, { key: 'ba7ec18e9af6777448b0e24cc0a1297051e2d093', "aria-modal": clsx(this.opened ? 'true' : 'false'), onClick: (e) => { this.closeModal(e); } }, this.window
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'bb4ace2cafc3eafefbc8729431a2a8172d8b318b', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { key: 'c355904cb21c36327fa02b9b15846e1ecb847fe1', class: "action-close", icon: "mi/baseline/close", variant: "light", tone: "quiet", size: "xl", onClick: (e) => { this.closeModal(e); } })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,13 +6,13 @@ export default {
     argTypes: {
         opened: {
             description: 'Specifies if the modal is opened or not',
-            type: { name: 'boolean', required: false },
+            type: { name: 'boolean' },
         },
         position: {
             control: { type: 'select' },
             description: 'Specifies the animation position of the modal window',
             options: modalPositionDictionary,
-            type: { name: 'string', required: false },
+            type: { name: 'string' },
         },
     },
 };
@@ -22,7 +22,7 @@ const fullName = `${firstName} ${lastName}`;
 const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`;
 const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800" }, h("mds-text", null, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })));
 const CustomTemplate = args => h("mds-modal", Object.assign({}, args), h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
-const AriaTemplate = () => {
+const InteractiveTemplate = () => {
     // Click not working with reader
     const [opened, setOpened] = useState(false);
     window.addEventListener('mdsModalClose', () => { setOpened(false); });
@@ -33,4 +33,8 @@ Default.args = {
     position: 'right',
 };
 export const CustomWindow = CustomTemplate.bind({});
-export const ARIATest = AriaTemplate.bind({});
+export const Interactive = InteractiveTemplate.bind({});
+export const ARIATest = CustomTemplate.bind({});
+ARIATest.args = {
+    opened: true,
+};

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

@@ -1,6 +1,11 @@
 import miBaselineClose from "@icon/mi/baseline/close.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.es.json";
+import localeIt from "./meta/locale.it.json";
 /**
  * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot title - Add `text string`, `HTML elements` or `components` to this slot.
@@ -8,12 +13,25 @@ import { KeyboardManager } from "../../common/keyboard-manager";
 export class MdsNote {
     constructor() {
         this.km = new KeyboardManager();
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickClose = () => {
             this.deleteEvent.emit();
         };
+        this.language = undefined;
         this.deletable = false;
         this.variant = 'yellow';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    componentWillLoad() {
+        this.t.lang(this.host);
+    }
     componentDidLoad() {
         this.km.addElement(this.host);
         this.km.attachClickBehavior();
@@ -30,7 +48,7 @@ export class MdsNote {
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '0061316e8b45ddaa8bc270f2f99064554a577ee9' }, this.deletable && h("mds-button", { key: '4107ba7508cd5101766f2562530d8367b5340ee6', title: "Rimuovi", icon: miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), h("slot", { key: '3e252f0cdb45d29e4c4926294a7fbb743a909913', name: "title" }), h("slot", { key: '64ba06a7afaf6a839aba7240078f7f99f2cb17a2' }), h("div", { key: 'a326dcf3687ab4c47c8ec9efc98166128eaa44c0', class: "fold" })));
+        return (h(Host, { key: '8b7b1454764a5e61ce35963293bbf62e2f8aa272', role: "note" }, this.deletable && h("mds-button", { key: '5ac0423815feb88271c1ff2e3fc1c1d2efe7d48b', title: this.t.get('deleteLabel'), icon: miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), h("slot", { key: 'a4f0f3550782aef46870a4a46b502d84b0bc8b34', name: "title" }), h("slot", { key: 'd8e4ee7b3965f9797c2e2cfe82110fe13644d5ab' }), h("div", { key: '07f7653371018dd0b63c2ee6ecac9f363caae509', "aria-hidden": "true", class: "fold" })));
     }
     static get is() { return "mds-note"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +108,11 @@ export class MdsNote {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "deleteEvent",
@@ -108,5 +131,26 @@ export class MdsNote {
                 }
             }];
     }
+    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-notification/mds-notification.js

@@ -62,7 +62,8 @@ export class MdsNotification {
         }
     }
     render() {
-        return (h(Host, { key: 'c42ba41c2d9c58bbbbbbfd92957fd8c1a7798a41' }, h("mds-text", { key: 'a3d539060f7d7e5594c13dcaf1c0bbe6e0d56a30', typography: "caption", class: "dot" }, this.value ? this.clean(this.value) : '')));
+        var _a;
+        return (h(Host, { key: '4ac9b53e962be966d5c287047a6c60ff4ceb0aec', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, h("mds-text", { key: '0cce8fe4e389cf21846eb61bc926b304f9c1b0be', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value ? this.clean(this.value) : '')));
     }
     static get is() { return "mds-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,8 +51,8 @@ export class MdsPaginator {
         }, 10);
     }
     render() {
-        return (h(Host, { key: 'e293d1a9534a70b3026b9ed75af6ae954e359b7e' }, h("mds-paginator-item", { key: '9df1ca9d1552b81a45b57dd0a960b37351e78af8', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && h("mds-paginator-item", { key: 'ad0e1205bbdc54758d030f0262a1937b350656f8', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
-            h("div", { key: 'dfc301098cb5bfb9982076d621a0912c32c273fe', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))), this.pages > 1 && h("mds-paginator-item", { key: '7711e38886eba63e9266e4414318d74e6c29e43b', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), h("mds-paginator-item", { key: '15147fca53d73364ebac1b99ce90d7fcb4f86f8f', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
+        return (h(Host, { key: 'd953ca7204857c62d0240dcae6e06195a44bddda' }, h("mds-paginator-item", { key: '2a60bf16b677dc5e43215b38bf912aea9a87456e', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && h("mds-paginator-item", { key: '546989f1d6df76d9cdc57ac1e6ec9f8f838cb5fb', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
+            h("div", { key: '3f099d2c8373b0f225a746549e40ebb44fc83d38', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))), this.pages > 1 && h("mds-paginator-item", { key: '7dea80b2f11556b8a6da6f0a8cbbcc6806251e63', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), h("mds-paginator-item", { key: '4998205aced65057e50b94325666e8e96c78ce44', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
     }
     static get is() { return "mds-paginator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@
 
   --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
   --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
-  --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));
+  --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
   --mds-paginator-item-background: transparent;
   --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
   --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));
@@ -150,7 +150,7 @@
 
     --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
     --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
-    --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));
+    --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
     --mds-paginator-item-background: transparent;
     --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
     --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));
@@ -170,7 +170,7 @@
 
       --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
       --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
-      --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));
+      --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
       --mds-paginator-item-background: transparent;
       --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
       --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));

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

@@ -25,9 +25,9 @@ export class MdsPaginatorItem {
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: '8ec92da5acd06c04be839e666ba88a53c535046c', tabindex: "0" }, this.icon !== undefined
+        return (h(Host, { key: 'ac7aae9e5e126c5da025f5ddee4000bae44d69e1', tabindex: "0" }, this.icon !== undefined
             ? h("mds-icon", { class: "icon", name: this.icon })
-            : h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
+            : h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null)))));
     }
     static get is() { return "mds-paginator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,6 +27,10 @@ export class MdsPref {
             });
         };
         this.showReload = false;
+        this.language = undefined;
+    }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
     }
     componentWillRender() {
         this.t.lang(this.host);
@@ -39,7 +43,7 @@ export class MdsPref {
         this.host.querySelector('mds-pref-theme') && this.addEvent(this.host.querySelector('mds-pref-theme'));
     }
     render() {
-        return (h(Host, { key: 'da221d367d4298e9817bbac02701a83b86b63122' }, h("slot", { key: '2942064b6e10aa3800374aa6c33abc186a8df03a' }), this.showReload && h("div", { key: '79fa0c58854ef7ad0eee92caf9659977ddec999f', class: "reload-required" }, h("mds-text", { key: 'fe430dd90b0f6deab469b97c64c8276164213c6c', typography: "caption" }, this.t.get('reloadPageToSeeChanges')))));
+        return (h(Host, { key: 'ed9e2d6a5a70735b46fa37e47336a0b96b1da65d' }, h("slot", { key: '60d3e90abdbb050a6a60ee9d839467bd743560c3' }), this.showReload && h("div", { key: '95a1d0e9699b16a9dafba1dd51cd18a8efa9c360', class: "reload-required" }, h("mds-text", { key: '75a50e34a35e0eae92345a5babfa9187ec9bc190', typography: "caption" }, this.t.get('reloadPageToSeeChanges')))));
     }
     static get is() { return "mds-pref"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +59,29 @@ export class MdsPref {
     }
     static get states() {
         return {
-            "showReload": {}
+            "showReload": {},
+            "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 "host"; }

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

@@ -47,13 +47,15 @@ export class MdsPrefAnimation {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setAnimation((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -61,7 +63,7 @@ export class MdsPrefAnimation {
     }
     render() {
         var _a;
-        return (h(Host, { key: '497a68c86034b1a0e39772d947bc7af3843f3571' }, h("mds-text", { key: '732524e8e7eb7c743186beba93de84296fe36c57', class: "info", typography: "caption" }, h("b", { key: 'b6a2d803268fbda728dbdf08c0731b4a2b984b86' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'f40cedfc652dc37d8a13bedbe653070a9ec0cd5d' }, h("mds-tab-item", { key: 'cedb845d6f2b431e93734565cc8482f100553255', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '7699acbf11d73db6fb4d8f77c83246803ba9fc61', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'a2ff94ca323d08f25b82fb1b81ca360f4191af54', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (h(Host, { key: 'a51aee1481fe52a192a76dc1940732566a0ccb71' }, h("mds-text", { key: '0ce8e1d74e412d437aefb923bcfa49229e68289e', class: "info", typography: "caption" }, h("b", { key: '1fb6e300398aade36b2e3b0fb69fa7e3002a827e' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '39531570c525ea29f5e524e3c980350461c0e002' }, h("mds-tab-item", { key: 'e741e1b7e30b59366a747b6c1b8e2939d22a9d84', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '27b8c88f59f649a09d4bf10625db794e224801c2', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'f43c7a20d4fe443a460c99415130230409091976', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     static get is() { return "mds-pref-animation"; }
     static get encapsulation() { return "shadow"; }
@@ -102,6 +104,11 @@ export class MdsPrefAnimation {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "prefChangeEvent",
@@ -126,6 +133,27 @@ export class MdsPrefAnimation {
                 }
             }];
     }
+    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-pref-animation/meta/dictionary.js

@@ -1,6 +1,6 @@
 const animationDictionary = [
-    'enabled',
-    'disabled',
+    'reduce',
+    'no-preference',
     'system',
 ];
 export { animationDictionary, };

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

@@ -47,13 +47,15 @@ export class MdsPrefContrast {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setConsumption((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -61,7 +63,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8e2cd538f863c348dc751956431a06fb01e954cf' }, h("mds-text", { key: 'df14d1054084e81f88a9c8fde1051d8d85aa3c8f', class: "info", typography: "caption" }, h("b", { key: '041732c8c0f12dc348080e70adee7962f436d359' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '8d1445add7a821a5ffd8a5cbc5587f88c8fecd08' }, h("mds-tab-item", { key: '8372d0f16b6f171f5b89ad229bda6e07b80ee08f', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: 'f39312f1bf193cc4e8bb703d47517214f6c2aa17', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: 'd71a62a6a3910c6f8dc116dfc9fa9ac613cc8a85', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (h(Host, { key: '845689a3978e310110ea0431d8a1c7f85413c371' }, h("mds-text", { key: '279b08048064fcf560d36cd106d08f6a5e864090', class: "info", typography: "caption" }, h("b", { key: 'f9e414661aa53296d5f57e239638640132f22683' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '41e0b940f5f8583c1d2d489fa719b71d1e8d6bf2' }, h("mds-tab-item", { key: '1f7123ea9dd6432f74a9c7db591b9fb45462c32a', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: '12dffe43fc347b72cb8d211e60f7b08905229d20', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: 'ef9733014704464c182864fc6d9a58e263d1eb43', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
     }
     static get is() { return "mds-pref-consumption"; }
     static get encapsulation() { return "shadow"; }
@@ -102,6 +104,11 @@ export class MdsPrefContrast {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "prefChangeEvent",
@@ -126,6 +133,27 @@ export class MdsPrefContrast {
                 }
             }];
     }
+    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-pref-contrast/mds-pref-contrast.js

@@ -68,13 +68,15 @@ export class MdsPrefContrast {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setContrast((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue, oldValue) {
@@ -84,7 +86,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f108eda4017cc6dbd89059a74928a0d3712dc24b' }, h("mds-text", { key: '84a7b7df54d10998e3ce4588d1ffc3d7e2147433', class: "info", typography: "caption" }, h("b", { key: '67c93f5272c39749bfdf23116021aeb8d464d13e' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'fff6a461e6e111134734411cbe44d1728981280e' }, h("mds-tab-item", { key: '1a28ea6f5bb9eaa69ad022b82947d8acaa16dbbc', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '0a4f8a6fd898043fba97caebde14cc954a21dbb3', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'e12f104728c146daa01ee90a45be49ce2d52dd5e', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
+        return (h(Host, { key: 'cb36b19fcae35c2182d8c079856db3fc14b22083' }, h("mds-text", { key: '021e5ad28b3a745623ce26f9ec968a2059930e1f', class: "info", typography: "caption" }, h("b", { key: 'a3d0c6c5221fc9d0ff84bead98ee2a453bd7cc02' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'ddaf4c6818c399abde338f2fe52f240ff6236437' }, h("mds-tab-item", { key: '1a437816ff500de8ab2c1ba3de0b9c0f83a5c759', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '313efd1d02f763b4662d10c71394de6e06f0607e', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '7fe309b846c197155bd484e07a8d47b8d9b8a9ee', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
     }
     static get is() { return "mds-pref-contrast"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +127,11 @@ export class MdsPrefContrast {
             }
         };
     }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "prefChangeEvent",
@@ -149,6 +156,27 @@ export class MdsPrefContrast {
                 }
             }];
     }
+    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-pref-language/mds-pref-language.css

@@ -4,12 +4,30 @@ mds-pref-language {
 
   gap: 1rem;
 
-  display: grid
+  display: grid;
 }
 
 .mds-pref-language-dropdown {
 
   gap: 0.25rem;
 
-  padding: 1rem
+  padding: 1rem;
+}
+
+.item {
+
+  --mds-tab-item-color: rgb(var(--tone-neutral-05));
+
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
+.item--custom-language {
+  cursor: pointer;
+}
+
+.item--auto,
+.item--custom-language {
+
+  --mds-tab-item-color-selected: rgb(var(--tone-neutral-03));
 }