@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/cjs/mds-pref-consumption.cjs.entry.js

@@ -2,6 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var mggConsumptionLow = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M13.314 12.492c-.943-.837-4.99-3.526-8.385-5.563 2.037 3.395 4.726 7.442 5.563 8.384q.045.052.094.101a2 2 0 1 0 2.728-2.922"/>
@@ -65,7 +66,7 @@ var localeIt = {
 	label: label
 };
 
-const mdsPrefConsumptionCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--high{--mds-tab-item-selected-color:rgb(var(--status-error-06,239 108 105))}.item--medium{--mds-tab-item-selected-color:rgb(var(--status-warning-06,190 142 0))}.item--low{--mds-tab-item-selected-color:rgb(var(--status-success-06,0 171 97))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:host-context(:root.pref-contrast-more) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:host-context(:root.pref-contrast-more) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}}`;
+const mdsPrefConsumptionCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--high{--mds-tab-item-selected-color:rgb(var(--status-error-06,239 108 105))}.item--medium{--mds-tab-item-selected-color:rgb(var(--status-warning-06,190 142 0))}.item--low{--mds-tab-item-selected-color:rgb(var(--status-success-06,0 171 97))}:host([pref-contrast=more]) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-contrast=more]) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:host([pref-contrast=more]) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:host([pref-contrast=more]) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}}`;
 
 const MdsPrefContrast = class {
     constructor(hostRef) {
@@ -98,7 +99,7 @@ const MdsPrefContrast = class {
             this.prefChangeEvent.emit({ preference: 'consumption' });
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.consumption) {
                     if ({}.hasOwnProperty.call(this.consumption, key)) {
@@ -109,10 +110,25 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setConsumption(mode);
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -123,13 +139,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'a868cca8f5a2bf2bc9c9836e63f85fa3ff275851' }, index.h("mds-text", { key: '60c3ce183c6d1ef984ad4acd2a020257c905aae9', class: "info", typography: "caption" }, index.h("b", { key: '5e2f6d2360c6f3fb483fa1f2b93b3acd53854c35' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: 'a09fc79aad33d6a1e91a49e806a768bb72586462', fill: true, size: this.size }, index.h("mds-tab-item", { key: '33b0f441536fc9362f18ecd4704f431f256fbee6', selected: this.mode === 'low', onClick: () => {
-                this.setConsumption('low');
-            }, class: "item item--low", icon: mggConsumptionLow }), index.h("mds-tab-item", { key: '79884e15aa766b134beeb20d82286caac3d08ebf', selected: this.mode === 'medium', onClick: () => {
-                this.setConsumption('medium');
-            }, class: "item item--medium", icon: mggConsumptionMedium }), index.h("mds-tab-item", { key: '9c6604fe0bd3827d676fbf2bb4305a5e15317ab3', selected: this.mode === 'high', onClick: () => {
-                this.setConsumption('high');
-            }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (index.h(index.Host, { key: '8aacd0158d8dcd42a86c3f8d5a963b509a067d7c', "pref-contrast": this.prefContrast }, index.h("mds-text", { key: '0114ef44e5ec8ebfc5eb61e59bc01a8dccc5d443', class: "info", typography: "caption" }, index.h("b", { key: '9062cda609e301b70910c76f0529259aece20356' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '44c1462c501e7014db8ece5a0bdbb7a743fb8848', fill: true, size: this.size }, index.h("mds-tab-item", { key: '6ecc4b3963061b230abdba6dd6e1382bc941007e', selected: this.mode === 'low', onClick: this.handleModeClick('low'), class: "item item--low", icon: mggConsumptionLow }), index.h("mds-tab-item", { key: 'bd85e99d05f2c21f2e3c1910c0eacce5ab241dd5', selected: this.mode === 'medium', onClick: this.handleModeClick('medium'), class: "item item--medium", icon: mggConsumptionMedium }), index.h("mds-tab-item", { key: '4acf72c60c3b29c9fcc1793faf216a8309a4110d', selected: this.mode === 'high', onClick: this.handleModeClick('high'), class: "item item--high", icon: mggConsumptionHigh }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref-contrast.cjs.entry.js

@@ -3,6 +3,7 @@
 var index = require('./index-CNuKb6Lv.js');
 var settings = require('./settings-CeE526kn.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var miBaselineContrast = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2S2 6.48 2 12s4.48 10 10 10zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z"/></svg>`;
 
@@ -54,7 +55,7 @@ var localeIt = {
 	systemSettings: systemSettings
 };
 
-const mdsPrefContrastCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--default,.item--more,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsPrefContrastCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--default,.item--more,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsPrefContrast = class {
     constructor(hostRef) {
@@ -90,7 +91,7 @@ const MdsPrefContrast = class {
             },
         };
         this.rollbackContrast = () => {
-            if (!window) {
+            if (typeof window === 'undefined') {
                 return this.defaultMode;
             }
             for (const key in this.prefersDefaults) {
@@ -107,7 +108,7 @@ const MdsPrefContrast = class {
             this.rollbackContrast();
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.contrast) {
                     if ({}.hasOwnProperty.call(this.contrast, key)) {
@@ -118,10 +119,25 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setContrast(mode);
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -134,13 +150,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'b2b65db3b7a382669e8d71bbb97eff1ba8ded19d' }, index.h("mds-text", { key: '8a6345d6b3fe5f2bfed8f492edc8559c68841128', class: "info", typography: "caption" }, index.h("b", { key: 'ea6c8753913b860d5ace1696ead1bd422574fa6a' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '1ec637db0edc73c08a4e5a7ee27170383d972d7c', fill: true, size: this.size }, index.h("mds-tab-item", { key: 'ce53045c2487cae49bea7efe5ed262b04b5ed329', selected: this.mode === 'more', onClick: () => {
-                this.setContrast('more');
-            }, class: "item item--more", icon: miBaselineContrast }), index.h("mds-tab-item", { key: '3798cbdb8df68f9b9d46d91136cb4f1cf0926139', selected: this.mode === 'system', onClick: () => {
-                this.setContrast('system');
-            }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: 'c626f5db4b9d8a5e4fee01ff441de35f6fc3fb5b', selected: this.mode === 'no-preference', onClick: () => {
-                this.setContrast('no-preference');
-            }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
+        return (index.h(index.Host, { key: '0a93ee15ba2f2ebd9be25e94248e14cc28ca91d3', "pref-contrast": this.prefContrast }, index.h("mds-text", { key: 'f7d472739547a6322dd25582f68b76f6161a1342', class: "info", typography: "caption" }, index.h("b", { key: '8daab80636ad73f434613628c0a7dae43cfdf22c' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '30ab0bc43e2859dbdd4b8a2098d351870e4d7226', fill: true, size: this.size }, index.h("mds-tab-item", { key: '06ea791e95ecc5719e46397066cf9d21ed5d7082', selected: this.mode === 'more', onClick: this.handleModeClick('more'), class: "item item--more", icon: miBaselineContrast }), index.h("mds-tab-item", { key: 'ef8b0906e9a5efc3facf70cd894af8f59991c32d', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: '4f1029e6f821f6e5517e1720bb171aeef19896dc', selected: this.mode === 'no-preference', onClick: this.handleModeClick('no-preference'), class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref-language-item.cjs.entry.js

@@ -222,7 +222,7 @@ var localeEn = {
 	noCode: noCode
 };
 
-const mdsPrefLanguageItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:block}`;
+const mdsPrefLanguageItemCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:block}`;
 
 const MdsPrefLanguageItem = class {
     constructor(hostRef) {
@@ -240,6 +240,9 @@ const MdsPrefLanguageItem = class {
             this.selectLanguageEvent.emit({ language: this.code });
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -250,7 +253,7 @@ const MdsPrefLanguageItem = class {
         this.t.lang(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '518c33d30c27e54512f2490c78da1ad1f97328eb', onClick: this.handleClick }, this.code ? (index.h("mds-button", { icon: this.selected ? checkCircle.miBaselineCheckCircle : circle.miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (index.h("mds-button", { icon: checkCircle.miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
+        return (index.h(index.Host, { key: '0f594deea977bb5473b0fe656bd5e3d69fdb4da1', onClick: this.handleClick }, this.code !== '' ? (index.h("mds-button", { icon: this.selected ? checkCircle.miBaselineCheckCircle : circle.miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (index.h("mds-button", { icon: checkCircle.miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-pref-language.cjs.entry.js

@@ -857,7 +857,7 @@ var localeIt = {
 	defaultLanguage: defaultLanguage
 };
 
-const mdsPrefLanguageCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-language-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-language{cursor:pointer}.item--auto,.item--custom-language{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
+const mdsPrefLanguageCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-language-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-language{cursor:pointer}.item--auto,.item--custom-language{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
 
 const MdsPrefLanguage = class {
     constructor(hostRef) {
@@ -928,12 +928,15 @@ const MdsPrefLanguage = class {
                     : this.sanitizeLanguage(set);
             this.prefChangeEvent.emit({ preference: 'language' });
             localStorage.setItem(this.localStorageAlias, this.set);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 element === null || element === void 0 ? void 0 : element.setAttribute('lang', this.set);
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -950,7 +953,7 @@ const MdsPrefLanguage = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'dc71143924209440f083fcec65bcb7bd504dd25a' }, index.h("div", { key: '292239b82496f972e66d40c3545f744bbb3b3c7f', class: "menu" }, index.h("mds-text", { key: '40a055e9e7b833b54be9d0a94bf3a3dcdfc0c8b8', class: "info", typography: "caption" }, index.h("b", { key: 'a18868d48b74d314e96b11a090910094dadc3f32' }, this.t.get('label'))), index.h("mds-tab", { key: '565d66dfa81b0991ff2c456c20f0880b5608a5b3', fill: true, size: this.size }, index.h("mds-tab-item", { key: '5b9bccdca9afc5dacd2ded61f34001b7dffe39da', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? keyboardArrowUp.miBaselineKeyboardArrowUp : keyboardArrowDown.miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), index.h("mds-dropdown", { key: '82f77f40b5b589cf3ee6097ecdd27b2f55f50779', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown, autoPlacement: true }, index.h("slot", { key: 'f2ad1acf8456a7d8a284a802342138424f26628a' })), this.set !== this.defaultLanguage && (index.h("mds-text", { key: 'fc2901f08f355fac291535936079e3d54ed6bcc9', typography: "caption" }, this.t.get('defaultLanguage')))));
+        return (index.h(index.Host, { key: '478109efd35a0a896d1783008a16e9275733936d' }, index.h("div", { key: '355b3d289bf281ed132e3bc900a434b4475c6bea', class: "menu" }, index.h("mds-text", { key: 'cd8902f3b078732a05c5763479ec947d412bce94', class: "info", typography: "caption" }, index.h("b", { key: 'e6298e5c502a2aa177e4669cecab22c8056e87eb' }, this.t.get('label'))), index.h("mds-tab", { key: 'f8456b33ec4d07a474994da5d08a333afd5a641f', fill: true, size: this.size }, index.h("mds-tab-item", { key: 'fcc54b949621389e4e175dcfe297a0d137b28788', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? keyboardArrowUp.miBaselineKeyboardArrowUp : keyboardArrowDown.miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), index.h("mds-dropdown", { key: '5746fdd9a751a9c71c011aaff73bb3aff6b648f3', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown }, index.h("slot", { key: 'f2a7cc484c3295aa6abd463fb365f8e4a099d130' })), this.set !== this.defaultLanguage && (index.h("mds-text", { key: '41ebb2d247ce5054ceb807d75539301efb33596c', typography: "caption" }, this.t.get('defaultLanguage')))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-pref-theme-variant-item.cjs.entry.js

@@ -15,7 +15,7 @@ var localeEn = {
 	noCode: noCode
 };
 
-const mdsPrefThemeVariantItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}@layer reset,vendor,theme,base,components,utilities;:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light) inset;box-shadow:var(--shadow-outline-light) inset;content:"";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}`;
+const mdsPrefThemeVariantItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light) inset;box-shadow:var(--shadow-outline-light) inset;content:"";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}`;
 
 const MdsPrefThemeVariantItem = class {
     constructor(hostRef) {
@@ -41,17 +41,20 @@ const MdsPrefThemeVariantItem = class {
             this.selectVariantEvent.emit({ name: this.name, scheme: this.scheme });
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
     componentWillRender() {
         this.t.lang(this.element);
-        if (!this.label) {
+        if (this.label === undefined || this.label === '') {
             this.label = this.name.charAt(0).toUpperCase() + this.name.slice(1).replace(/-/g, ' ');
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7226e8612de14cb55f08e59867a85bac2a818c20', onClick: this.handleClick }, index.h("mds-button", { key: '9ba3cfd0a254eaeff4e3ccb6c6b1ceab5f245e07', icon: this.selected ? checkCircle.miBaselineCheckCircle : circle.miOutlineCircle, variant: "dark", tone: "text" }, index.h("div", { key: '98e24fcf47e692495a0f5c05d5ef9d7924f08949', class: "label" }, index.h("div", { key: '25d6de60ebe19d3e7f21a425e6fd8069927ee46f', class: "theme-preview" }, index.h("div", { key: 'd8820f6717263184e7af45e8f9f999a1e013481c', class: "theme-color theme-color--variant-primary" }), index.h("div", { key: 'd058474d0c8aa30e37647f6a0d07dd2b66bf5bee', class: "theme-color theme-color--status-success" }), index.h("div", { key: '50ef0f48869b26b846b668963f1ce95ccd2517e4', class: "theme-color theme-color--status-warning" }), index.h("div", { key: 'f6ca3f58fb1e4df027f79fed26c46e62379e7733', class: "theme-color theme-color--status-error" })), this.label))));
+        return (index.h(index.Host, { key: '42ee77cb67158f239524a93cbb4c54a8edf2da9e', onClick: this.handleClick }, index.h("mds-button", { key: 'ded6bf478eb7919dcc82342203459ec0259b6e49', icon: this.selected ? checkCircle.miBaselineCheckCircle : circle.miOutlineCircle, variant: "dark", tone: "text" }, index.h("div", { key: '7582a7a064ebb938b3d7a70c185d03cb16099416', class: "label" }, index.h("div", { key: 'fe6351b1df4a62583bd2ea696204f3def3971002', class: "theme-preview" }, index.h("div", { key: '059de0fdc833d65d6fc6b7720cfc9977a6289dfc', class: "theme-color theme-color--variant-primary" }), index.h("div", { key: '780567139731c2d362a62bb54abf087022c65e0c', class: "theme-color theme-color--status-success" }), index.h("div", { key: '392532402a1fd99529ebe324c640a28f35b1bb05', class: "theme-color theme-color--status-warning" }), index.h("div", { key: '59b928ce09c27986d8e08e40e03f43a17efcd03c', class: "theme-color theme-color--status-error" })), this.label))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-pref-theme-variant.cjs.entry.js

@@ -25,7 +25,7 @@ var localeIt = {
 	label: label
 };
 
-const mdsPrefThemeVariantCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
+const mdsPrefThemeVariantCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
 
 const MdsPrefThemeVariant = class {
     constructor(hostRef) {
@@ -102,7 +102,7 @@ const MdsPrefThemeVariant = class {
             this.prefChangeEvent.emit({ preference: 'theme-variant' });
             localStorage.setItem(this.localStorageAliasThemeName, this.name);
             localStorage.setItem(this.localStorageAliasThemeScheme, this.scheme);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 // cleanup previeous selection
                 for (const key in this.schemeSet) {
@@ -110,7 +110,7 @@ const MdsPrefThemeVariant = class {
                         element === null || element === void 0 ? void 0 : element.classList.remove(this.schemeSet[key]);
                     }
                 }
-                if (this.previousName) {
+                if (this.previousName !== null && this.previousName !== '') {
                     element === null || element === void 0 ? void 0 : element.classList.remove(this.clasNameThemeNamePrefix + this.previousName);
                 }
                 // set new selection
@@ -123,6 +123,9 @@ const MdsPrefThemeVariant = class {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -137,7 +140,7 @@ const MdsPrefThemeVariant = class {
         this.t.lang(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '15e431592fa7b91f8b964a3848de67406baf072f' }, index.h("div", { key: 'a0a16b7172f212c8664ee3cf1fa298884922b62f', class: "menu" }, index.h("mds-text", { key: 'b76c54c74c66191278d1dfe9c3eb9bc7e6d55fad', class: "info", typography: "caption" }, index.h("b", { key: 'ec9f3e8fc0887393539ba47220d20c9db03a3449' }, this.t.get('label'))), index.h("mds-tab", { key: '7df63e45e1d9265ffc3617cfc49a1e167996d66b', fill: true, size: this.size }, index.h("mds-tab-item", { key: '2b80350e8481b2e0b7d82f3b4a4f013b6ff949d0', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? keyboardArrowUp.miBaselineKeyboardArrowUp : keyboardArrowDown.miBaselineKeyboardArrowDown }, this.name))), index.h("mds-dropdown", { key: '05732e03bb52fe1477f2933e127cfc699f92f941', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect, autoPlacement: true }, index.h("slot", { key: '1b984764ffcb3467ff1050b3eef5c1c83edff918' })), this.name !== this.defaultTheme && (index.h("mds-text", { key: '7871a4799701c0fda9f6c35b913cf7a00e9d7510', typography: "caption" }, this.t.get('defaultTheme')))));
+        return (index.h(index.Host, { key: '97f9130b904fd7998d3da4d20b7a46a4b0530065' }, index.h("div", { key: '7a8d483f98133601ecc97edc4cee8f31e8b7b864', class: "menu" }, index.h("mds-text", { key: '1f3782fef56a8ac6ace60b455693cd88e9b1e649', class: "info", typography: "caption" }, index.h("b", { key: '55dd9af6749679f2378bafa43bd51af2bbfb2634' }, this.t.get('label'))), index.h("mds-tab", { key: '82a4b30848480d9197d5d2ba3fe5b0cc05663819', fill: true, size: this.size }, index.h("mds-tab-item", { key: 'df76e914b9a1fdb79f2297100d1c3fe8b26c9f49', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? keyboardArrowUp.miBaselineKeyboardArrowUp : keyboardArrowDown.miBaselineKeyboardArrowDown }, this.name))), index.h("mds-dropdown", { key: '301fd7431fe6eaf5c33ae4cd2d1d9fc530c41827', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect }, index.h("slot", { key: 'ec4fe15341f0b8c52a63421f8dfd90725a1c875f' })), this.name !== this.defaultTheme && (index.h("mds-text", { key: 'b6acf063e1b0806b0baedfe6f166dde10c85e8ad', typography: "caption" }, this.t.get('defaultTheme')))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-pref-theme.cjs.entry.js

@@ -5,6 +5,7 @@ var unit = require('./unit-Cm341q1R.js');
 var settings = require('./settings-CeE526kn.js');
 var locale = require('./locale-oGW3SvGJ.js');
 var browser = require('./browser-C1BdXKu5.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var miBaselineLightMode = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>`;
 
@@ -56,7 +57,7 @@ var localeIt = {
 	systemSettings: systemSettings
 };
 
-const mdsPrefThemeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-overlay-fadeout-duration:.2s;--mds-pref-theme-overlay-show-duration:.3s;--mds-pref-theme-overlay-z-index:var(--magma-theme-overlay-z-index,6000)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-pref-theme-overlay-fadeout-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-pref-theme-overlay-show-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-pref-theme-overlay-fadeout-duration:.2s;--mds-pref-theme-overlay-show-duration:.3s;--mds-pref-theme-overlay-z-index:var(--magma-theme-overlay-z-index,6000);display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}.item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-06,188 143 6))}.item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-06,13 158 224))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-03,191 232 251))}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-03,251 224 142))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-03,191 232 251))}}`;
+const mdsPrefThemeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-pref-theme-overlay-fadeout-duration:.2s;--mds-pref-theme-overlay-show-duration:.3s;--mds-pref-theme-overlay-z-index:var(--magma-theme-overlay-z-index,6000)}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-pref-theme-overlay-fadeout-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-pref-theme-overlay-show-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-pref-theme-overlay-fadeout-duration:.2s;--mds-pref-theme-overlay-show-duration:.3s;--mds-pref-theme-overlay-z-index:var(--magma-theme-overlay-z-index,6000);display:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}.item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-06,188 143 6))}.item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-06,13 158 224))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-03,251 224 142))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-03,191 232 251))}@media (prefers-color-scheme:dark){:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-contrast]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-contrast]))) .item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-contrast]))) .item--light{--mds-tab-item-selected-color:rgb(var(--label-yellow-03,251 224 142))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-contrast]))) .item--dark{--mds-tab-item-selected-color:rgb(var(--label-sky-03,191 232 251))}}`;
 
 const MdsPrefTheme = class {
     constructor(hostRef) {
@@ -113,7 +114,7 @@ const MdsPrefTheme = class {
             this.prefChangeEvent.emit({ preference: 'theme-mode' });
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.theme) {
                     if ({}.hasOwnProperty.call(this.theme, key)) {
@@ -128,7 +129,7 @@ const MdsPrefTheme = class {
             return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         };
         this.getColorScheme = (mode) => {
-            if (mode) {
+            if (mode !== undefined) {
                 if (mode === 'system') {
                     return this.isDarkMode() ? 'dark' : 'light';
                 }
@@ -140,7 +141,7 @@ const MdsPrefTheme = class {
             return this.mode;
         };
         this.instanceOverlay = () => {
-            if (!this.overlayEl) {
+            if (this.overlayEl == null) {
                 this.overlayEl = document.createElement('div');
                 this.overlayEl.className = this.overlayId;
                 this.overlayEl.style.inset = '0';
@@ -206,7 +207,16 @@ const MdsPrefTheme = class {
                     break;
             }
         };
+        this.handleModeClick = (mode) => () => {
+            if (this.overlayShow) {
+                return;
+            }
+            this.changeTheme(mode);
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -230,7 +240,7 @@ const MdsPrefTheme = class {
         this.setTheme(newValue);
     }
     detachOverlayTransition() {
-        if (!this.overlayEl) {
+        if (this.overlayEl == null) {
             return;
         }
         this.overlayEl.style.backgroundColor = this.overlayBackgroundHidden;
@@ -239,26 +249,28 @@ const MdsPrefTheme = class {
             this.overlayEl.remove();
         }, unit.cssDurationToMilliseconds(this.cssOverlayFadeoutDuration));
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'c78474ccae6afb47766f571d86fe235c7d61d1ba' }, index.h("mds-text", { key: '3535c07209e5465959044593d89cce53ab128180', class: "info", typography: "caption" }, index.h("b", { key: '68be38f8895654dd40214f66fb7241012d392199' }, this.t.get('label')), ' ', this.disabled
+        return (index.h(index.Host, { key: '7280b0d7c2ad7329e4170fc9a039575086debf30', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("mds-text", { key: 'db45fd3a2e56c6f4cb6e9a8c2f7305aae9ea891e', class: "info", typography: "caption" }, index.h("b", { key: '2b94106cf9f48d0dd17010d3202d4a115cf98915' }, this.t.get('label')), ' ', this.disabled
             ? this.t.get(this.theme[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label, { forced: true })
-            : this.t.get(this.theme[(_b = this.mode) !== null && _b !== void 0 ? _b : this.defaultMode].label, { forced: false })), index.h("mds-tab", { key: '22fe4bd6c21908dc356a322226cfe7518952f68d', fill: true, size: this.size }, index.h("mds-tab-item", { key: 'c40a7c19794324a2156bd0cfa6a085e4ed98194e', disabled: this.disabled, selected: this.mode === 'light', onClick: () => {
-                if (this.overlayShow) {
-                    return;
-                }
-                this.changeTheme('light');
-            }, class: "item item--light", icon: miBaselineLightMode }), index.h("mds-tab-item", { key: '4986b3c390f38ffbe292d36180ab8b6799eda730', disabled: this.disabled, selected: this.mode === 'system', onClick: () => {
-                if (this.overlayShow) {
-                    return;
-                }
-                this.changeTheme('system');
-            }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: '5e211984d3891daa894fe391277a1574d98ea1a1', disabled: this.disabled, selected: this.mode === 'dark', onClick: () => {
-                if (this.overlayShow) {
-                    return;
-                }
-                this.changeTheme('dark');
-            }, class: "item item--dark", icon: this.mode === 'dark' ? miBaselineDarkMode : miOutlineDarkMode }))));
+            : this.t.get(this.theme[(_b = this.mode) !== null && _b !== void 0 ? _b : this.defaultMode].label, { forced: false })), index.h("mds-tab", { key: 'cd9873a00095c71a5ff81f38dae8d685ad37a6f0', fill: true, size: this.size }, index.h("mds-tab-item", { key: 'a85d3c5f6b9be4adb37638e45a5d75536e3dd442', disabled: this.disabled, selected: this.mode === 'light', onClick: this.handleModeClick('light'), class: "item item--light", icon: miBaselineLightMode }), index.h("mds-tab-item", { key: '713173f22fceff76de9f6751bd0a753f68aac8c7', disabled: this.disabled, selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: '766dbe686e2fd8609ec3a1a6716d4c428bc1391e', disabled: this.disabled, selected: this.mode === 'dark', onClick: this.handleModeClick('dark'), class: "item item--dark", icon: this.mode === 'dark' ? miBaselineDarkMode : miOutlineDarkMode }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref.cjs.entry.js

@@ -23,7 +23,7 @@ var localeIt = {
 	reloadPageToSeeChanges: reloadPageToSeeChanges
 };
 
-const mdsPrefCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*400)}:host(:empty),:host([controller]){display:none}.reload-required{display:grid;gap:calc(var(--spacing,.0025rem)*200)}`;
+const mdsPrefCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*400)}:host(:empty),:host([controller]){display:none}.reload-required{display:grid;gap:calc(var(--spacing,.0025rem)*200)}`;
 
 const MdsPref = class {
     constructor(hostRef) {
@@ -69,6 +69,9 @@ const MdsPref = class {
             element.removeEventListener('mdsPrefChange', this.handlePrefChangeEvent.bind(this));
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -89,7 +92,7 @@ const MdsPref = class {
     }
     componentDidLoad() {
         var _a;
-        if (window) {
+        if (typeof window !== 'undefined') {
             (_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('data-magma-pref', '');
         }
         if (this.controller) {
@@ -98,13 +101,13 @@ const MdsPref = class {
     }
     disconnectedCallback() {
         var _a;
-        if (window) {
+        if (typeof window !== 'undefined') {
             (_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-magma-pref');
         }
         this.removePerfEvents();
     }
     render() {
-        return (index.h(index.Host, { key: '8c5ead4e84eabbf2382ed64eaec6a6b9efb5ffee' }, index.h("slot", { key: '136f362db37befead20e9f04a9e3a9e8c0f9a94c' }), this.showReload && (index.h("div", { key: '96959ca6338ac7d11259e97f74712378941aab38', class: "reload-required" }, index.h("mds-text", { key: '3d7c32617dc21f76c22e940a7cbc791515863b6a', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
+        return (index.h(index.Host, { key: 'fb9caf5c41dde41d29c82cdb48f3d4472dc27719' }, index.h("slot", { key: 'ce22594b814f4d3e6f26df1aef9b291bcd3f5e21' }), this.showReload && (index.h("div", { key: 'e155da0815e661dfcd2acbc9b0c96aaa87ca56cb', class: "reload-required" }, index.h("mds-text", { key: '4ed6190393fc4ff247285e4085d52ace60027c75', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-price-table-features-cell.cjs.entry.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 var checkCircle = require('./check-circle-Dot_k9WN.js');
 var horizontalRule = require('./horizontal-rule-BnDv-kBK.js');
 
-const mdsPriceTableFeaturesCellCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-price-table-features-cell-padding:var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-08,107 107 107));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-price-table-features-cell-padding:var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-08,107 107 107));--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-bottom:1px solid var(--mds-price-table-features-cell-border-color,rgb(var(--tone-neutral-08,107 107 107)));display:table-cell;padding:var(--mds-price-table-features-cell-padding,var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300)));transition-duration:.2s;transition-property:border-color,transform;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));vertical-align:top}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.icon{height:calc(var(--spacing,.0025rem)*600);width:calc(var(--spacing,.0025rem)*600);--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));display:flex;fill:var(--icon-fill-color,currentColor);transition-duration:.2s;transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.icon--supported{--icon-fill-color:var(--mds-price-table-features-cell-icon-supported-color,rgb(var(--label-green-06,30 171 82)))}.icon--unsupported{--icon-fill-color:var(--mds-price-table-features-cell-icon-unsupported-color,rgb(var(--tone-neutral-06,158 158 158)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .icon{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-03,173 241 198));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-04,218 218 218))}:host-context(:root.pref-contrast-more){--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-01,231 251 239));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-04,218 218 218))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-03,173 241 198));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-04,218 218 218))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-01,231 251 239));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-04,218 218 218))}}`;
+const mdsPriceTableFeaturesCellCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-price-table-features-cell-padding:var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-08,107 107 107));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-price-table-features-cell-padding:var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-06,30 171 82));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-06,158 158 158));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-price-table-features-cell-transition-duration:var(--duration-200,.2s);--private-price-table-features-cell-transition-duration:var(--mds-price-table-features-cell-transition-duration);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-bottom:1px solid var(--mds-price-table-features-cell-border-color,rgb(var(--tone-neutral-08,107 107 107)));display:table-cell;padding:var(--mds-price-table-features-cell-padding,var(--mds-price-table-features-padding,calc(var(--spacing,.0025rem)*300)));-webkit-transition-duration:var(--private-price-table-features-cell-transition-duration);transition-duration:var(--private-price-table-features-cell-transition-duration);transition-property:border-color,transform;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));vertical-align:top}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.icon{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));display:flex;fill:var(--icon-fill-color,currentColor);height:calc(var(--spacing,.0025rem)*600);-webkit-transition-duration:var(--private-price-table-features-cell-transition-duration);transition-duration:var(--private-price-table-features-cell-transition-duration);transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:calc(var(--spacing,.0025rem)*600)}.icon--supported{--icon-fill-color:var(--mds-price-table-features-cell-icon-supported-color,rgb(var(--label-green-06,30 171 82)))}.icon--unsupported{--icon-fill-color:var(--mds-price-table-features-cell-icon-unsupported-color,rgb(var(--tone-neutral-06,158 158 158)))}:host([pref-animation=reduce]){--private-price-table-features-cell-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-03,173 241 198));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-04,218 218 218))}:host([pref-contrast=more]){--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-01,231 251 239));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-04,218 218 218))}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-price-table-features-cell-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-03,173 241 198));--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-04,218 218 218))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-price-table-features-cell-icon-supported-color-hover:rgb(var(--label-green-01,231 251 239));--mds-price-table-features-cell-icon-supported-color:rgb(var(--label-green-02,211 247 224));--mds-price-table-features-cell-icon-unsupported-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-icon-unsupported-color:rgb(var(--tone-neutral-02,244 244 244));--mds-price-table-features-cell-border-color:rgb(var(--tone-neutral-04,218 218 218))}}`;
 
 const MdsPriceTableFeaturesCell = class {
     constructor(hostRef) {
@@ -14,8 +15,29 @@ const MdsPriceTableFeaturesCell = class {
          */
         this.type = 'text';
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     render() {
-        return (index.h(index.Host, { key: '54e7d4ba98f366ca072ce0e4faf02a093db43369' }, this.type === 'supported' && (index.h("i", { key: '3131fd8fc3fae4b821fd643e84477ef78700d2e2', class: "icon icon--supported", innerHTML: checkCircle.miBaselineCheckCircle, part: "icon" })), this.type === 'unsupported' && (index.h("i", { key: '8080a37fd7dc031bc3e162480a76d88b5b1a32f6', class: "icon icon--unsupported", innerHTML: horizontalRule.miBaselineHorizontalRule, part: "icon" })), this.type === 'text' && (index.h("mds-text", { key: '47ccf913caed4f3a3b8070e8c5d51699fa66b96b', part: "text", typography: "detail" }, index.h("slot", { key: '125c00d4287ce168a20d1cde74ad06bd61d19112' }))), this.type === 'custom' && index.h("slot", { key: '875b44b69e06f7d8a464b4d598b5a00680d78a3a' }), this.type === 'label' && index.h("slot", { key: 'f584c21d6d8af59d3a8a0be9b4f008478eefd279' })));
+        return (index.h(index.Host, { key: '0685a3ee7e1b48602dd2fe5de72ab1bfa3911d4e', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.type === 'supported' && (index.h("i", { key: 'fa867367c20a71b03f45b35b45a3e63a9439f55d', class: "icon icon--supported", innerHTML: checkCircle.miBaselineCheckCircle, part: "icon" })), this.type === 'unsupported' && (index.h("i", { key: '9c02e9b23f20a58074b4f2fbadadb100acdc6ae7', class: "icon icon--unsupported", innerHTML: horizontalRule.miBaselineHorizontalRule, part: "icon" })), this.type === 'text' && (index.h("mds-text", { key: '431f38647428bb78f23a5b4c9b9f1d74a7e0843a', part: "text", typography: "detail" }, index.h("slot", { key: 'b4e1c215cd40869a188d6ffda706305296130ef1' }))), this.type === 'custom' && index.h("slot", { key: '7d36a04177fa01a991a7ea41e5ce7edf8679335d' }), this.type === 'label' && index.h("slot", { key: '05027dbdb0fa2e7a59ca6942e8e38f89375e5819' })));
     }
 };
 MdsPriceTableFeaturesCell.style = mdsPriceTableFeaturesCellCss();