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

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

@@ -19,6 +19,9 @@ export class MdsPrefLanguageItem {
             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);
     }
@@ -29,7 +32,7 @@ export class MdsPrefLanguageItem {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '518c33d30c27e54512f2490c78da1ad1f97328eb', 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"; }
@@ -131,7 +134,7 @@ export class MdsPrefLanguageItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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";
@@ -63,7 +64,7 @@ export class MdsPrefTheme {
             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)) {
@@ -78,7 +79,7 @@ export class MdsPrefTheme {
             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';
                 }
@@ -90,7 +91,7 @@ export class MdsPrefTheme {
             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';
@@ -156,7 +157,16 @@ 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.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -180,7 +190,7 @@ export class MdsPrefTheme {
         this.setTheme(newValue);
     }
     detachOverlayTransition() {
-        if (!this.overlayEl) {
+        if (this.overlayEl == null) {
             return;
         }
         this.overlayEl.style.backgroundColor = this.overlayBackgroundHidden;
@@ -189,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: 'c78474ccae6afb47766f571d86fe235c7d61d1ba' }, h("mds-text", { key: '3535c07209e5465959044593d89cce53ab128180', class: "info", typography: "caption" }, h("b", { key: '68be38f8895654dd40214f66fb7241012d392199' }, 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: '22fe4bd6c21908dc356a322226cfe7518952f68d', fill: true, size: this.size }, 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 }), 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: miBaselineSettings }), 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 })), 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"; }
@@ -307,6 +319,9 @@ export class MdsPrefTheme {
     }
     static get states() {
         return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "disabled": {}
         };
@@ -351,7 +366,7 @@ export class MdsPrefTheme {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -7,7 +7,7 @@ import localeIt from "./meta/locale.it.json";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import miBaselineKeyboardArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
 /**
- * @slot default - Add `mds-pref-theme-variant-item` element/s.
+ * @slot - Add `mds-pref-theme-variant-item` element/s.
  */
 export class MdsPrefThemeVariant {
     constructor() {
@@ -81,7 +81,7 @@ export class MdsPrefThemeVariant {
             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) {
@@ -89,7 +89,7 @@ export class MdsPrefThemeVariant {
                         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
@@ -102,6 +102,9 @@ export class MdsPrefThemeVariant {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -116,7 +119,7 @@ export class MdsPrefThemeVariant {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '15e431592fa7b91f8b964a3848de67406baf072f' }, h("div", { key: 'a0a16b7172f212c8664ee3cf1fa298884922b62f', class: "menu" }, h("mds-text", { key: 'b76c54c74c66191278d1dfe9c3eb9bc7e6d55fad', class: "info", typography: "caption" }, h("b", { key: 'ec9f3e8fc0887393539ba47220d20c9db03a3449' }, this.t.get('label'))), h("mds-tab", { key: '7df63e45e1d9265ffc3617cfc49a1e167996d66b', fill: true, size: this.size }, 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 ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), 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 }, h("slot", { key: '1b984764ffcb3467ff1050b3eef5c1c83edff918' })), this.name !== this.defaultTheme && (h("mds-text", { key: '7871a4799701c0fda9f6c35b913cf7a00e9d7510', 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"; }
@@ -275,7 +278,7 @@ export class MdsPrefThemeVariant {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -26,17 +26,20 @@ export class MdsPrefThemeVariantItem {
             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 (h(Host, { key: '7226e8612de14cb55f08e59867a85bac2a818c20', onClick: this.handleClick }, h("mds-button", { key: '9ba3cfd0a254eaeff4e3ccb6c6b1ceab5f245e07', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '98e24fcf47e692495a0f5c05d5ef9d7924f08949', class: "label" }, h("div", { key: '25d6de60ebe19d3e7f21a425e6fd8069927ee46f', class: "theme-preview" }, h("div", { key: 'd8820f6717263184e7af45e8f9f999a1e013481c', class: "theme-color theme-color--variant-primary" }), h("div", { key: 'd058474d0c8aa30e37647f6a0d07dd2b66bf5bee', class: "theme-color theme-color--status-success" }), h("div", { key: '50ef0f48869b26b846b668963f1ce95ccd2517e4', class: "theme-color theme-color--status-warning" }), h("div", { key: 'f6ca3f58fb1e4df027f79fed26c46e62379e7733', 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"; }
@@ -185,7 +188,7 @@ export class MdsPrefThemeVariantItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `mds-price-table-list` elements or `components` to this slot.
+ */
 export class MdsPriceTable {
     render() {
-        return (h(Host, { key: '2d2b09b6b5ec12bccfa957bf0a7ab636eacf8639' }, h("slot", { key: '1db821d187a0488397440de72739af6d7c30c971' })));
+        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 default - Expects to slot `mds-price-table-features-row` component
+ * @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: 'c1c9c47c868a3811604fa8a2a163b2093f146e03' }, h("div", { key: 'a308014a1778ff72e0e3e552bff15c0f1d18c15d', class: "table-wrapper" }, this.label && (h("header", { key: '421aecece294adb7d717a8f5b5b55bc7cb39e801', part: "header" }, h("mds-text", { key: '4506989506031cc040e201e2aa1ee1f2b217b53c', typography: "detail" }, h("b", { key: 'f065ba3c8c054f385ee8fef05dcff1b4bdf65ade' }, this.label)))), h("table", { key: '97bb2c61f606d69a815f29a5d6c994cc19ae4e84' }, h("tbody", { key: 'c70053b39c21e3ad4f9558d0fe031c111ce5b9cd' }, h("slot", { key: 'c854ebd92ead2d68d63b4838f8826cadf3338211' }))))));
+        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": {}
+        };
+    }
 }

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

@@ -62,27 +62,29 @@ mds-text {
   --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, 200ms);
+  --private-price-table-features-cell-transition-duration: var(--mds-price-table-features-cell-transition-duration);
 
-  @apply duration-200
-    ease-out;
+  @apply ease-out;
 
   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, --spacing(300)));
+  transition-duration: var(--private-price-table-features-cell-transition-duration);
   transition-property: border-color, border-color, transform;
   vertical-align: top;
 }
 
 .icon {
-  @apply h-600
-    duration-200
-    ease-out
-    svg
-    w-600;
+  @apply ease-out
+    svg;
 
   display: flex;
   fill: var(--icon-fill-color, currentColor);
+  height: --spacing(600);
+  transition-duration: var(--private-price-table-features-cell-transition-duration);
   transition-property: fill;
+  width: --spacing(600);
 }
 
 .icon--supported {
@@ -93,23 +95,31 @@ mds-text {
   --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),
-:host-context(:root.pref-animation-reduce) .icon {
-  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). */
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-price-table-features-cell-transition-duration: 0s;
+}
 
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-price-table-features-cell-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-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));
@@ -117,8 +127,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-theme])) {
     --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));
@@ -126,7 +136,12 @@ mds-text {
   }
 }
 
-: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-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));
@@ -135,8 +150,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])) {
     --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));

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

@@ -1,10 +1,11 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import miBaselineCheckCircle from "@icon/mi/baseline/check-circle.svg";
 import miBaselineHorizontalRule from "@icon/mi/baseline/horizontal-rule.svg";
 /**
  * @part icon - Selects the HTML element of the icon when `type` attribute when is `supported` or `unsupported`.
  * @part text - Selects the HTML element wrapper of text when `type` attribute when is `text`.
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsPriceTableFeaturesCell {
     constructor() {
@@ -13,8 +14,29 @@ export class MdsPriceTableFeaturesCell {
          */
         this.type = 'text';
     }
+    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: '54e7d4ba98f366ca072ce0e4faf02a093db43369' }, this.type === 'supported' && (h("i", { key: '3131fd8fc3fae4b821fd643e84477ef78700d2e2', class: "icon icon--supported", innerHTML: miBaselineCheckCircle, part: "icon" })), this.type === 'unsupported' && (h("i", { key: '8080a37fd7dc031bc3e162480a76d88b5b1a32f6', class: "icon icon--unsupported", innerHTML: miBaselineHorizontalRule, part: "icon" })), this.type === 'text' && (h("mds-text", { key: '47ccf913caed4f3a3b8070e8c5d51699fa66b96b', part: "text", typography: "detail" }, h("slot", { key: '125c00d4287ce168a20d1cde74ad06bd61d19112' }))), this.type === 'custom' && h("slot", { key: '875b44b69e06f7d8a464b4d598b5a00680d78a3a' }), this.type === 'label' && h("slot", { key: 'f584c21d6d8af59d3a8a0be9b4f008478eefd279' })));
+        return (h(Host, { key: '0685a3ee7e1b48602dd2fe5de72ab1bfa3911d4e', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.type === 'supported' && (h("i", { key: 'fa867367c20a71b03f45b35b45a3e63a9439f55d', class: "icon icon--supported", innerHTML: miBaselineCheckCircle, part: "icon" })), this.type === 'unsupported' && (h("i", { key: '9c02e9b23f20a58074b4f2fbadadb100acdc6ae7', class: "icon icon--unsupported", innerHTML: miBaselineHorizontalRule, part: "icon" })), this.type === 'text' && (h("mds-text", { key: '431f38647428bb78f23a5b4c9b9f1d74a7e0843a', part: "text", typography: "detail" }, h("slot", { key: 'b4e1c215cd40869a188d6ffda706305296130ef1' }))), this.type === 'custom' && h("slot", { key: '7d36a04177fa01a991a7ea41e5ce7edf8679335d' }), this.type === 'label' && h("slot", { key: '05027dbdb0fa2e7a59ca6942e8e38f89375e5819' })));
     }
     static get is() { return "mds-price-table-features-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -59,4 +81,12 @@ export class MdsPriceTableFeaturesCell {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }