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-separator/mds-separator.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: 'b77bfa637825f2c45736df617eaac64b69427ad0' });
+        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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: 'da29b22d2ddd2824a2f71aa9a6ea2c31da835b14' }, h("i", { key: 'c8cdc857de88d6e1c89f1365b4f11a7dc96e1ef1', 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
+ * @slot - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part actions - Selects the `actions` container element wrapped in shadowDOM.
  * @part status-bar - Selects the `status-bar` window component wrapped in shadowDOM.
  * @part status-bar-area - Selects the `status-bar-area` which wraps `status-bar` element with darker area in shadowDOM.
@@ -16,21 +17,45 @@ 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) {
             this.visible = undefined;
         }
     }
+    /**
+     * Hides the status bar.
+     */
     async hide() {
         this.visible = undefined;
     }
     render() {
-        return (h(Host, { key: '2e37f49ed168ac4f92de372d2174073b193ed5f3' }, h("mds-modal", { key: '248f8662369de074f704d86b3ff83597b2403592', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, h("div", { key: '3acce82b21bd279dab72e67cf3ecaa6c2c88c228', class: "status-bar-area", part: "status-bar-area", slot: "window" }, h("div", { key: '40b7f67c8e568860cbdf843ca46b98f5fa61a765', class: "status-bar", part: "status-bar" }, this.description && (h("mds-text", { key: 'e669ba5dfe960c3a11812f55720f35ad2d1514a6', typography: "caption", class: "description" }, this.description)), h("div", { key: 'bb0266d41aa9eabd340e1a709a625e94c08682ed', class: "actions", part: "actions" }, h("slot", { key: 'aac6557450ec7509c1126dfc1ccc629474e4d5e8' })))))));
+        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"; }
@@ -140,6 +165,14 @@ export class MdsStatusBar {
             }
         };
     }
+    static get states() {
+        return {
+            "consumption": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get methods() {
         return {
             "hide": {
@@ -155,7 +188,7 @@ export class MdsStatusBar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Hides the status bar.",
                     "tags": []
                 }
             }

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

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 /**
- * @slot default - Add `mds-tepper-bar-item` element/s.
+ * @slot - Add `mds-tepper-bar-item` element/s.
  * @slot content - Add `HTML elements` or `components`, one per mds-stepper-bar-item added
  * @part items - Selects the `items` container element wrapped in shadowDOM.
  * @part contents - Selects the `contents` container element wrapped in shadowDOM.
@@ -29,7 +29,7 @@ export class MdsStepperBar {
                 item.done = false;
                 if (key < this.currentItem) {
                     item.done = true;
-                    if (item.value) {
+                    if (item.value !== undefined && item.value !== '') {
                         values.push(item.value);
                     }
                 }
@@ -99,7 +99,7 @@ export class MdsStepperBar {
         });
     }
     render() {
-        return (h(Host, { key: 'a0b7e159765a3130fcc67b2e3a1146b0c43907ff' }, h("div", { key: '25d1984f704bc071cda8010ab382384d28b86273', class: "items", part: "items" }, h("slot", { key: 'f32c13a94bbce2e93f28ef23b2dfcaeec17269d1' })), h("div", { key: '7dc90454240058f41ce07f98bb53e4376346b582', class: "contents", part: "contents" }, h("slot", { key: '25185f4817e18132b066c01d9d98353e1f62b19e', 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 CHANGED Viewed

@@ -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;
   }
 }