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

@maggioli-design-system/magma 2.0.0-beta.2 → 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 (1150) hide show

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

@@ -55,6 +55,8 @@ mds-text {
 }
 :host {
+  --mds-filter-item-transition-duration: var(--duration-200, 200ms);
+  --private-filter-item-transition-duration: var(--mds-filter-item-transition-duration);
   --mds-filter-item-count-background-default: rgb(var(--tone-neutral-08, 107 107 107));
   --mds-filter-item-count-color-default: rgb(var(--tone-neutral-02, 244 244 244));
   --mds-filter-item-count-background-selected: rgb(var(--tone-neutral-05, 197 197 197));
@@ -71,7 +73,7 @@ mds-text {
   gap: --spacing(100);
   justify-content: center;
   padding: --spacing(200) --spacing(400);
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-filter-item-transition-duration);
   transition-property: background-color, box-shadow, color, outline, outline-offset;
   transition-timing-function: var(--ease-out);
   user-select: none;
@@ -130,18 +132,31 @@ mds-text {
   color: var(--mds-filter-item-count-color-selected, rgb(var(--tone-neutral, 0 0 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-filter-item-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-filter-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'])) {
   background-color: rgb(var(--tone-neutral-10, 60 60 60));
   &:host([selected]:not([selected='false'])) {
@@ -155,8 +170,8 @@ mds-text {
 }
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     background-color: rgb(var(--tone-neutral-10, 60 60 60));
     &:host([selected]:not([selected='false'])) {
@@ -170,7 +185,12 @@ mds-text {
   }
 }
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) {
   &:host([selected]:not([selected='false'])),
   &:host(:hover) {
     box-shadow: var(--shadow-outline-strong-50);
@@ -178,8 +198,8 @@ mds-text {
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     &:host([selected]:not([selected='false'])),
     &:host(:hover) {
       box-shadow: var(--shadow-outline-strong-50);

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
+import { subscribePreference } from "../../common/preference";
 export class MdsFilterItem {
     constructor() {
         this.km = new KeyboardManager();
@@ -8,16 +9,35 @@ export class MdsFilterItem {
             this.selectedEvent.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;
+        });
+    }
     componentDidLoad() {
         this.km.addElement(this.element);
         this.km.attachClickBehavior();
     }
     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);
         this.km.detachClickBehavior();
     }
     render() {
         var _a;
-        return (h(Host, { key: '9d4686de0bb4371076bb1d78b428b09efd0946f3', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: '9c9c91f67e70442646a2846ab901e8e56de89064', "aria-hidden": "true", name: this.icon }), this.label && (h("mds-text", { key: '6299fdb29e9ed4a29c55c1c818ad0992fcda1b97', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (h("div", { key: '6df69e3386a6e6b01fc7262c0c70dd75731acd94', class: "count" }, h("mds-text", { key: '01380c1b2d11b56c6b244f5292ff4276c6866786', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
+        return (h(Host, { key: 'ebc068baa301a93988069f6b8c04ffcf716844e6', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon && h("mds-icon", { key: '7fec8ef34bb78a5fbc665c47534b015ec02bc68d', "aria-hidden": "true", name: this.icon }), this.label && (h("mds-text", { key: '556ad11dc7f67735acea552f78b79da8fd8b0d1e', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (h("div", { key: '5fafb0a462e56e68dc3a8e928e08692b41135129', class: "count" }, h("mds-text", { key: '4fdb750c3f12a25bd83d2cf5038d388ec58566e7', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
     }
     static get is() { return "mds-filter-item"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +169,14 @@ export class MdsFilterItem {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "selectedEvent",

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

@@ -272,31 +272,42 @@ mds-modal {
 }
 @container style(--mds-header-backdrop-show: false) {
-  :host-context(:not(.safari)) .backdrop {
+  .backdrop {
     display: none;
   }
 }
-: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-header-modal-icon-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 @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-header-modal-icon-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }
-:host-context(:root.pref-consumption-high) .backdrop {
+/* Consumption preference. The component mirrors the resolved level from <html>
+ * onto its host as pref-consumption (see subscribePreference in @common/preference);
+ * these plain shadow selectors then trim the backdrop cost. Cross-browser, no
+ * :host-context. */
+:host([pref-consumption='high']) .backdrop {
   --mds-header-backdrop-background-image: none;
 }
-:host-context(:root.pref-consumption-medium) .backdrop {
+:host([pref-consumption='medium']) .backdrop {
   --mds-header-backdrop-blur-strength: 1px;
 }
-:host-context(:root.pref-consumption-low) .backdrop {
+:host([pref-consumption='low']) .backdrop {
   --mds-header-backdrop-blur-strength: 0px;
   display: none;

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 // import clsx from 'clsx'
 /**
  * @part menu - The container element of the modal
@@ -18,9 +19,9 @@ export class MdsHeader {
          */
         this.appearance = 'stripe';
         /**
-         * Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`
+         * Hides the backdrop shown when the mds-header-bar attribute appearace is set to `inline`
          */
-        this.backdrop = true;
+        this.hideBackdrop = false;
         /**
          * Sets the visibility type of the hamburger menu of mds-header-bar
          */
@@ -135,7 +136,22 @@ export class MdsHeader {
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
+    connectedCallback() {
+        this.unsubscribeConsumption = subscribePreference('consumption', (value) => {
+            this.consumption = 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.unsubscribeConsumption) === 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);
         if (typeof window === 'undefined') {
             return;
         }
@@ -180,7 +196,7 @@ export class MdsHeader {
         }
     }
     render() {
-        return (h(Host, { key: '5128bc6c966e7953efd8e10ccc5bc50f17d75acd' }, this.backdrop && (h("div", { key: '9e56e7cf2a7a35b64e420379075a4927a261a0fe', class: "backdrop" }, h("div", { key: '0a6ccef3d03db7c08e3b73435413ca504833b12b', class: "backdrop-blur-item" }), h("div", { key: '22c1a00aed263989d6e89a0daad5e0840fc2260d', class: "backdrop-blur-item" }), h("div", { key: '4aba0c1c47f43f9a86e87884b8561c29b5564dc2', class: "backdrop-blur-item" }), h("div", { key: 'd43b86f9910d0d5542b9ed7aa49b5f251ad2a466', class: "backdrop-blur-item" }), h("div", { key: 'e1e77b70063e61209c839930017df200b91b6cae', class: "backdrop-blur-item" }), h("div", { key: 'fa60a8e58b29cc60fc95c89ecd47db0905fd9aac', class: "backdrop-blur-item" }), h("div", { key: '018ca6f46a7155c50cd3146ad703b941773b9214', class: "backdrop-blur-item" }), h("div", { key: 'b8eb26d49714c5e9d0df3486eafcea46a36a792e', class: "backdrop-blur-item" }), h("div", { key: 'b68ffd1fea3ecaa1489324e1807e0b8192181362', class: "backdrop-blur-item" }), h("div", { key: 'bf1a1fe44c9a8b3a90d0c8b325c2001c0af2cbb0', class: "backdrop-blur-item" }))), h("slot", { key: 'b457cbe705c13f1d4bd48b562417bdb8cc332ae5' }), this.hasMenu && (h("div", { key: '1cd40f7e1c4dd6a3c26a6277a7ac3256f2a39b2b', class: "menu", part: "menu" }, h("mds-modal", { key: '1568c0f8f76b2fa48bffa6b2b30fcd0caad6e845', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: 'b571fcaeef6763648a17ba8344522961b4f68994', name: "menu" }))))));
+        return (h(Host, { key: '97953a24f9b130d1f99dadc6f6c3f4c23caf6272', "pref-consumption": this.consumption, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, !this.hideBackdrop && (h("div", { key: 'f271e2a67f6a244927b0f5a219da6680eae4f1a2', class: "backdrop" }, h("div", { key: '68474c76bfe1d12b58ab87f5f79c68d0922da2c0', class: "backdrop-blur-item" }), h("div", { key: '06fea728d26324dae0e6f4247287fb4b8e8e4b54', class: "backdrop-blur-item" }), h("div", { key: 'ddb4e76a63a86312555756c641ff5d2ca8cb12c6', class: "backdrop-blur-item" }), h("div", { key: 'dc971c217e599227047fabf79ac9f9f99fa7849f', class: "backdrop-blur-item" }), h("div", { key: 'e84678f00349431d723b32acf50653c335b4f612', class: "backdrop-blur-item" }), h("div", { key: '2c139eeaca64cc2f22d6ce95ded41f0e5b87afa8', class: "backdrop-blur-item" }), h("div", { key: 'c6fe66897d0580051b9e1f045419d8021802dfed', class: "backdrop-blur-item" }), h("div", { key: '8237d3e49e4c782b9dbb41c31fdb1291ea6cabfb', class: "backdrop-blur-item" }), h("div", { key: 'a87ee5faf0ee0fc3e86a4a70f708c126894c423b', class: "backdrop-blur-item" }), h("div", { key: '5289da76b9d4ee0e0d73c5a0275bb737558ab96d', class: "backdrop-blur-item" }))), h("slot", { key: '3b68fcf1e23725b767dc791991e28e22d18f8633' }), this.hasMenu && (h("div", { key: 'd54f8cba235e3217833087adee0c3989fad8acc0', class: "menu", part: "menu" }, h("mds-modal", { key: '0f540700417c5caa8fc2d2336814246375491c53', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '25ac67a9dbedd7d50613bfe5acfabeb128de7193', name: "menu" }))))));
     }
     static get is() { return "mds-header"; }
     static get encapsulation() { return "shadow"; }
@@ -254,7 +270,7 @@ export class MdsHeader {
                 "reflect": true,
                 "attribute": "auto-hide"
             },
-            "backdrop": {
+            "hideBackdrop": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -266,13 +282,13 @@ export class MdsHeader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`"
+                    "text": "Hides the backdrop shown when the mds-header-bar attribute appearace is set to `inline`"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "backdrop",
-                "defaultValue": "true"
+                "attribute": "hide-backdrop",
+                "defaultValue": "false"
             },
             "menu": {
                 "type": "string",
@@ -373,7 +389,10 @@ export class MdsHeader {
     static get states() {
         return {
             "hasMenu": {},
-            "isOpened": {}
+            "isOpened": {},
+            "consumption": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
         };
     }
     static get events() {

package/dist/collection/components/mds-header/test/mds-header.stories.js CHANGED Viewed

@@ -14,8 +14,8 @@ export default {
             options: appearanceSetDictionary,
             control: { type: 'select' },
         },
-        backdrop: {
-            description: 'Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`',
+        'hide-backdrop': {
+            description: 'Hides the backdrop shown when the mds-header-bar attribute appearace is set to `inline`',
             type: 'boolean',
         },
         'auto-hide': {

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

@@ -22,6 +22,8 @@ mds-button {
 :host {
   --mds-header-bar-hamburger-color: rgb(var(--tone-neutral-03, 233 233 233));
+  --mds-header-bar-transition-duration: 500ms;
+  --private-header-bar-transition-duration: var(--mds-header-bar-transition-duration);
   background-color: rgb(var(--tone-neutral, 0 0 0));
   box-shadow: var(--shadow-md-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06));
@@ -34,7 +36,7 @@ mds-button {
   max-width: 100%;
   padding: --spacing(400) --spacing(600);
   position: fixed;
-  transition-duration: 500ms;
+  transition-duration: var(--private-header-bar-transition-duration);
   transition-property: background-color, border-radius, margin, max-width, transform, width;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
   width: auto;
@@ -92,39 +94,57 @@ mds-button {
   display: none;
 }
-: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-header-bar-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-header-bar-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'])) {
   background-color: rgb(var(--tone-neutral-10, 60 60 60));
   box-shadow: var(--shadow-outline), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
 }
 @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])) {
     background-color: rgb(var(--tone-neutral-10, 60 60 60));
     box-shadow: var(--shadow-outline), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
   }
 }
-: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-header-bar-hamburger-color: rgb(var(--tone-neutral-01, 255 255 255));
   box-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
 }
 @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-header-bar-hamburger-color: rgb(var(--tone-neutral-01, 255 255 255));
     box-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));

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

@@ -1,5 +1,6 @@
 import miRoundMenu from "@icon/mi/round/menu.svg";
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part actions - Selects the element which wraps `nav` and `hamburger` parts
  * @part hamburger - Selects the `hamburger` menu action element
@@ -24,6 +25,27 @@ export class MdsHeaderBar {
             (_a = this.host.closest('mds-header')) === null || _a === void 0 ? void 0 : _a.setOpened(true);
         };
     }
+    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.hasNav = this.host.querySelector(':scope > [slot="nav"]') !== null;
     }
@@ -35,7 +57,7 @@ export class MdsHeaderBar {
         this.isOpened = isOpened;
     }
     render() {
-        return (h(Host, { key: '6dd35a371fa5c356edb5f3dcdb3a7055ef59088b' }, h("div", { key: '2550f4a19b20204359c89fc7ba4d352ccc7fae68', class: "content", part: "content" }, h("div", { key: '41f1db71c01221c51e763d155ab701bd6c8ceb53', class: "logo" }, h("slot", { key: '2dec39a7e14263b3c2af14d7bc2892355c369db7' })), h("div", { key: '4b2191c4b205abc0a56bab40d8266a81fcd5dcff', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: 'e0211adaa22e20fdfc213db906577704b55d752c', class: "nav", part: "nav" }, h("slot", { key: 'bd5aab236894a32ee0a46c1fbeebfcc386214dc3', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: '233bd731f391808dec162ff73cc9a1ed6453998f', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
+        return (h(Host, { key: 'b1c85dfc8206bae1df8c6646da41ad85775c0eb7', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '3f73b7a9ffbf542b60c81e313b1164f6208eb4f2', class: "content", part: "content" }, h("div", { key: '47f423bd40c504c2e058152ce8ca9f0a8ca45326', class: "logo" }, h("slot", { key: 'd0a7f9e9d818fd3e02418bd0cd570eb292cf1095' })), h("div", { key: '4fe0b5d41e3c38ab175a71c8f949ab40c98e30fa', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: '4668b44604cd6619d4b8b894e4bb2086abea0e15', class: "nav", part: "nav" }, h("slot", { key: '0d75f2f06c05c5613b107d3a96a2ecba2bdedcb6', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: '225c889c6731cd4db3866ec57f996348f9475ea9', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
     }
     static get is() { return "mds-header-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -109,6 +131,10 @@ export class MdsHeaderBar {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "isOpened": {}
         };
     }

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

@@ -6,9 +6,9 @@ import miOutlineHelp from "@icon/mi/outline/help-outline.svg";
 export class MdsHelp {
     constructor() {
         /**
-         * If set, the component will be placed automatically near it's caller.
+         * If set, the component will not be placed automatically near it's caller.
          */
-        this.autoPlacement = true;
+        this.disableAutoPlacement = false;
         /**
          * Specifies where the component should be placed relative to the caller.
          */
@@ -16,7 +16,7 @@ export class MdsHelp {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a72b1f2f02ef754022738d9ae5d8f3351541eb06' }, h("mds-icon", { key: 'c0f180c4abe2c5d3c4e512e14f9761aa36906f4f', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: 'c08d15295a145809f35aab2d7f198aa71476ee91', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: 'd3dd10afd797f2079896589da73615fb97dc3d6e' }))));
+        return (h(Host, { key: 'b56b6de29019db8bf7f8b6ae1f133f8625e15e22' }, h("mds-icon", { key: '927cf78c5d30794947cf5898568ae44847ef4749', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: '6422a433ec9bab77e9331efeef28e0cbbcb18393', placement: this.placement, disableAutoPlacement: this.disableAutoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '5b238d4131de924165a9d2986cd172e122ceacda' }))));
     }
     static get is() { return "mds-help"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,7 @@ export class MdsHelp {
                 "reflect": false,
                 "attribute": "icon"
             },
-            "autoPlacement": {
+            "disableAutoPlacement": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -63,13 +63,13 @@ export class MdsHelp {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set, the component will be placed automatically near it's caller."
+                    "text": "If set, the component will not be placed automatically near it's caller."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "auto-placement",
-                "defaultValue": "true"
+                "attribute": "disable-auto-placement",
+                "defaultValue": "false"
             },
             "placement": {
                 "type": "string",

package/dist/collection/components/mds-horizontal-scroll/mds-horizontal-scroll.css CHANGED Viewed

@@ -24,13 +24,11 @@ mds-button {
  * @prop --mds-horizontal-scroll-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)
  */
-/* ❌ Not supported: scroll-behavior cannot be expressed in @property syntax
 @property --mds-horizontal-scroll-behavior {
   inherits: false;
-  syntax: "auto | smooth";
   initial-value: smooth;
+  syntax: "auto | smooth";
 }
-*/
 @property --mds-horizontal-scroll-dots-gap {
   inherits: false;
@@ -159,6 +157,15 @@ mds-button {
   width: 100%;
 }
+/* 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-horizontal-scroll-behavior: auto;
+  }
+}
 .navigation {
   border-radius: 1000px;
   display: none;
@@ -178,7 +185,7 @@ mds-button {
   padding-bottom: var(--mds-horizontal-scroll-contents-padding, --spacing(600));
   padding-top: var(--mds-horizontal-scroll-contents-padding, --spacing(600));
   position: relative;
-  scroll-behavior: var(--mds-horizontal-scroll-behavior);
+  scroll-behavior: var(--mds-horizontal-scroll-behavior, smooth);
   scroll-padding: var(--mds-horizontal-scroll-contents-scroll-padding, 0 --spacing(600));
   scroll-snap-type: x mandatory;
   width: 100%;
@@ -233,17 +240,6 @@ right: clamp(calc(var(--mds-horizontal-scroll-gap) / 2), var(--position), var(--
   }
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-horizontal-scroll-behavior: auto;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-horizontal-scroll-behavior: auto;
-  }
-}
 .navigation--back {
   --position: calc(
     var(--scroll-margin) - var(--mds-horizontal-scroll-gap, --spacing(600)) -

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

@@ -12,13 +12,19 @@
   width: 100%;
 }
-: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'])) {
   background-color: 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])) {
     background-color: rgb(var(--tone-neutral-07, 134 134 134));
   }
 }

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

@@ -1,7 +1,21 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 export class MdsHr {
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     render() {
-        return h(Host, { key: 'c58a2de198d533e91d8bd077c444e0744933c25a' });
+        return h(Host, { key: '655c896905ebfdb8f5a170f108f338edde6a4d4f', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme });
     }
     static get is() { return "mds-hr"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +29,10 @@ export class MdsHr {
             "$": ["mds-hr.css"]
         };
     }
+    static get states() {
+        return {
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }

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

@@ -15,15 +15,13 @@ export class MdsIcon {
         this.updateIcon();
         IconsSetService.registerListener(() => this.updateIcon());
     }
-    static setSvgPathStatic(path) {
-        IconsSetService.setSvgPath(path);
-    }
     /**
      * Set the path to the directory of svg files
      * @param svgPath path to the directory of svg files
      */
     async setSvgPath(svgPath) {
         IconsSetService.setSvgPath(svgPath);
+        return Promise.resolve();
     }
     async updateIcon() {
         if (this.name === '')
@@ -39,7 +37,7 @@ export class MdsIcon {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: 'adb18482be69f88c754a524b4554574c71d253e8' }, this.svgHTML && h("i", { key: '434a961761ac22d193bccfa8fbb8f5fca7d1d61e', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: '8d95b94dbe7f22e136567cb681e44479f5c1be7a' }, this.svgHTML && h("i", { key: 'e9808177023e9521abf570b85302b65e43f9e0d8', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     static get is() { return "mds-icon"; }
     static get encapsulation() { return "shadow"; }