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

@@ -84,6 +84,9 @@ mds-text {
     rgb(var(--tone-neutral-02, 244 244 244))
   );
   --mds-accordion-item-duration: var(--mds-accordion-duration, 300ms);
+  --private-accordion-item-duration: var(--mds-accordion-item-duration, 300ms);
+  --mds-accordion-item-transition-duration: var(--duration-500, 500ms);
+  --private-accordion-item-transition-duration: var(--mds-accordion-item-transition-duration);
   --mds-accordion-item-padding-selected: var(
     --mds-accordion-padding-selected,
     --spacing(400) 0 --spacing(800) 0
@@ -101,7 +104,7 @@ mds-text {
   margin-top: calc(-1 * var(--mds-accordion-item-border-width, 2px));
   padding: var(--mds-accordion-item-padding-unselected, 1rem 0 1rem 0);
   position: relative;
-  transition-duration: var(--duration-500, 500ms);
+  transition-duration: var(--private-accordion-item-transition-duration);
   transition-property: background-color, border-color, color, fill, margin, padding;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -144,7 +147,7 @@ mds-text {
   opacity: 0;
   overflow: hidden;
   padding-top: 0;
-  transition-duration: var(--mds-accordion-item-duration, 300ms);
+  transition-duration: var(--private-accordion-item-duration);
   transition-property: grid-template-rows, opacity, padding;
   transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 }
@@ -153,7 +156,7 @@ mds-text {
   display: grid;
   grid-template-columns: minmax(0, 100%);
   min-height: 0;
-  transition-duration: var(--mds-accordion-item-duration, 300ms);
+  transition-duration: var(--private-accordion-item-duration);
   transition-property: opacity, padding;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -163,7 +166,7 @@ mds-text {
   fill: var(--mds-accordion-item-color, rgb(var(--tone-neutral-03, 233 233 233)));
   transform: rotate(0deg);
-  transition-duration: var(--duration-500, 500ms);
+  transition-duration: var(--private-accordion-item-transition-duration);
   transition-property: transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -194,36 +197,39 @@ mds-text {
   transform: rotate(90deg);
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-accordion-item-duration: var(--mds-accordion-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). */
-  transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-accordion-item-duration: 0s;
+  --private-accordion-item-transition-duration: 0s;
 }
-:host-context(:root.pref-animation-reduce) .icon {
-  transition-duration: 0s;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-accordion-item-duration: var(--mds-accordion-duration, 0s);
-    transition-duration: 0s;
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-accordion-item-duration: 0s;
+    --private-accordion-item-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-accordion-item-border-color: var(--mds-accordion-border-color, rgb(var(--tone-neutral-06, 158 158 158)));
 }
 @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-accordion-item-border-color: var(
       --mds-accordion-border-color,
       rgb(var(--tone-neutral-06, 158 158 158))
@@ -231,14 +237,19 @@ 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-accordion-item-border-color: var(--mds-accordion-border-color, rgb(var(--tone-neutral-01, 255 255 255)));
   --mds-accordion-item-color: var(--mds-accordion-color, rgb(var(--tone-neutral-01, 255 255 255)));
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     --mds-accordion-item-border-color: var(
       --mds-accordion-border-color,
       rgb(var(--tone-neutral-01, 255 255 255))

package/dist/collection/components/mds-accordion-item/mds-accordion-item.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import miBaselineKeyboardArrowRight from "@icon/mi/baseline/keyboard-arrow-right.svg";
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add contents like `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add contents like `text string`, `HTML elements` or `components` to this slot.
  * @part content - the content wrapper of the `default` slot
  * @part icon - The arrow icon of the component
  * @part label - The text label of the component
@@ -22,8 +23,29 @@ export class MdsAccordionItem {
             this.unselectedEvent.emit({ id: this.element.id, selected: this.selected });
         };
     }
+    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: 'bbbd0e2fb054337847f318e13bff5a9d5f836f12' }, h("button", { key: 'e32a97a11a080c26c9783e7f9653c7df5bd46c98', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: 'd66dc3923030828e734bd0b31021980dc2de5a97', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: 'fb7b0ca39023ddf53bad7edf68464d62f6f0caa7', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: 'df38dae6c7d8f27ca4e000bc8bc18a9f8575f76c', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '8a932338cd7b4c87dca040d3730edbddfd1770d9', class: "content", id: "content" }, h("div", { key: '7314748049721c8c9c243e3135545e5265f9493e', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: '512b542a030897e6611612ae100e6b5f200f1e4a' })))));
+        return (h(Host, { key: '7b7e70c10cad91e1ec770f45167678e9eecd1d71', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("button", { key: '364db696fed629520dfa4199162a3ac84efa22e6', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '837db44c49d46677057f81f5e5c387180697082c', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: '49088fbc9e1de2e5cc9376042a6690289ac2c8e9', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '8e189cc02eeb3ded80561409c01a1b35e9372d82', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: 'cf8717811a3f4e3b2216bd8ab95114a83fa20316', class: "content", id: "content" }, h("div", { key: '5bef366096aee3cecebb9382721b1415fcfe48d6', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: '1dbcf23841df112d2d9d3cfa6e3909d7d9b284eb' })))));
     }
     static get is() { return "mds-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -106,6 +128,14 @@ export class MdsAccordionItem {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "selectedEvent",

package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.css CHANGED Viewed

@@ -51,14 +51,3 @@ mds-accordion-timer-item {
   display: block;
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 0s);
-  }
-}

package/dist/collection/components/mds-accordion-timer/mds-accordion-timer.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 /**
- * @slot default - Add `mds-accordion-timer-item` element/s.
+ * @slot - Add `mds-accordion-timer-item` element/s.
  */
 export class MdsAccordionTimer {
     constructor() {
@@ -101,7 +101,7 @@ export class MdsAccordionTimer {
     }
     onClickSelect(event) {
         this.clearIntervals();
-        if (this.selectedItem) {
+        if (this.selectedItem != null) {
             this.selectedItem.progress = 0;
         }
         this.setSelectedItem(event.detail.uuid);
@@ -111,7 +111,7 @@ export class MdsAccordionTimer {
     onSelect(event) {
         this.clearIntervals();
         this.paused = false;
-        if (this.selectedItem) {
+        if (this.selectedItem != null) {
             this.selectedItem.progress = 0;
         }
         this.setSelectedItem(event.detail.uuid);
@@ -139,7 +139,7 @@ export class MdsAccordionTimer {
         this.playTimer();
     }
     render() {
-        return (h(Host, { key: '83fbaf714fd50567fb7c035fb6344bea5fc55935' }, h("slot", { key: '3106401fa285586903177765544a76b976b5fd8e' })));
+        return (h(Host, { key: '6801e67ac8d8235b3c8610787fcddc6223123284' }, h("slot", { key: 'd9c3bebad4f570777a2d64a4ccfad242b22fd1e0' })));
     }
     static get is() { return "mds-accordion-timer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css CHANGED Viewed

@@ -64,13 +64,14 @@ mds-text {
     --spacing(100)
   );
   --mds-accordion-timer-item-duration: var(--mds-accordion-timer-duration, 500ms);
+  --private-accordion-timer-item-duration: var(--mds-accordion-timer-item-duration, 500ms);
   color: var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02, 244 244 244)));
   display: grid;
   padding-bottom: --spacing(400);
   padding-top: --spacing(400);
   position: relative;
-  transition-duration: var(--mds-accordion-timer-item-duration, 500ms);
+  transition-duration: var(--private-accordion-timer-item-duration);
   transition-property: color;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -113,7 +114,7 @@ mds-text {
   opacity: 0;
   overflow: hidden;
   padding-top: 0;
-  transition-duration: var(--mds-accordion-timer-item-duration, 500ms);
+  transition-duration: var(--private-accordion-timer-item-duration);
   transition-property: grid-template-rows, opacity, padding;
   transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 }
@@ -146,14 +147,21 @@ mds-text {
   padding-top: --spacing(400);
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-accordion-timer-item-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-accordion-timer-item-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-accordion-timer-item-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-accordion-timer-item-duration: 0s;
   }
 }

package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import miBaselineKeyboardArrowRight from "@icon/mi/baseline/keyboard-arrow-right.svg";
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add content like `text string`, `HTML elements` or `components` to this slot
+ * @slot - Add content like `text string`, `HTML elements` or `components` to this slot
  * @part content - the content wrapper of the `default` slot
  * @part icon - The arrow icon of the component
  * @part label - The text label of the component
@@ -47,6 +48,15 @@ export class MdsAccordionTimerItem {
             }
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     handleSelected(newValue) {
         this.progress = 0;
         if (newValue) {
@@ -55,7 +65,7 @@ export class MdsAccordionTimerItem {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e60d0ab86bb47b64dc7b21bdae10c8ed11e902b5', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, h("div", { key: 'fc6012667a251010fc868b9dd1c8b0603a4f5ce0', class: "row" }, h("mds-progress", { key: 'a2b5695c093e6c9068f6ef5daba855066336e27a', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", size: "sm", part: "progress" }), h("div", { key: 'ef96dd04f956cb2337d19b745c2d4126afdcfbd0', class: "accordion" }, h("button", { key: '513aeb07bbbfdc9731d4ee9c859f9dc6286d000c', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '29b009883c56c52530331593da726840774c5453', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: '98d4ddd516f761e279c6844023dfd133f43c3f70', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '99c14644569f3a0900322b898224aaf15eeb33b7', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '964bb74ed0704a92d5a493d733ead61789e4e8f3', class: "content", id: "content" }, h("div", { key: 'd0023fb03a93a3e12a5e1c1e4e1d7af5d378e5cd', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, h("slot", { key: 'ce44bbbbbcef87d2d634d60d060f86b51dcfeb92' })))))));
+        return (h(Host, { key: 'b4fd2f04a4823e78d8f06dd33d2132160a38de50', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave, "pref-animation": this.prefAnimation }, h("div", { key: 'b7763bd61fbb24261f4233e841a8f2298cc0fbf2', class: "row" }, h("mds-progress", { key: '6e7f677b567ad3bdc673f16696549e8e59384907', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", size: "sm", part: "progress" }), h("div", { key: 'f43f00a85db89e358900148e406d025285ff824e', class: "accordion" }, h("button", { key: '2b3fc9dba58f4fe3404f2a899ee0b5b5198f9982', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '637cd20f152fecdf9df48e5902b347623d83aa63', typography: this.typography, part: "label" }, this.description), h("mds-text", { key: 'ba9383c769d039a8e1a4b50650774134aecdb26d', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '2b883323b6cdd66e377fe44e6a7964fd377d66e1', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '391ff1c3b393c974f069f491a36f7578f1e09785', class: "content", id: "content" }, h("div", { key: '498a565a894ecac0ec827ee638aea4c5328e4d05', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, h("slot", { key: '556f485c06e3dc3b45dac8391e6b054d76bc48f7' })))))));
     }
     static get is() { return "mds-accordion-timer-item"; }
     static get encapsulation() { return "shadow"; }
@@ -198,6 +208,11 @@ export class MdsAccordionTimerItem {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "clickSelectEvent",

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

@@ -32,7 +32,7 @@ mds-avatar {
 }
 @container (max-width: 200px) {
-  :host-context(:not(.safari)) {
+  :host {
     flex-direction: column;
     justify-content: center;
     text-align: center;

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos.
  * @slot avatar - Insert an avatar image, it is **recommended** to add `mds-avatar` element.
  */
 export class MdsAuthor {
@@ -8,7 +8,7 @@ export class MdsAuthor {
         this.hasAvatar = this.hostElement.querySelector(':scope > [slot="avatar"]') !== null;
     }
     render() {
-        return (h(Host, { key: '5c5f497c1206c82632d9f1d43e654dcff7182078' }, this.hasAvatar && (h("div", { key: '96373e67f2d0bf1b8b95fccb0d769160314d2329', class: "avatar" }, h("slot", { key: '9c688c746f9f9e29ca9b5b87924d2e470190ab04', name: "avatar" }))), h("div", { key: 'e4b9ad107b06481bdefe107b088c28eeeffaf9c2', class: "info" }, h("slot", { key: 'cf278792b4d32d854ef522476cd3e93a4a2182df' }))));
+        return (h(Host, { key: '2b0e6730cb3fb2d7881f527430d2b04a0705fd1b' }, this.hasAvatar && (h("div", { key: 'ee84a202caf229318c122be05abd703a0a7a7719', class: "avatar" }, h("slot", { key: 'd9b69db0285af31444ca333d948eecf36445539b', name: "avatar" }))), h("div", { key: '6a51cca8c63a1967e79a464b846f09d9966055bd', class: "info" }, h("slot", { key: '65e3f059c8d4e5e432b0990ffaa41197fd8186ff' }))));
     }
     static get is() { return "mds-author"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,6 +55,8 @@ mds-img {
   --mds-avatar-color: rgb(var(--variant-primary-10, 0 49 142));
   --mds-avatar-radius: var(--radius-full, 1000px);
   --mds-avatar-initials-padding: 20%;
+  --mds-avatar-transition-duration: var(--duration-200, 200ms);
+  --private-avatar-transition-duration: var(--mds-avatar-transition-duration);
   aspect-ratio: 1/1;
   border-radius: var(--mds-avatar-radius, 1000px);
@@ -71,7 +73,7 @@ mds-img {
   color: transparent;
   display: inline-flex;
   overflow: hidden;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-avatar-transition-duration);
   transition-property: color, background-color, box-shadow, fill;
   width: 100%;
 }
@@ -142,18 +144,18 @@ mds-img {
 .icon {
   fill: var(--mds-avatar-color, rgb(var(--variant-primary-10, 0 49 142)));
   height: 100%;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-avatar-transition-duration);
   transition-property: fill;
   transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
   width: 100%;
 }
 @container (max-width: 24px) {
-  :host-context(:not(.safari)) .avatar--initials {
+  .avatar--initials {
     padding: 0 var(--mds-avatar-initials-padding, 20%);
   }
-  :host-context(:not(.safari)) .initials-text {
+  .initials-text {
     @apply font-black;
   }
 }
@@ -329,24 +331,30 @@ mds-img {
   }
 }
-:host-context(:root.pref-animation-reduce) .avatar,
-: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-avatar-transition-duration: 0s;
+}
-    .avatar,
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-avatar-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']) {
   .avatar--icon,
   .avatar--fallback,
   .avatar--initials {
@@ -355,8 +363,8 @@ mds-img {
 }
 @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])) {
     .avatar--icon,
     .avatar--fallback,
     .avatar--initials {

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import fitty from "fitty/dist/fitty.min.js";
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import { avatarVariant } from "./meta/variants";
 import miBaselinePerson from "@icon/mi/baseline/person.svg";
 /**
@@ -64,8 +65,15 @@ export class MdsAvatar {
             if (this.fittyInitialized)
                 this.removeFontResize();
         };
+        this.handleImgLoadError = () => {
+            this.loaded = true;
+            this.fallback = true;
+        };
+        this.handleImgLoadSuccess = () => {
+            this.loaded = true;
+        };
         this.checkInitialsVariant = () => {
-            if (this.initials) {
+            if (this.initials !== undefined && this.initials !== '') {
                 let cleanedInitials = this.initials
                     .toLowerCase()
                     .replace(/[^a-zA-Z0-9]+/g, '')
@@ -80,6 +88,19 @@ export class MdsAvatar {
             }
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentWillLoad() {
         this.checkInitialsVariant();
     }
@@ -87,10 +108,10 @@ export class MdsAvatar {
         if (this.src !== undefined) {
             this.loaded = false;
         }
-        if (this.initials) {
+        if (this.initials !== undefined && this.initials !== '') {
             this.checkText(this.initials);
         }
-        if (this.count) {
+        if (this.count !== undefined && this.count !== 0 && !Number.isNaN(this.count)) {
             this.checkText(this.count.toString());
         }
     }
@@ -98,9 +119,9 @@ export class MdsAvatar {
         if (this.textChanged) {
             // placed here becase @Watch('initials') is fired
             // BEFORE the element .fit is attached on shDOM
-            if (this.initials)
+            if (this.initials !== undefined && this.initials !== '')
                 this.checkText(this.initials);
-            if (this.count)
+            if (this.count !== undefined && this.count !== 0 && !Number.isNaN(this.count))
                 this.checkText(this.count.toString());
             this.textChanged = false;
         }
@@ -124,12 +145,26 @@ export class MdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'dcb0ca706de79f07684daea4efee5d1a69e43494' }, h("div", { key: '784a3d4ed4cbb382c7091894ed15664e38d82979', class: clsx('avatar', this.initials && !this.fallback && !this.src && 'avatar--initials', (this.fallback || (!this.icon && !this.initials && !this.src)) && 'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials && !this.count && !this.fallback && !this.src && (h("div", { key: '8ed5b7a608b1ff8b6e36947d8069c4a4932b8dca', class: "initials-text" }, h("span", { key: '6438aafad3d6f87081c56d61838a1e4cbaf23351', class: "fit" }, this.initials.substring(0, 2)))), this.count && !this.fallback && !this.src && (h("div", { key: 'c00430118c9adc6fed1ac3480b41854bfe9a2029', class: "initials-text" }, h("span", { key: '671ca6880e8c8e337efcf4266a3caca3d93910ce', class: "fit" }, "+", this.count))), this.src && !this.count && !this.fallback && !this.icon && (h("mds-img", { key: '290236542764aa0eff224bef9093931d3a6cc650', class: "image", loading: "lazy", onMdsImgLoadError: () => {
-                this.loaded = true;
-                this.fallback = true;
-            }, onMdsImgLoadSuccess: () => {
-                this.loaded = true;
-            }, part: "media", src: this.src })), this.icon && !this.initials && !this.count && (h("mds-icon", { key: '1a0a2d01fb411772a00891e3a420310118145025', class: "icon", part: "icon", name: this.icon })), (this.fallback || (!this.icon && !this.initials && !this.count && !this.src)) && (h("i", { key: '2e41fa86a08a034ce59ff64e8d95a3b837c645ee', class: "fallback-icon", innerHTML: miBaselinePerson })))));
+        return (h(Host, { key: '84e60aaa2c7f931e1c1b56ed0bbf401e96dcdc73', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast }, h("div", { key: '36901cad8920e9eb6372db2085d557b0e6047e4d', class: clsx('avatar', this.initials &&
+                !this.fallback &&
+                (this.src === undefined || this.src === '') &&
+                'avatar--initials', (this.fallback ||
+                ((this.icon === undefined || this.icon === '') &&
+                    (this.initials === undefined || this.initials === '') &&
+                    (this.src === undefined || this.src === ''))) &&
+                'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials &&
+            (this.count === undefined || this.count === 0 || Number.isNaN(this.count)) &&
+            !this.fallback &&
+            (this.src === undefined || this.src === '') && (h("div", { key: '36562791d88b71d89b8d6d380b8911a72a5d32f8', class: "initials-text" }, h("span", { key: 'fe8ad3478cf3514f6f137f862141d7ea1b66e448', class: "fit" }, this.initials.substring(0, 2)))), this.count && !this.fallback && (this.src === undefined || this.src === '') && (h("div", { key: '9ec6fb411ac1ba891d22b106bc22cf7434554d86', class: "initials-text" }, h("span", { key: '7e4d69c4dd0bf97a448690e6912942f25a69f4ad', class: "fit" }, "+", this.count))), this.src &&
+            (this.count === undefined || this.count === 0 || Number.isNaN(this.count)) &&
+            !this.fallback &&
+            (this.icon === undefined || this.icon === '') && (h("mds-img", { key: '7b47c1edc70953208a677cf373fea6f944e7fccf', class: "image", loading: "lazy", onMdsImgLoadError: this.handleImgLoadError, onMdsImgLoadSuccess: this.handleImgLoadSuccess, part: "media", src: this.src })), this.icon &&
+            (this.initials === undefined || this.initials === '') &&
+            (this.count === undefined || this.count === 0 || Number.isNaN(this.count)) && (h("mds-icon", { key: 'ee00461fd6fe6f349bea91ccc66b9f2f13c28122', class: "icon", part: "icon", name: this.icon })), (this.fallback ||
+            ((this.icon === undefined || this.icon === '') &&
+                (this.initials === undefined || this.initials === '') &&
+                (this.count === undefined || this.count === 0 || Number.isNaN(this.count)) &&
+                (this.src === undefined || this.src === ''))) && (h("i", { key: '084ae31c1ff096e218db3f95288aee2e450fb711', class: "fallback-icon", innerHTML: miBaselinePerson })))));
     }
     static get is() { return "mds-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -280,6 +315,8 @@ export class MdsAvatar {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
             "fallback": {},
             "loaded": {}
         };

package/dist/collection/components/mds-avatar-stack/mds-avatar-stack.css CHANGED Viewed

@@ -9,6 +9,31 @@ mds-avatar-stack-item {
   }
 }
+/* Size variants are driven from the parent: mds-avatar-stack[size] sets the
+ * active size/border/offset tokens on each slotted item via ::slotted, instead
+ * of the item reading its parent. The variant source tokens are the parent's
+ * own --mds-avatar-stack-<size>-* (no item prefix). Cross-browser (no
+ * :host-context); the item keeps its own md default on :host for standalone
+ * use, and ::slotted (outer tree) wins over that default inside a stack. */
+:host([size='sm']) ::slotted(mds-avatar-stack-item) {
+  --mds-avatar-stack-item-size: var(--mds-avatar-stack-sm-size, var(--spacing-900, 2.25rem));
+  --mds-avatar-stack-item-border: var(--mds-avatar-stack-sm-border, var(--spacing-50, 0.125rem));
+  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-sm-offset, 1.5);
+}
+:host([size='md']) ::slotted(mds-avatar-stack-item) {
+  --mds-avatar-stack-item-size: var(--mds-avatar-stack-md-size, var(--spacing-1200, 3rem));
+  --mds-avatar-stack-item-border: var(--mds-avatar-stack-md-border, var(--spacing-100, 0.25rem));
+  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-md-offset, 1.75);
+}
+:host([size='lg']) ::slotted(mds-avatar-stack-item) {
+  --mds-avatar-stack-item-size: var(--mds-avatar-stack-lg-size, var(--spacing-1500, 3.75rem));
+  --mds-avatar-stack-item-border: var(--mds-avatar-stack-lg-border, var(--spacing-100, 0.25rem));
+  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-lg-offset, 2);
+}
 /**
  * @prop --mds-avatar-stack-background: Background color for the avatar stack container

package/dist/collection/components/mds-avatar-stack/mds-avatar-stack.js CHANGED Viewed

@@ -1,10 +1,13 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - Add `mds-avatar-stack-item` elements to display in the stack.
+ */
 export class MdsAvatarStack {
     componentWillLoad() {
         this.items = this.host.querySelectorAll(':scope > mds-avatar-stack-item');
     }
     render() {
-        return (h(Host, { key: 'e57b0bdda7fe40f3c914df1e2954985f5b124560' }, h("slot", { key: '05586f1f84de3e29fb66290c2bf44b8608154aa4' }), this.total !== undefined && this.total - this.items.length > 0 && (h("mds-avatar-stack-item", { key: 'd24631df49ea987384eb30e85bcfc07f20d41698', count: this.total - this.items.length }))));
+        return (h(Host, { key: 'a60bd68436a0006d48b550bdc7f9e134824c8ca6' }, h("slot", { key: '9c600bfcf5b2baf490d431a75820b8d8d1bb4b9e' }), this.total !== undefined && this.total - this.items.length > 0 && (h("mds-avatar-stack-item", { key: '6164b8f843f4455e83ff57391da3ddbf9840881b', count: this.total - this.items.length }))));
     }
     static get is() { return "mds-avatar-stack"; }
     static get encapsulation() { return "shadow"; }