npm - @maggioli-design-system/magma - Versions diffs - 2.0.0-beta.1 → 2.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1223) hide show

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

@@ -46,22 +46,24 @@ mds-price-table-features-cell {
   --mds-price-table-features-row-background-hover: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-price-table-features-row-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-price-table-features-row-color-hover: rgb(var(--tone-neutral-01, 255 255 255));
+  --mds-price-table-features-row-transition-duration: var(--duration-200, 200ms);
+  --private-price-table-features-row-transition-duration: var(--mds-price-table-features-row-transition-duration);
-  @apply duration-200
-    ease-in-out;
+  @apply ease-in-out;
   background-color: var(--mds-price-table-features-row-background, transparent);
   color: var(--mds-price-table-features-row-color, rgb(var(--tone-neutral-04, 218 218 218)));
   display: table-row;
+  transition-duration: var(--private-price-table-features-row-transition-duration);
   transition-property: background-color, color;
 }
-:host-context(:not(.safari)):host(:hover) {
+:host(:hover) {
   --mds-price-table-features-row-background: var(--mds-price-table-features-row-background-hover, rgb(var(--tone-neutral-10, 60 60 60)));
   --mds-price-table-features-row-color: var(--mds-price-table-features-row-color-hover, rgb(var(--tone-neutral-01, 255 255 255)));
 }
-:host-context(:not(.safari)):host(:hover) > ::slotted(mds-price-table-features-cell) {
+:host(:hover) > ::slotted(mds-price-table-features-cell) {
   --mds-price-table-features-cell-icon-supported-color: var(--mds-price-table-features-cell-icon-supported-color-hover, rgb(var(--label-green-06, 30 171 82)));
   --mds-price-table-features-cell-icon-unsupported-color: var(--mds-price-table-features-cell-icon-unsupported-color-hover, rgb(var(--tone-neutral-06, 158 158 158)));
 }
@@ -70,41 +72,59 @@ mds-price-table-features-cell {
   padding-left: 0;
 }
-:host-context(:not(.safari)):host(:hover) > ::slotted([type='label']) {
+:host(:hover) > ::slotted([type='label']) {
   transform: translate(--spacing(200), 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-row-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-row-transition-duration: 0s;
   }
 }
-: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-row-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-price-table-features-row-color-hover: 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])) {
     --mds-price-table-features-row-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-price-table-features-row-color-hover: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }
-: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-row-background-hover: rgb(var(--tone-neutral-09, 76 76 76));
 }
 @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-row-background-hover: rgb(var(--tone-neutral-09, 76 76 76));
   }
 }

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

@@ -1,8 +1,30 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Expects to slot `mds-price-table-features-cell` component
+ * @slot - Expects to slot `mds-price-table-features-cell` component
  */
 export class MdsPriceTableFeaturesRow {
+    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);
+    }
     componentWillRender() {
         this.horizontalCells = this.host.querySelectorAll('mds-price-table-features-cell');
         this.cellPercWidth = Number(100 / this.horizontalCells.length).toFixed(4) + '%';
@@ -11,7 +33,7 @@ export class MdsPriceTableFeaturesRow {
         });
     }
     render() {
-        return (h(Host, { key: '81ade11b3ab36047fe6ea3abd16b8766f1660b87' }, h("slot", { key: '570984b400f99165ee9f3f40ffd93ad19b437dd9' })));
+        return (h(Host, { key: 'aa643a67f90377589c46362cad147ea0133bc36a', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: '8aa2a7633dc5196acd823229e3ba1b6cb1103345' })));
     }
     static get is() { return "mds-price-table-features-row"; }
     static get encapsulation() { return "shadow"; }
@@ -27,7 +49,11 @@ export class MdsPriceTableFeaturesRow {
     }
     static get states() {
         return {
-            "cellPercWidth": {}
+            "cellPercWidth": {},
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/mds-price-table-header/mds-price-table-header.js CHANGED Viewed

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsPriceTableHeader {
     render() {
-        return (h(Host, { key: '42fabeb365252635792adb6b5f28ba16f6ebe9e3' }, h("slot", { key: '1f2726a1e4df0605cb2e5d635f37193834408d47' })));
+        return (h(Host, { key: '0d876dc90072b896419158ba31b1f52e935b4aa6' }, h("slot", { key: 'db1c232ed329a09b1c1365d8d4aa2cd1c4352382' })));
     }
     static get is() { return "mds-price-table-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,23 +22,25 @@ mds-separator {
 :host {
   --mds-price-table-list-separator-color: rgb(var(--tone-neutral-03, 233 233 233) / 0.5);
+  --mds-price-table-list-transition-duration: var(--duration-200, 200ms);
+  --private-price-table-list-transition-duration: var(--mds-price-table-list-transition-duration);
-  @apply duration-200
-    ease-in-out
-    gap-600
-    p-600
-    rounded-xl;
+  @apply ease-in-out;
   background-color: rgb(var(--label-green-10, 12 68 33));
+  border-radius: var(--radius-xl, 20px);
   display: grid;
+  gap: --spacing(600);
+  padding: --spacing(600);
+  transition-duration: var(--private-price-table-list-transition-duration);
   transition-property: background-color, color;
 }
 .separator {
-  @apply duration-200
-    ease-in-out;
+  @apply ease-in-out;
   background-color: var(--mds-price-table-list-separator-color, rgb(var(--tone-neutral-03, 233 233 233) / 0.5));
+  transition-duration: var(--private-price-table-list-transition-duration);
   transition-property: background-color;
 }
@@ -47,34 +49,40 @@ mds-separator {
 }
 .main {
-  @apply gap-300;
   display: grid;
+  gap: --spacing(300);
 }
 .footer {
-  @apply gap-400;
   display: grid;
+  gap: --spacing(400);
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .separator {
-  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-list-transition-duration: 0s;
+}
-    .separator {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-price-table-list-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-list-separator-color: rgb(var(--tone-neutral-01, 255 255 255) / 0.5);
   background-color: rgb(var(--label-green-09, 14 81 39));
@@ -82,8 +90,8 @@ mds-separator {
 }
 @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-list-separator-color: rgb(var(--tone-neutral-01, 255 255 255) / 0.5);
     background-color: rgb(var(--label-green-09, 14 81 39));
@@ -91,7 +99,12 @@ mds-separator {
   }
 }
-: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-list-separator-color: rgb(var(--tone-neutral-01, 255 255 255) / 0.5);
   box-shadow: var(--shadow-outline-50) inset;
@@ -99,8 +112,8 @@ mds-separator {
 }
 @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-list-separator-color: rgb(var(--tone-neutral-01, 255 255 255) / 0.5);
     box-shadow: var(--shadow-outline-50) inset;

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

@@ -1,20 +1,42 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part content - Selects the element which wraps elements added via `default slot`
  * @part footer - Selects the element which wraps elements added via `slot="price"` and `slot="action"`
  * @part header - Selects the element which wraps elements added via `slot="header"`
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
- * @slot default - Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot.
+ * @slot item - Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot.
  * @slot header - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot price - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsPriceTableList {
+    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);
+    }
     componentWillLoad() {
         this.hasItems =
             this.hostElement.querySelectorAll('[slot="item"], mds-price-table-list-item').length > 0;
     }
     render() {
-        return (h(Host, { key: '9839e2822db4193a8deb66c594a425786a535d1f' }, h("div", { key: '58507843f8e7eae61e26eafaeb99f01c77480ed1', class: "header", part: "header" }, h("slot", { key: '5f7541028888ada10f64725d1ecf0ebb5e4d9832', name: "header" })), this.hasItems && h("mds-separator", { key: '566ca8c9ba02b76f47f3bfcaa0100449b07e6146', class: "separator" }), this.hasItems && (h("main", { key: '0f03d7c886ce609ee8efa658408ba2c53e38015b', class: "main", part: "content" }, h("slot", { key: '1044b8d53d3234bcd10dd9cd912c4574c0d3436a', name: "item" }))), h("div", { key: '4f5ace1034982ee7f4d8942819a987439ba36509', class: "footer", part: "footer" }, h("slot", { key: 'a8f206d356219f57376bd341c7447497a6e88c52', name: "price" }), h("slot", { key: 'c9ed7291e71ee29a1c0a7542fb79065934523ec0', name: "action" }))));
+        return (h(Host, { key: 'e7dea8205b847700337422933069730885cebcfe', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '8652686305e3eec80ffc95c86d6fae8472d3bdf0', class: "header", part: "header" }, h("slot", { key: '05dbf39029dc681ce1dfe7842c7fea92959a1112', name: "header" })), this.hasItems && h("mds-separator", { key: '88a2d6d76477d31551968b938801d2ab8dfece12', class: "separator" }), this.hasItems && (h("main", { key: '260a30a69cd000ec83e5bae13fffdb1d1933389b', class: "main", part: "content" }, h("slot", { key: '251f8f9f6aa1b53d77cbb3b63285edc8afe49c6c', name: "item" }))), h("div", { key: 'd46082dd8a242025c895dd9255e6079f5baf17c8', class: "footer", part: "footer" }, h("slot", { key: '7b7320bb4b89c31e566517ce280d877b0976d4cc', name: "price" }), h("slot", { key: 'fec836e98ecdb4f0be4bc8265cd8d65241e2a14f', name: "action" }))));
     }
     static get is() { return "mds-price-table-list"; }
     static get encapsulation() { return "shadow"; }
@@ -30,7 +52,11 @@ export class MdsPriceTableList {
     }
     static get states() {
         return {
-            "hasItems": {}
+            "hasItems": {},
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
         };
     }
     static get elementRef() { return "hostElement"; }

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

@@ -47,10 +47,9 @@ mds-text {
   --mds-price-table-list-item-unsupported-icon-color-hover: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-price-table-list-item-unsupported-icon-color: rgb(var(--tone-neutral-05, 197 197 197));
-  @apply gap-100;
   align-items: flex-start;
   display: flex;
+  gap: --spacing(100);
 }
 .text {
@@ -63,13 +62,13 @@ mds-text {
 .icon {
   @apply ease-out-expo
-  h-600
-  svg
-  w-600;
+    svg;
   fill: var(--mds-price-table-list-item-unsupported-icon-color, rgb(var(--tone-neutral-05, 197 197 197)));
+  height: --spacing(600);
   transition-duration: var(--duration-500, 500ms);
   transition-property: fill;
+  width: --spacing(600);
 }
 :host([supported]:not([supported='false'])) .icon {

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

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
 import miBaselineCheckCircle from "@icon/mi/baseline/check-circle.svg";
 import miBaselineHorizontalRule from "@icon/mi/baseline/horizontal-rule.svg";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsPriceTableListItem {
     constructor() {
         /**
@@ -13,7 +16,7 @@ export class MdsPriceTableListItem {
         this.typography = 'detail';
     }
     render() {
-        return (h(Host, { key: '90b909850952b68e79aecf6222ca9eb2e0d32a3f', slot: "item" }, h("mds-text", { key: '16c8618310b452ac9f478036605655139eec1513', class: "icon-container", typography: this.typography }, this.supported ? (h("i", { class: "icon", innerHTML: miBaselineCheckCircle, part: "icon" })) : (h("i", { class: "icon", innerHTML: miBaselineHorizontalRule, part: "icon" }))), h("mds-text", { key: '5cc3f23b819caebb5b5c25401da75dbc9b023659', class: "text", typography: this.typography }, h("slot", { key: 'd824314eb2e3e056b2924a159ffa85152ebbf9e4' }))));
+        return (h(Host, { key: '9a74af393bc74c765497cf213e572a4bb1f85bc3', slot: "item" }, h("mds-text", { key: 'f96de44e9d6c686f51f13cb461e0bacaef9f4077', class: "icon-container", typography: this.typography }, this.supported ? (h("i", { class: "icon", innerHTML: miBaselineCheckCircle, part: "icon" })) : (h("i", { class: "icon", innerHTML: miBaselineHorizontalRule, part: "icon" }))), h("mds-text", { key: 'd232620f35303d3b4200cd89f7028b9a6073d69f', class: "text", typography: this.typography }, h("slot", { key: 'b9b38a813b5f7666040552b480c4081b1823a47b' }))));
     }
     static get is() { return "mds-price-table-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,6 +45,9 @@
   --mds-progress-background: rgb(var(--tone-neutral-08, 107 107 107));
   --mds-progress-color: rgb(var(--variant-primary-03, 211 226 255));
   --mds-progress-duration: 750ms;
+  --private-progress-duration: var(--mds-progress-duration, 750ms);
+  --mds-progress-transition-duration: var(--duration-300, 300ms);
+  --private-progress-transition-duration: var(--mds-progress-transition-duration);
   --mds-progress-thickness: var(--height-200);
   @apply ease-in-out;
@@ -58,7 +61,7 @@
   min-width: var(--mds-progress-thickness, var(--height-200));
   overflow: hidden;
   position: relative;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-progress-transition-duration);
   transition-property: background-color;
   width: 100%;
 }
@@ -86,7 +89,7 @@
   background-color: var(--mds-progress-color, rgb(var(--variant-primary-03, 211 226 255)));
   border-radius: inherit;
   corner-shape: inherit;
-  transition-duration: var(--mds-progress-duration, 750ms);
+  transition-duration: var(--private-progress-duration);
   transition-property: background-color, flex-grow;
 }
@@ -146,23 +149,33 @@
   --mds-progress-thickness: --spacing(600);
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .progress {
-  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-progress-duration: 0s;
+  --private-progress-transition-duration: 0s;
+}
-    .progress {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-progress-duration: 0s;
+    --private-progress-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-progress-color: rgb(var(--variant-primary-05, 152 188 255));
   --mds-progress-background: rgb(var(--tone-neutral-07, 134 134 134));
@@ -193,8 +206,8 @@
 }
 @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-progress-color: rgb(var(--variant-primary-05, 152 188 255));
     --mds-progress-background: rgb(var(--tone-neutral-07, 134 134 134));
@@ -225,7 +238,12 @@
   }
 }
-: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-progress-color: rgb(var(--variant-primary-05, 152 188 255));
   --mds-progress-background: rgb(var(--tone-neutral-07, 134 134 134));
@@ -236,8 +254,8 @@
 }
 @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-progress-color: rgb(var(--variant-primary-05, 152 188 255));
     --mds-progress-background: rgb(var(--tone-neutral-07, 134 134 134));

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { removeAttributesIf, ifAttribute } from "../../common/aria";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part progress - Selects the `div` element that contains the progress bar
  * @part radial-progress - Selects the `mds-radial-progress` element that contains the radial progress bar
@@ -32,6 +33,27 @@ export class MdsProgress {
          */
         this.steps = 'Inizio,Un quarto,Metà,Tre quarti,Fine';
     }
+    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);
+    }
     componentWillLoad() {
         this.stepsList = this.steps.split(',');
         this.setProgress(this.progress);
@@ -46,7 +68,7 @@ export class MdsProgress {
         ]);
     }
     setProgress(progress) {
-        if (this.steps) {
+        if (this.steps !== '') {
             this.currentStep = this.stepsList[Math.round(progress * (this.stepsList.length - 1))];
             if (!ifAttribute(this.element, 'aria-hidden')) {
                 this.element.setAttribute('aria-valuetext', this.currentStep);
@@ -60,7 +82,7 @@ export class MdsProgress {
         this.stepsList = steps.split(',');
     }
     render() {
-        return (h(Host, { key: 'b515b4bc8d9bb3e124374ad1adc90a50016c1434', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": !ifAttribute(this.element, 'aria-hidden') && Math.round(this.progress * 100), role: "progressbar" }, this.direction === 'radial' ? (h("mds-radial-progress", { progress: this.progress, part: "radial-progress", typography: this.typography, variant: this.variant })) : (h("div", { class: "progress", part: "progress", style: this.direction === 'horizontal'
+        return (h(Host, { key: '0ab0f8e5741890ca0270ee8b3e898cfa6b128966', "aria-valuemax": "100", "aria-valuemin": "0", "aria-valuenow": !ifAttribute(this.element, 'aria-hidden') && Math.round(this.progress * 100), role: "progressbar", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.direction === 'radial' ? (h("mds-radial-progress", { progress: this.progress, part: "radial-progress", typography: this.typography, variant: this.variant })) : (h("div", { class: "progress", part: "progress", style: this.direction === 'horizontal'
                 ? { flexGrow: `${this.progress}` }
                 : { flexGrow: `${this.progress}`, width: '100%' } }))));
     }
@@ -230,6 +252,10 @@ export class MdsProgress {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "currentStep": {}
         };
     }

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

@@ -79,11 +79,6 @@ mds-button {
   );
   @apply ease-in-out-expo
-    gap-200
-    max-w-[360px]
-    min-w-7200
-    p-400
-    pl-2400
     hide-scrollbar;
   /* stylelint-disable-next-line property-disallowed-list */
@@ -92,7 +87,12 @@ mds-button {
   box-sizing: content-box !important;
   display: flex;
   flex-direction: column;
+  gap: --spacing(200);
+  max-width: 360px;
+  min-width: --spacing(7200);
   overflow-x: hidden;
+  padding: --spacing(400);
+  padding-left: --spacing(2400);
   position: fixed;
   right: 0;
   top: 0;
@@ -121,7 +121,13 @@ mds-button {
   visibility: hidden;
 }
-: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-push-notification-background: linear-gradient(
     to right,
     rgb(0 0 0 / 0) 0%,
@@ -131,8 +137,8 @@ mds-button {
 }
 @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-push-notification-background: linear-gradient(
       to right,
       rgb(0 0 0 / 0) 0%,