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

package/dist/collection/components/mds-radial-menu/mds-radial-menu.js

@@ -161,7 +161,7 @@ export class MdsRadialMenu {
         this.handleBackdrop();
     }
     render() {
-        return (h(Host, { key: 'c17ebeeb32b4986baceb48b61e814c6ca2830caf' }, h("mds-button", { key: '7e57c42d3dd0f5067da69c327810f70a31370750', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '107da816c1d1aba0cd8f660e6911c6e603728747', class: "radial-menu", part: "radial-menu" }, h("slot", { key: '67c7f462a71df73038287f5fb5cf1a83eb78bc22', name: "item", onSlotchange: this.updateItems })), h("div", { key: '405b0c970a702148029f52c628974f6e38b179df', class: "disc" })));
+        return (h(Host, { key: '6f7cf327cfc3a90b1ce80e9e9aab86f6423cbf41' }, h("mds-button", { key: '545b32a7fe48707ceb0eec5adb799a776421a053', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '76acb7ae11c61f5f216c1870f61eb5cd50b1848b', class: "radial-menu", part: "radial-menu" }, h("slot", { key: '1f0a16e3505609ec32450384c40f35ec439c58ed', name: "item", onSlotchange: this.updateItems })), h("div", { key: 'cd886be843d69836088046472a720ceaac4b7676', class: "disc" })));
     }
     static get is() { return "mds-radial-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-radial-menu-item/mds-radial-menu-item.js

@@ -15,7 +15,7 @@ export class MdsRadialMenuItem {
         this.size = 'lg';
     }
     render() {
-        return (h(Host, { key: 'aa8e1d03c590ad9efbf6e5090a59f70460782a33', slot: "item" }, h("mds-button", { key: '06ca066406df3e40b262bc0ffbbda3cc65c190cf', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '50a03f527adb6ead0757ea380d31c51943129570', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip))));
+        return (h(Host, { key: '6ef1882d37a9f3f1d7bd014a4a257b03e310bffd', slot: "item" }, h("mds-button", { key: '697d5c349ee2083a4b766391ca7d82337b5b420b', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '74f407d34d4d2b009a5b28d2bb2d49455b7e3423', class: "tooltip", target: ".button", placement: "top", disableAutoPlacement: true }, this.tooltip))));
     }
     static get is() { return "mds-radial-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-radial-progress/mds-radial-progress.js

@@ -71,7 +71,7 @@ export class MdsRadialProgress {
     render() {
         const progressVar = `${(this.animatedProgress * 100).toFixed(2)}%`;
         const progressText = this.progressPercentage(this.clampProgress(this.progress));
-        return (h(Host, { key: '68c58b94fb1a5b12e843323d1d497a33a2e91e8f', style: { '--mds-radial-progress': progressVar }, role: "progressbar" }, h("div", { key: '0d8b174656f21146ac18a0c613ecc9482262b205', class: "value-container", part: "value-container" }, this.icon && h("mds-icon", { key: 'd17e55a7ba548f7e603f717a828907a873eaa4d6', class: "icon", name: this.icon, part: "icon" }), h("div", { key: 'c4f2d539d974d3a63ec73381d60abc9afc9be8e7', class: "value-container__text" }, h("mds-text", { key: 'c40e43da4bb6d581569cb515c30dd8554a8bfcd2', class: "value", typography: this.typography }, progressText)))));
+        return (h(Host, { key: '83881b4057b76db8a56eff2185522ab7394f11aa', style: { '--mds-radial-progress': progressVar }, role: "progressbar" }, h("div", { key: 'f21da1d993decfa5cd242186559f2c25c0209030', class: "value-container", part: "value-container" }, this.icon && h("mds-icon", { key: '1f53b8c170ae2657ae097e4207e32b75ce91cf91', class: "icon", name: this.icon, part: "icon" }), h("div", { key: '7f5b4e719ccb8c484c633b2cfc07cb02f90b14f0', class: "value-container__text" }, h("mds-text", { key: '2a379a399770d3a0dac5dc5bf88fcda83ff9ad43', class: "value", typography: this.typography }, progressText)))));
     }
     static get is() { return "mds-radial-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-separator/mds-separator.css

@@ -16,31 +16,41 @@
 :host {
   --mds-separator-background: rgb(var(--tone-neutral-08, 107 107 107));
 
-  @apply rounded-full
-    h-[1px];
-
   background-color: var(--mds-separator-background, rgb(var(--tone-neutral-08, 107 107 107)));
+  border-radius: var(--radius-full, 1000px);
   display: flex;
+  height: 1px;
 }
 
-:host-context(:root.pref-theme-dark) {
+/* 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']) {
   --mds-separator-background: rgb(var(--tone-neutral-07, 134 134 134));
 }
 
 @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-separator-background: rgb(var(--tone-neutral-07, 134 134 134));
   }
 }
 
-: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-separator-background: rgb(var(--tone-neutral-06, 158 158 158));
 }
 
 @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-separator-background: rgb(var(--tone-neutral-06, 158 158 158));
   }
 }

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

@@ -1,7 +1,25 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 export class MdsSeparator {
+    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() {
-        return h(Host, { key: '8056c695f2c418fbcb7041fb5f343a0ce76f80a7' });
+        return (h(Host, { key: 'ea2d787f29d9a411ff5d52bb7159f61af06706fb', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }));
     }
     static get is() { return "mds-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +33,11 @@ export class MdsSeparator {
             "$": ["mds-separator.css"]
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }

package/dist/collection/components/mds-spinner/mds-spinner.css

@@ -11,42 +11,54 @@
 :host {
   --mds-spinner-duration: 0.725s;
 
-  @apply duration-300
-    ease-in-out-quart
-    h-1200
-    w-1200;
+  @apply ease-in-out-quart;
 
   align-items: center;
   color: rgb(var(--variant-primary-03, 211 226 255));
   display: inline-flex;
+  height: --spacing(1200);
   justify-content: center;
   opacity: 0;
   overflow: hidden;
   transform: scale(0);
+  transition-duration: var(--duration-300, 300ms);
   transition-property: opacity, transform;
+  width: --spacing(1200);
+}
+
+/* Animation preference: the spinner must keep turning to signal progress, so
+ * reduced motion slows it (8s) rather than freezing it (a 0 duration would). A
+ * floor like this cannot be derived from the numeric --magma-pref-animation-
+ * enabled flag, so it is handled here, cross-browser, via @media following the
+ * OS preference. */
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-spinner-duration: 8s;
+  }
 }
 
 :host([running]) {
-  @apply duration-700
-    ease-in-out-expo;
+  @apply ease-in-out-expo;
 
   opacity: 1;
   transform: scale(1);
+  transition-duration: var(--duration-700, 700ms);
 }
 
 .await-icon {
   @apply animate-spin
-    aspect-square
-    duration-300
-    ease-out
-    w-full;
+    ease-out;
 
   animation-duration: var(--mds-spinner-duration, 0.725s);
   animation-play-state: paused;
+  aspect-ratio: var(--aspect-square, 1/1);
   display: flex;
   flex-shrink: 0;
   stroke: currentcolor;
+  transition-duration: var(--duration-300, 300ms);
   transition-property: stroke;
+  width: 100%;
 }
 
 .await-icon svg {
@@ -57,24 +69,18 @@
   animation-play-state: running;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  --mds-spinner-duration: 8s;
-}
-
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-spinner-duration: 8s;
-  }
-}
+/* 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-context(:root.pref-contrast-more) {
+:host([pref-contrast='more']) {
   color: rgb(var(--variant-primary-01, 242 246 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])) {
     color: rgb(var(--variant-primary-01, 242 246 255));
   }
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import awaitIcon from "./assets/await-rounded.svg";
 export class MdsSpinner {
     constructor() {
@@ -7,13 +8,22 @@ export class MdsSpinner {
          */
         this.running = false;
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     handleRunning(newValue) {
         if (newValue === false) {
             this.running = undefined;
         }
     }
     render() {
-        return (h(Host, { key: '687dc98a043d362db35bf00ec71052097b3f509c' }, h("i", { key: '9b374e6a3aeebf211fbc56ad1446dec19cd1da9e', class: "await-icon", innerHTML: awaitIcon })));
+        return (h(Host, { key: '3cc5be5253b5a0dd6930f3e6b76f8740d929ec06', "pref-contrast": this.prefContrast }, h("i", { key: 'cc12373124c1d79f96f6db046282ccf85a140e92', class: "await-icon", innerHTML: awaitIcon })));
     }
     static get is() { return "mds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -51,6 +61,11 @@ export class MdsSpinner {
             }
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {}
+        };
+    }
     static get watchers() {
         return [{
                 "propName": "running",

package/dist/collection/components/mds-status-bar/mds-status-bar.css

@@ -99,41 +99,44 @@ mds-modal {
   }
 }
 
-:host-context(:root.pref-animation-reduce) .status-bar-area {
-  transition-duration: 0s;
-}
+/* Consumption preference. The component mirrors the resolved level from <html>
+ * onto its host as pref-consumption (see subscribePreference in @common/preference);
+ * this plain shadow selector then drops the backdrop filter. Cross-browser, no
+ * :host-context. */
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .status-bar-area {
-      transition-duration: 0s;
-    }
-  }
-}
-
-:host-context(:root.pref-consumption-medium) {
+:host([pref-consumption='medium']) {
   --mds-status-bar-backdrop-filter: none;
 }
 
-: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-status-bar-backdrop: rgb(var(--tone-neutral-02, 244 244 244) / 0.3);
 }
 
 @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-status-bar-backdrop: rgb(var(--tone-neutral-02, 244 244 244) / 0.3);
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .status-bar {
+/* 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'])) .status-bar {
   box-shadow: var(--shadow-outline-light);
 }
 
 @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])) {
     .status-bar {
       box-shadow: var(--shadow-outline-light);
     }

package/dist/collection/components/mds-status-bar/mds-status-bar.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part actions - Selects the `actions` container element wrapped in shadowDOM.
@@ -16,10 +17,31 @@ export class MdsStatusBar {
          */
         this.position = 'bottom-right';
     }
+    connectedCallback() {
+        this.unsubscribeConsumption = subscribePreference('consumption', (value) => {
+            this.consumption = 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.unsubscribeConsumption) === 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);
+    }
     componentDidLoad() {
         var _a;
         this.modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
-        this.modal.backdrop = undefined;
+        this.modal.hideBackdrop = true;
     }
     handleVisbilityProp(newValue) {
         if (newValue === false) {
@@ -33,7 +55,7 @@ export class MdsStatusBar {
         this.visible = undefined;
     }
     render() {
-        return (h(Host, { key: '8b1a0fd4300583d834e1f33796bb8d01b4b585a8' }, h("mds-modal", { key: 'f1ab035918beff8cffd0c10474fff898b00952cf', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, h("div", { key: 'a2a57a2c80322db3622b8e44ea5ca29f12946eea', class: "status-bar-area", part: "status-bar-area", slot: "window" }, h("div", { key: 'ea668180e6691b33d2a5377e6c6f510be23a227f', class: "status-bar", part: "status-bar" }, this.description && (h("mds-text", { key: '3db7d7efc103c0186f3504db52aea0406c1e57bb', typography: "caption", class: "description" }, this.description)), h("div", { key: 'd1daa893d59a6f7b1c5e7316bc3fec6352b919b8', class: "actions", part: "actions" }, h("slot", { key: 'd24bdaf3e0e25b3f2e8594dbe050436ea270f338' })))))));
+        return (h(Host, { key: '9513dd86370989a1a6c6d0823d4aa16206f3b5b5', "pref-consumption": this.consumption, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-modal", { key: '1e5731bfc9f747842197386c2f7f1d01d3456205', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, h("div", { key: '0e3270a397ee348b736889134d20b2c913415d05', class: "status-bar-area", part: "status-bar-area", slot: "window" }, h("div", { key: '9401d2abdcc9ee9e0b7ed31575b820c7d93a579e', class: "status-bar", part: "status-bar" }, this.description && (h("mds-text", { key: 'b95add3fd67ba4a8e7a42b9222f7421547a793d7', typography: "caption", class: "description" }, this.description)), h("div", { key: '156f0e9e4f550344eef4cc0774f6c924d5dbd265', class: "actions", part: "actions" }, h("slot", { key: '28e6a570064fbb9fd541e2a8ad66be93bed36aa9' })))))));
     }
     static get is() { return "mds-status-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -143,6 +165,14 @@ export class MdsStatusBar {
             }
         };
     }
+    static get states() {
+        return {
+            "consumption": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get methods() {
         return {
             "hide": {

package/dist/collection/components/mds-stepper-bar/mds-stepper-bar.css

@@ -80,16 +80,21 @@ mds-stepper-bar-item {
   --mds-stepper-bar-scrollbar-thumb-background: rgb(var(--tone-neutral-06, 158 158 158));
   --mds-stepper-bar-scrollbar-track-background: rgb(var(--tone-neutral-08, 107 107 107));
 
-  @apply gap-600;
-
   display: grid;
+  gap: --spacing(600);
   position: relative;
 }
 
-.items {
-  @apply w-full
-    z-10;
+/* Animation preference: scroll-behavior is a keyword, so its reduced-motion state
+ * is handled here, cross-browser, via @media following the OS preference. */
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-stepper-bar-scroll-behavior: auto;
+  }
+}
 
+.items {
   align-items: start;
   display: flex;
   flex-grow: 1;
@@ -100,6 +105,8 @@ mds-stepper-bar-item {
   position: relative;
   scroll-behavior: var(--mds-stepper-bar-scroll-behavior, smooth);
   scroll-snap-type: x mandatory;
+  width: 100%;
+  z-index: 10;
 }
 
 :host([linear='true']) ::slotted(mds-stepper-bar-item),
@@ -112,35 +119,9 @@ mds-stepper-bar-item {
 }
 
 .contents {
-  @apply w-full;
-
   display: flex;
   flex-direction: column;
-}
-
-:host-context(:root.pref-animation-reduce) {
-  --mds-stepper-bar-scroll-behavior: auto;
-
-  transition-duration: 0s;
-
-  .contents,
-  .items {
-    transition-duration: 0s;
-  }
-}
-
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-stepper-bar-scroll-behavior: auto;
-
-    transition-duration: 0s;
-
-    .contents,
-    .items {
-      transition-duration: 0s;
-    }
-  }
+  width: 100%;
 }
 
 :host(:not([navigation='scrollbar'])) .items {

package/dist/collection/components/mds-stepper-bar/mds-stepper-bar.js

@@ -99,7 +99,7 @@ export class MdsStepperBar {
         });
     }
     render() {
-        return (h(Host, { key: '07b3ac18136f0bc4e6b7424238705c951a37e0bf' }, h("div", { key: '7d2e747d084bc581966e88c55ad19a8b27086030', class: "items", part: "items" }, h("slot", { key: '7934e741a279fdf3635c9ef56a92c96441f21081' })), h("div", { key: '3d3c6e31fa33b046604845886bfd94093e51bba8', class: "contents", part: "contents" }, h("slot", { key: '9af87d63470bf64e882477dc4f8d0e25159a708d', name: "content" }))));
+        return (h(Host, { key: 'bde1cc3ed68aa3d3350af4639fa0a4dbf3cc27ee' }, h("div", { key: 'f556e63f5e575d3c83b6aec4ea405c709d811121', class: "items", part: "items" }, h("slot", { key: '43e7514d9ba620109caa3f585e0a9f5cc92f0ed6' })), h("div", { key: '46e7419b2ef009a3e37b70d5a5bab92df25dd5f9', class: "contents", part: "contents" }, h("slot", { key: 'cddf350976b5910117d1d64bae6b87bd32c37954', name: "content" }))));
     }
     static get is() { return "mds-stepper-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.css

@@ -113,6 +113,9 @@
   --mds-stepper-bar-item-header-gap: var(--mds-stepper-bar-gap, --spacing(50));
   --mds-stepper-bar-item-color: rgb(var(--tone-neutral-03, 233 233 233));
   --mds-stepper-bar-item-duaration: 250ms;
+  --private-stepper-bar-item-duaration: var(--mds-stepper-bar-item-duaration, 250ms);
+  --mds-stepper-bar-item-transition-duration: var(--duration-200, 200ms);
+  --private-stepper-bar-item-transition-duration: var(--mds-stepper-bar-item-transition-duration);
   --mds-stepper-bar-item-icon-background-done: rgb(var(--status-success-05, 107 206 147));
   --mds-stepper-bar-item-icon-background-current: rgb(var(--variant-primary-04, 184 208 255));
   --mds-stepper-bar-item-icon-background: var(
@@ -127,8 +130,6 @@
   --mds-stepper-bar-item-progress-color: rgb(var(--status-success-04, 158 222 181));
   --mds-stepper-bar-item-progress-thickness: var(--height-200);
 
-  @apply gap-400;
-
   align-items: flex-start;
   border-radius: var(--radius-xl, 20px);
   display: grid;
@@ -136,10 +137,11 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
+  gap: --spacing(400);
   min-width: var(--mds-stepper-bar-item-min-width, 180px);
   position: relative;
   scroll-snap-align: center;
-  transition-duration: var(--mds-stepper-bar-item-duaration, 250ms);
+  transition-duration: var(--private-stepper-bar-item-duaration);
   transition-property: outline, outline-offset, background-color;
 }
 
@@ -154,7 +156,7 @@
 } */
 
 :host(:last-of-type) {
-  @apply basis-100;
+  flex-basis: --spacing(100);
 }
 
 :host(:last-of-type) .progress {
@@ -182,33 +184,32 @@
   --mds-stepper-bar-item-icon-background: var(--mds-stepper-bar-item-icon-background-current, rgb(var(--variant-primary-04, 184 208 255)));
   --mds-stepper-bar-item-icon-color: var(--mds-stepper-bar-item-icon-color-current, rgb(var(--tone-neutral, 0 0 0)));
 
-  transition-delay: calc(var(--mds-stepper-bar-item-duaration, 250ms) / 2);
+  transition-delay: calc(var(--private-stepper-bar-item-duaration) / 2);
 }
 
 .header {
-  @apply ease-out
-  rounded-md
-  w-full;
+  @apply ease-out;
 
   align-items: center;
+  border-radius: var(--radius-md, 12px);
   display: flex;
   gap: var(--mds-stepper-bar-item-header-gap);
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-stepper-bar-item-transition-duration);
   transition-property: outline, outline-offset;
+  width: 100%;
 }
 
 .icon {
-  @apply ease-in-out
-  duration-150
-  rounded-full;
+  @apply ease-in-out;
 
   background-color: var(--mds-stepper-bar-item-icon-background, var(--mds-stepper-bar-item-progress-background, rgb(var(--tone-neutral-08, 107 107 107))));
+  border-radius: var(--radius-full, 1000px);
   display: flex;
   fill: var(--mds-stepper-bar-item-icon-color, rgb(var(--tone-neutral-04, 218 218 218)));
   flex-shrink: 0;
   padding: --spacing(200);
   position: relative;
-  transition-duration: var(--mds-stepper-bar-item-duaration, 250ms);
+  transition-duration: var(--private-stepper-bar-item-duaration);
   transition-property: background-color, fill;
 }
 
@@ -222,59 +223,48 @@
 }
 
 .infos {
-  @apply gap-100
-  pl-100;
-
   display: grid;
+  gap: --spacing(100);
+  padding-left: --spacing(100);
 }
 
 .text {
-  @apply ease-in-out
-  duration-150;
+  @apply ease-in-out;
 
   color: var(--mds-stepper-bar-item-color, rgb(var(--tone-neutral-03, 233 233 233)));
   pointer-events: none;
-  transition-duration: var(--mds-stepper-bar-item-duaration, 250ms);
+  transition-duration: var(--private-stepper-bar-item-duaration);
   transition-property: color;
 }
 
 .badge {
-  @apply rounded-full;
-
+  border-radius: var(--radius-full, 1000px);
   pointer-events: none;
 }
 
 .step {
-  @apply rounded-full;
-
+  border-radius: var(--radius-full, 1000px);
   color: rgb(var(--tone-neutral-04, 218 218 218));
   pointer-events: none;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-delay: 0s !important;
-  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). */
 
-  .header,
-  .icon,
-  .text {
-    transition-delay: 0s !important;
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-stepper-bar-item-duaration: 0s;
+  --private-stepper-bar-item-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-delay: 0s !important;
-    transition-duration: 0s;
-
-    .header,
-    .icon,
-    .text {
-      transition-delay: 0s !important;
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-stepper-bar-item-duaration: 0s;
+    --private-stepper-bar-item-transition-duration: 0s;
   }
 }