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

package/dist/collection/components/mds-policy-ai/mds-policy-ai.js

@@ -29,6 +29,9 @@ export class MdsPolicyAi {
          * Sets the pointing URL of the component
          */
         this.href = 'https://www.maggiolieditore.it/il-regolamento-europeo-sull-intelligenza-artificiale.html';
+        this.handleIconClick = () => {
+            window.open(this.href, '_blank');
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -42,7 +45,7 @@ export class MdsPolicyAi {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(Host, { key: '180b7243e44a357e7db8b7229f5e1a611ad348ef' }, this.variant === 'icon' && (h("mds-help", { key: '0e0a58df39c44b69fe57d0334ff056e334d6a72c', icon: mggAiChatbot, class: "icon-help", onClick: () => window.open(this.href, '_blank'), part: "icon" }, h("div", { key: 'd4be853abef5c66e8f3324164bbdb669e37e5c03', class: "icon-tip-content" }, h("mds-text", { key: 'af0f50fd3b06d0c0ab74c5c12ff8e5961806e700', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'bad93f3743723f58ee2435a716e92cb9ada5f5bb', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: '037832247d7ca9649c9406816e8d7ca7922dfa2d', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '2e14a6f7023c18f4e010e23bdd57a6fa4723628c', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '3b72d13f2102d298886e645f3b70194d5c8bf734', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '24b27e379de7649dfbdf077e1caefa0acf3a5869', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: 'e47c83b97052c9bfe242db9a483e45297458c083', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: '06fb1b85d8fd6427330168b65b9b37220dd4db85', class: "mini-card", part: "card" }, h("mds-icon", { key: '71135cc52957dd7c5d57da17ea318fcfda0e47e0', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: 'f6f56a483d41281610f2f0e4a985608682064b2f', class: "mini-card-content" }, h("mds-text", { key: '657ad59925488f4d9607b46adaadf42a9518feac', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: '497017289206c7c759af010ebcd3577ad3a651fe', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '6f3b46fa197f97225b32b4e5c7a093a1385fa37a', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '62969daf704920f6009acb5982f7b83c5030ac03', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: '70ce614c9095b73996ebfe1340ff84e03db63355', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '89380acb2e798700055248211aafa26476868cc8', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: 'db2abdc66d0571891bbfca5b4cf4d5e961ee30fb', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'd5ce410ac6dd095f04547760e6d868cd1c624ca7', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '98268919c96e34a931c55bf2cf39dde5227dabfa', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
+        return (h(Host, { key: 'd0343aba93633c4172c78cba1fe1ba78066d0703' }, this.variant === 'icon' && (h("mds-help", { key: 'ad4a20df4a631c216ad09fd6bc7ebfcf23ec17ae', icon: mggAiChatbot, class: "icon-help", onClick: this.handleIconClick, part: "icon" }, h("div", { key: '5c173707b353453e1f88071caa83ae7bef95ef63', class: "icon-tip-content" }, h("mds-text", { key: '02b915e883391648c0d7701869278c2e088c2349', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'ee07386a254fa7ed397374e116f4b2cbb38e9bd8', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: 'c0f788345c6ea9e09f34bbdf8432bdf6119cb6f6', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '7014d5bb99185352ddfa1767230c40487a27fba7', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '46aee6235eb317f64d984c5d7ffeec6e9ef23b5d', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '940a93b53ee5c78634eaf39ebdc4843de874c339', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: 'e94a60aef4a8d754882070300ebe40ec52819354', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: '8f38c98a3f90a2daee5c0fe56dc08be4a5805724', class: "mini-card", part: "card" }, h("mds-icon", { key: 'e95bf26e2073d4ed6bcbe8458fb59d29242d803b', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: '27f3d7807627409bcc7c12a2ff0b13a9aedb4a1a', class: "mini-card-content" }, h("mds-text", { key: '974df045532462567e64d46dd308281790c3a0a0', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: '79b09fbc1f0dc53de3094e5c2fc3618d3ae79afc', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '06b0094335d78affa64fa2c6f9eab0ed657c8183', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '5c24c8b36cadec1ec9f0c9a671c268c153e5b609', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: 'c787b1aa6437af944eb39d50a07a3f101f763b00', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '3cd7e4076bdbf770070c6d29e57a441ccc9921c3', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: '40388d6d8e3d02c8db0c94c585d2dffa879ae83b', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'e25299573ed2c28821773871091041604059d005', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: 'cd5f7376104f6ec21f1a1fd8293004f49016bb56', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
     }
     static get is() { return "mds-policy-ai"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,7 +104,7 @@ export class MdsPref {
         this.removePerfEvents();
     }
     render() {
-        return (h(Host, { key: '9b6e06abc8d530f2e148f4823bb70ace4cfd786b' }, h("slot", { key: '5be136360ee11b12cec8664a1e6c228c924a4123' }), this.showReload && (h("div", { key: 'a10b658b7a064be2b89101422e273402235c92c8', class: "reload-required" }, h("mds-text", { key: 'd66a8213bfc744d590817f72e4ae63e8b3684d40', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
+        return (h(Host, { key: 'fb9caf5c41dde41d29c82cdb48f3d4472dc27719' }, h("slot", { key: 'ce22594b814f4d3e6f26df1aef9b291bcd3f5e21' }), this.showReload && (h("div", { key: 'e155da0815e661dfcd2acbc9b0c96aaa87ca56cb', class: "reload-required" }, h("mds-text", { key: '4ed6190393fc4ff247285e4085d52ace60027c75', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
     }
     static get is() { return "mds-pref"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,13 +36,18 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--tone-neutral-03, 233 233 233));
 }
 
-:host-context(:root.pref-contrast-more) .item {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) .item {
   --mds-tab-item-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

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

@@ -3,6 +3,7 @@ import miOutlineCircle from "@icon/mi/outline/circle.svg";
 import miBaselineAnimation from "@icon/mi/baseline/animation.svg";
 import miBaselineSettings from "@icon/mi/baseline/settings.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -47,6 +48,9 @@ export class MdsPrefAnimation {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setAnimation(mode);
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -54,6 +58,15 @@ export class MdsPrefAnimation {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = 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);
@@ -64,13 +77,7 @@ export class MdsPrefAnimation {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e1be2ae76dff92f92d5e69ab734bed63ad01424b' }, h("mds-text", { key: '417cb750be71fae999a965bfc145369261612756', class: "info", typography: "caption" }, h("b", { key: '477428e9968b1758f407229d4efe007ec7262e14' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '3757e5d83c8dbbfa00684e4b6401410c748610e5', fill: true, size: this.size }, h("mds-tab-item", { key: '8b5f05aea83cee047f799b620c5523b2afdd862a', selected: this.mode === 'reduce', onClick: () => {
-                this.setAnimation('reduce');
-            }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '3b782904bc5c2478aab5b448080b49008b0ad300', selected: this.mode === 'system', onClick: () => {
-                this.setAnimation('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'bb84745ea8b40acc0de41d904407a773fedff98a', selected: this.mode === 'no-preference', onClick: () => {
-                this.setAnimation('no-preference');
-            }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (h(Host, { key: '8c4d271a4f27c766d76b37aa3f0755bba0a19d7c', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'd06ce9519d9e4608219f4d10c9818af4b3430812', class: "info", typography: "caption" }, h("b", { key: '95ec18d11359fe4358a8a8d1b63ca695185a8c7e' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '579e25e9182c02c7d7deceaf46247ea254b676e3', fill: true, size: this.size }, h("mds-tab-item", { key: '076a7a88d63c9752fb1c5fce30a816abe52917d4', selected: this.mode === 'reduce', onClick: this.handleModeClick('reduce'), class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '8b7fe984365c966837e6d534251bac8be15e669e', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'd7282679add90930f487e1ef3f35d804d286763f', selected: this.mode === 'no-preference', onClick: this.handleModeClick('no-preference'), class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     static get is() { return "mds-pref-animation"; }
     static get encapsulation() { return "shadow"; }
@@ -142,6 +149,7 @@ export class MdsPrefAnimation {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }

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

@@ -36,7 +36,12 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--status-success-06, 0 171 97));
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   .item {
     --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
@@ -55,8 +60,8 @@ mds-text {
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

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

@@ -3,6 +3,7 @@ import mggConsumptionLow from "@icon/mgg/consumption-low.svg";
 import mggConsumptionMedium from "@icon/mgg/consumption-medium.svg";
 import mggConsumptionHigh from "@icon/mgg/consumption-high.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -47,6 +48,9 @@ export class MdsPrefContrast {
                 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.
@@ -54,6 +58,15 @@ export class MdsPrefContrast {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = 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);
@@ -64,13 +77,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7b3edd2f572afd06f1d1ee154b934d328cc6c0fc' }, h("mds-text", { key: '196b4cdad855f3b67ddb455fb0aa692f48d12c04', class: "info", typography: "caption" }, h("b", { key: '40b3840da0365693b1e6b08cff11e3cdd1da4819' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '7db022de1dadbaf0efc5ec5184eba9d6d1b51f2a', fill: true, size: this.size }, h("mds-tab-item", { key: '4c7aa5cfdae5fd2e3cf5376f216500c0ad4f6bd9', selected: this.mode === 'low', onClick: () => {
-                this.setConsumption('low');
-            }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: '3d8c6709bdba914e4aaf6b8969a32b5d2672ebee', selected: this.mode === 'medium', onClick: () => {
-                this.setConsumption('medium');
-            }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: '53cdc86ee488d3e28a0602db93c5dd7d8bcdfd65', selected: this.mode === 'high', onClick: () => {
-                this.setConsumption('high');
-            }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (h(Host, { key: '8aacd0158d8dcd42a86c3f8d5a963b509a067d7c', "pref-contrast": this.prefContrast }, h("mds-text", { key: '0114ef44e5ec8ebfc5eb61e59bc01a8dccc5d443', class: "info", typography: "caption" }, h("b", { key: '9062cda609e301b70910c76f0529259aece20356' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '44c1462c501e7014db8ece5a0bdbb7a743fb8848', fill: true, size: this.size }, h("mds-tab-item", { key: '6ecc4b3963061b230abdba6dd6e1382bc941007e', selected: this.mode === 'low', onClick: this.handleModeClick('low'), class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: 'bd85e99d05f2c21f2e3c1910c0eacce5ab241dd5', selected: this.mode === 'medium', onClick: this.handleModeClick('medium'), class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: '4acf72c60c3b29c9fcc1793faf216a8309a4110d', selected: this.mode === 'high', onClick: this.handleModeClick('high'), class: "item item--high", icon: mggConsumptionHigh }))));
     }
     static get is() { return "mds-pref-consumption"; }
     static get encapsulation() { return "shadow"; }
@@ -142,6 +149,7 @@ export class MdsPrefContrast {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }

package/dist/collection/components/mds-pref-contrast/mds-pref-contrast.css

@@ -30,13 +30,18 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--tone-neutral-03, 233 233 233));
 }
 
-:host-context(:root.pref-contrast-more) .item {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) .item {
   --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

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

@@ -4,6 +4,7 @@ import miOutlineAutoAwesome from "@icon/mi/outline/auto-awesome.svg";
 import miBaselineAutoAwesome from "@icon/mi/baseline/auto-awesome.svg";
 import miBaselineSettings from "@icon/mi/baseline/settings.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -68,6 +69,9 @@ export class MdsPrefContrast {
                 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.
@@ -75,6 +79,15 @@ export class MdsPrefContrast {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = 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);
@@ -87,13 +100,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '94956cf5cf0e28c943af188fbdd0874b04edea3b' }, h("mds-text", { key: '0f9efae82fe5037ce9b13fa1a7125c25bf1bb509', class: "info", typography: "caption" }, h("b", { key: 'ba27caca42dd23403991521fd903e8ab7dbfacdf' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'adf51f71a7551553663038f87ce72868fa04ac70', fill: true, size: this.size }, h("mds-tab-item", { key: '5314ee6c1ae2e23635952a6dfa56ed24c3e57050', selected: this.mode === 'more', onClick: () => {
-                this.setContrast('more');
-            }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '0e88e0bb0276a8ca0b8cb75228118a6574788299', selected: this.mode === 'system', onClick: () => {
-                this.setContrast('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '223643f6d9a03b429d58bab08e28ac29c6be7671', 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: '0a93ee15ba2f2ebd9be25e94248e14cc28ca91d3', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'f7d472739547a6322dd25582f68b76f6161a1342', class: "info", typography: "caption" }, h("b", { key: '8daab80636ad73f434613628c0a7dae43cfdf22c' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '30ab0bc43e2859dbdd4b8a2098d351870e4d7226', fill: true, size: this.size }, h("mds-tab-item", { key: '06ea791e95ecc5719e46397066cf9d21ed5d7082', selected: this.mode === 'more', onClick: this.handleModeClick('more'), class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: 'ef8b0906e9a5efc3facf70cd894af8f59991c32d', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), 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 }))));
     }
     static get is() { return "mds-pref-contrast"; }
     static get encapsulation() { return "shadow"; }
@@ -165,6 +172,7 @@ export class MdsPrefContrast {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }

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

@@ -100,7 +100,7 @@ export class MdsPrefLanguage {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5817657d210b33095d874782e22a9474deb07186' }, h("div", { key: '115825b394ff21c1cbd839592d08371fe4e9088b', class: "menu" }, h("mds-text", { key: 'cb0bcd46bedc0b7746147884ac26ffcfbf31e1af', class: "info", typography: "caption" }, h("b", { key: 'c9184216e4219ff8a2097cf1728903e16d0a1e07' }, this.t.get('label'))), h("mds-tab", { key: 'f71a4aa2177c36761317215d0e1fa81400f6bb8c', fill: true, size: this.size }, h("mds-tab-item", { key: '1991f5acca41b36d299deb007ff46755071c37f9', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), h("mds-dropdown", { key: 'f7fd96c2eef84b5b2230cfd5f8a74083d00d9846', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown, autoPlacement: true }, h("slot", { key: 'ce4d781b3b08cae00029bb36e8ea6d1f86461b30' })), this.set !== this.defaultLanguage && (h("mds-text", { key: '6ea5f8ca5cdc07692204f1b3635d4393ababfda9', typography: "caption" }, this.t.get('defaultLanguage')))));
+        return (h(Host, { key: '478109efd35a0a896d1783008a16e9275733936d' }, h("div", { key: '355b3d289bf281ed132e3bc900a434b4475c6bea', class: "menu" }, h("mds-text", { key: 'cd8902f3b078732a05c5763479ec947d412bce94', class: "info", typography: "caption" }, h("b", { key: 'e6298e5c502a2aa177e4669cecab22c8056e87eb' }, this.t.get('label'))), h("mds-tab", { key: 'f8456b33ec4d07a474994da5d08a333afd5a641f', fill: true, size: this.size }, 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 ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), h("mds-dropdown", { key: '5746fdd9a751a9c71c011aaff73bb3aff6b648f3', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown }, h("slot", { key: 'f2a7cc484c3295aa6abd463fb365f8e4a099d130' })), this.set !== this.defaultLanguage && (h("mds-text", { key: '41ebb2d247ce5054ceb807d75539301efb33596c', typography: "caption" }, this.t.get('defaultLanguage')))));
     }
     static get is() { return "mds-pref-language"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class MdsPrefLanguageItem {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '733f906b459d62d9dda8c353a30a74110e07b03a', onClick: this.handleClick }, this.code !== '' ? (h("mds-button", { icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (h("mds-button", { icon: miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
+        return (h(Host, { key: '0f594deea977bb5473b0fe656bd5e3d69fdb4da1', onClick: this.handleClick }, this.code !== '' ? (h("mds-button", { icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (h("mds-button", { icon: miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
     }
     static get is() { return "mds-pref-language-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-pref-theme/mds-pref-theme.css

@@ -64,7 +64,7 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--label-sky-06, 13 158 224));
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   .item {
     --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
@@ -83,8 +83,8 @@ mds-text {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :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));
     }

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

@@ -6,6 +6,7 @@ import miBaselineDarkMode from "@icon/mi/baseline/dark-mode.svg";
 import miBaselineSettings from "@icon/mi/baseline/settings.svg";
 import { Locale } from "../../common/locale";
 import { isSafari } from "../../common/browser";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -156,6 +157,12 @@ export class MdsPrefTheme {
                     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.
@@ -192,26 +199,28 @@ export class MdsPrefTheme {
             this.overlayEl.remove();
         }, cssDurationToMilliseconds(this.cssOverlayFadeoutDuration));
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = 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 (h(Host, { key: 'd39c062c0ddd2b9f321ce4d153613ab35628ba07' }, h("mds-text", { key: '547812a4d5c9e790fdb71e19e39156842a1635e2', class: "info", typography: "caption" }, h("b", { key: '343a8359be692988c9ec734d52246d16950e6185' }, this.t.get('label')), ' ', this.disabled
+        return (h(Host, { key: '7280b0d7c2ad7329e4170fc9a039575086debf30', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-text", { key: 'db45fd3a2e56c6f4cb6e9a8c2f7305aae9ea891e', class: "info", typography: "caption" }, 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 })), h("mds-tab", { key: '86baac9e84e019c9367a521fcc6d1a61adbc43ce', fill: true, size: this.size }, h("mds-tab-item", { key: '8c1d7742877300f0efe7c9e93ddb99aa24722cca', disabled: this.disabled, selected: this.mode === 'light', onClick: () => {
-                if (this.overlayShow) {
-                    return;
-                }
-                this.changeTheme('light');
-            }, class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: '1974867e21420238c2e8000091dd2e5dfaf4d0c1', disabled: this.disabled, selected: this.mode === 'system', onClick: () => {
-                if (this.overlayShow) {
-                    return;
-                }
-                this.changeTheme('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '1c433c2879c2165b08d896bdb8fff6d7d8fe1b2e', 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 })), h("mds-tab", { key: 'cd9873a00095c71a5ff81f38dae8d685ad37a6f0', fill: true, size: this.size }, h("mds-tab-item", { key: 'a85d3c5f6b9be4adb37638e45a5d75536e3dd442', disabled: this.disabled, selected: this.mode === 'light', onClick: this.handleModeClick('light'), class: "item item--light", icon: miBaselineLightMode }), h("mds-tab-item", { key: '713173f22fceff76de9f6751bd0a753f68aac8c7', disabled: this.disabled, selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), 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 }))));
     }
     static get is() { return "mds-pref-theme"; }
     static get encapsulation() { return "shadow"; }
@@ -310,6 +319,9 @@ export class MdsPrefTheme {
     }
     static get states() {
         return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "disabled": {}
         };

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

@@ -119,7 +119,7 @@ export class MdsPrefThemeVariant {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '5232c814c636b1f3cf3351e67460cdfd9b9c1b56' }, h("div", { key: 'a2a255a4c62cc2aa4cbac79886e629bebce294f7', class: "menu" }, h("mds-text", { key: '02a7f081c306907d973009a3a7e73b8059940352', class: "info", typography: "caption" }, h("b", { key: '01967f8b9aea1f6324ef1f15d5ae958b92e005b4' }, this.t.get('label'))), h("mds-tab", { key: 'ef02c8b82bbadcad95541f67be2dcf4ba0ddc2fc', fill: true, size: this.size }, h("mds-tab-item", { key: '663e683eac4d520e61fbc76cf4d048feacb798d2', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), h("mds-dropdown", { key: 'e86ce5ba509a6b015add47622fe94d6d59aba713', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect, autoPlacement: true }, h("slot", { key: '9b18d8d7f8d5bdb1b75150ee0559c12f8d385bda' })), this.name !== this.defaultTheme && (h("mds-text", { key: '60cb41f838f81abdbf7e7d78fb56ea6faca48c26', typography: "caption" }, this.t.get('defaultTheme')))));
+        return (h(Host, { key: '97f9130b904fd7998d3da4d20b7a46a4b0530065' }, h("div", { key: '7a8d483f98133601ecc97edc4cee8f31e8b7b864', class: "menu" }, h("mds-text", { key: '1f3782fef56a8ac6ace60b455693cd88e9b1e649', class: "info", typography: "caption" }, h("b", { key: '55dd9af6749679f2378bafa43bd51af2bbfb2634' }, this.t.get('label'))), h("mds-tab", { key: '82a4b30848480d9197d5d2ba3fe5b0cc05663819', fill: true, size: this.size }, 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 ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), 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 }, h("slot", { key: 'ec4fe15341f0b8c52a63421f8dfd90725a1c875f' })), this.name !== this.defaultTheme && (h("mds-text", { key: 'b6acf063e1b0806b0baedfe6f166dde10c85e8ad', typography: "caption" }, this.t.get('defaultTheme')))));
     }
     static get is() { return "mds-pref-theme-variant"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-pref-theme-variant-item/mds-pref-theme-variant-item.js

@@ -39,7 +39,7 @@ export class MdsPrefThemeVariantItem {
         }
     }
     render() {
-        return (h(Host, { key: '7c67e626a1111e762cf384dd1e07cca9e8ab3025', onClick: this.handleClick }, h("mds-button", { key: '12b4207889f201e6b4424aa28472fcd4a637fb0b', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '7ab3d3e6667f2ff83d578579210888af336b7170', class: "label" }, h("div", { key: 'fadd43f41276b708742e4cf1a3902d2bb6c7dddf', class: "theme-preview" }, h("div", { key: '0338afc3745f1212f9e924d7b7fb9e55d7f455fb', class: "theme-color theme-color--variant-primary" }), h("div", { key: '23acf3c5f95614ee9b83562f1061a612ee139332', class: "theme-color theme-color--status-success" }), h("div", { key: 'bdefd9b571f74615d63a4e015626a096a92446dd', class: "theme-color theme-color--status-warning" }), h("div", { key: 'fc128b9b30699cf52881ee3f559dc10d9323486a', class: "theme-color theme-color--status-error" })), this.label))));
+        return (h(Host, { key: '42ee77cb67158f239524a93cbb4c54a8edf2da9e', onClick: this.handleClick }, h("mds-button", { key: 'ded6bf478eb7919dcc82342203459ec0259b6e49', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '7582a7a064ebb938b3d7a70c185d03cb16099416', class: "label" }, h("div", { key: 'fe6351b1df4a62583bd2ea696204f3def3971002', class: "theme-preview" }, h("div", { key: '059de0fdc833d65d6fc6b7720cfc9977a6289dfc', class: "theme-color theme-color--variant-primary" }), h("div", { key: '780567139731c2d362a62bb54abf087022c65e0c', class: "theme-color theme-color--status-success" }), h("div", { key: '392532402a1fd99529ebe324c640a28f35b1bb05', class: "theme-color theme-color--status-warning" }), h("div", { key: '59b928ce09c27986d8e08e40e03f43a17efcd03c', class: "theme-color theme-color--status-error" })), this.label))));
     }
     static get is() { return "mds-pref-theme-variant-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsPriceTable {
     render() {
-        return (h(Host, { key: '4a7524eda2d51d229b579063684f617d686bca52' }, h("slot", { key: 'c6eeb79e4b5439383b992832d6e346221a8ee067' })));
+        return (h(Host, { key: 'baecd51ddff0ed0b1479c17c87537eeeeffab1a5' }, h("slot", { key: '69d9c761c54799ffbac258ce299878b825af12ba' })));
     }
     static get is() { return "mds-price-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,18 +18,19 @@
 :host {
   --mds-price-table-features-border-color: rgb(var(--tone-neutral-06, 158 158 158));
   --mds-price-table-features-padding: --spacing(300);
+  --mds-price-table-features-transition-duration: var(--duration-200, 200ms);
+  --private-price-table-features-transition-duration: var(--mds-price-table-features-transition-duration);
 
-  @apply duration-200
-    ease-in-out;
+  @apply ease-in-out;
 
   display: flex;
+  transition-duration: var(--private-price-table-features-transition-duration);
   transition-property: border-color;
   width: 100%;
 }
 
 .table-wrapper {
-  @apply scroll-mx-600;
-
+  scroll-margin-inline: --spacing(600);
   width: 100%;
 }
 
@@ -45,35 +46,53 @@ header {
     var(--mds-price-table-features-padding, --spacing(300)) 0;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-price-table-features-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-price-table-features-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-price-table-features-border-color: rgb(var(--tone-neutral-05, 197 197 197));
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-price-table-features-border-color: rgb(var(--tone-neutral-05, 197 197 197));
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   --mds-price-table-features-border-color: rgb(var(--tone-neutral-03, 233 233 233));
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     --mds-price-table-features-border-color: rgb(var(--tone-neutral-03, 233 233 233));
   }
 }

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

@@ -1,11 +1,33 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part header - Selects the HTML element wrapper of label text
  * @slot - Expects to slot `mds-price-table-features-row` component
  */
 export class MdsPriceTableFeatures {
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = 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 (h(Host, { key: 'e7f9344d10b9d60dc268381a74eccf8514b3c398' }, h("div", { key: '5b705f564d319faeac9d4eb622e462eabeee7031', class: "table-wrapper" }, this.label && (h("header", { key: '5f84a45d54385488a527afc523448756624170f9', part: "header" }, h("mds-text", { key: '7316e7c2d5793513f582643b76974c266faedc10', typography: "detail" }, h("b", { key: 'baa6b6737d4cdd98c8405d3eb4421a1fb0b1b518' }, this.label)))), h("table", { key: 'f20e7627f4e4770b1e4bd475a945acc111e5ce8a' }, h("tbody", { key: '6f4d54def644b954a56e8a7ada75ca913f65a837' }, h("slot", { key: '2b96abcc2dc865bd55ec953d429f345d89904dc7' }))))));
+        return (h(Host, { key: '8e62f7d1059d8019a154f056af2ab80f01180948', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'f5549dee3de6907b99053dede90e44d1ede4e716', class: "table-wrapper" }, this.label && (h("header", { key: 'de99381048be9911fa2ae6c0f6b653b9798dd294', part: "header" }, h("mds-text", { key: 'd858f7e01d9f8703ac074a7975095a0c2663e5ef', typography: "detail" }, h("b", { key: '34030d403e10d06b1f4426e239844fcdd8e62266' }, this.label)))), h("table", { key: '21984eaac54df90380f4ea1ffd4e7ceb3b4fc5bc' }, h("tbody", { key: 'b79a8e3d5e54d4627909e1136dcfe83147419316' }, h("slot", { key: 'a6f87f4b2e3ad4a8b19a9cdd7f56c5b9f9e3ba14' }))))));
     }
     static get is() { return "mds-price-table-features"; }
     static get encapsulation() { return "shadow"; }
@@ -42,4 +64,12 @@ export class MdsPriceTableFeatures {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }