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

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

@@ -132,6 +132,58 @@ export class MdsCalendar {
                 this.updateCalendar().then(() => this.setDates());
             });
         };
+        this.handlePrev = (event) => {
+            if (this.currentView === 'calendar') {
+                event.stopPropagation();
+                this.changeMonth(-1);
+            }
+            else if (this.currentView === 'years') {
+                event.stopPropagation();
+                this.selectedYear -= 10;
+            }
+            else {
+                event.stopPropagation();
+            }
+        };
+        this.handleNext = (event) => {
+            if (this.currentView === 'calendar') {
+                event.stopPropagation();
+                this.changeMonth(1);
+            }
+            else if (this.currentView === 'years') {
+                event.stopPropagation();
+                this.selectedYear += 10;
+            }
+            else {
+                event.stopPropagation();
+            }
+        };
+        this.handleCellClick = (dayInfo) => (event) => {
+            event.stopPropagation();
+            const target = event.currentTarget;
+            if (this.rangePicker)
+                this.handleRange(target, dayInfo);
+            else
+                this.handleSingleSelection(target, dayInfo);
+        };
+        this.handleMonthSelect = (month) => (event) => {
+            event.stopPropagation();
+            this.currentDate = this.currentDate.set({ month });
+            this.currentMonth = this.currentDate.toFormat('MMMM');
+            this.currentView = 'calendar';
+            this.updateCalendar().then(() => {
+                requestAnimationFrame(() => this.setDates());
+            });
+        };
+        this.handleYearSelect = (year) => (event) => {
+            event.stopPropagation();
+            this.currentDate = this.currentDate.set({ year });
+            this.currentYear = year.toString();
+            this.currentView = 'calendar';
+            this.updateCalendar().then(() => {
+                requestAnimationFrame(() => this.setDates());
+            });
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -544,79 +596,29 @@ export class MdsCalendar {
             this.datesEmitter.emit({ startDate: this.internalStartDate });
         }
     }
+    isDateDisabled(date) {
+        if (this.min !== null && this.min !== '' && date < DateTime.fromISO(this.min)) {
+            return true;
+        }
+        if (this.max !== null && this.max !== '' && date > DateTime.fromISO(this.max)) {
+            return true;
+        }
+        return undefined;
+    }
     render() {
-        return (h(Host, { key: '1eb387ba6abf7eca71b0fc607c7005ce29a61ead' }, h("div", { key: '0119ec58bd3b3787c855c37d23330213f2f451dd', class: clsx('calendar-preselection', (this.showPreselection || this.hasPreselection) &&
-                'calendar-preselection--has-preselection') }, h("slot", { key: '0d14d1aedf9fc330bbc5378e9be16d870f46e46f', name: "preselection" })), h("div", { key: '2ad32a9c10cf82522611857dc2024b0e725c686b', class: "calendar-view" }, h("nav", { key: 'e99cd48ef3430e3681fe95bbccebc44516218bd9' }, this.showPreviousButton && (h("mds-button", { key: '21286c151fd2cb5b4c48f633d7889a439099510c', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "text", onClick: (event) => {
-                if (this.currentView === 'calendar') {
-                    event.stopPropagation();
-                    this.changeMonth(-1);
-                }
-                else if (this.currentView === 'years') {
-                    event.stopPropagation();
-                    this.selectedYear -= 10;
-                }
-                else {
-                    event.stopPropagation();
-                }
-            } })), h("div", { key: 'fa9ca6714345f63863ff8311b0890872a26c21a5', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (h("mds-button", { key: 'e0d20e39741b9434fb970fc384a0e18ac77f34bb', class: "action-month", truncate: "none", variant: "dark", tone: "text", label: this.currentMonth, onClick: this.handleMonthActionClick })), (this.currentView === 'calendar' || this.currentView === 'years') && (h("mds-button", { key: 'c8046b37184632df0dc142bbe25efd0e5b95373c', class: "action-year", truncate: "none", variant: "dark", tone: "text", label: this.currentYear, onClick: this.handleYearActionClick }))), this.showNextButton && (h("mds-button", { key: '4b93409bdf7f775af4f42f8f160f663ec6fcd970', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "text", onClick: (event) => {
-                if (this.currentView === 'calendar') {
-                    event.stopPropagation();
-                    this.changeMonth(1);
-                }
-                else if (this.currentView === 'years') {
-                    event.stopPropagation();
-                    this.selectedYear += 10;
-                }
-                else {
-                    event.stopPropagation();
-                }
-            } }))), this.currentView === 'calendar' && (h("section", { key: '0ac4fb2d6b5099b675a4b07c4dbcd0e839e05721', class: "month-view" }, h("header", { key: 'dbb841edaa6435521e128eef973db34cbe98568f', class: "month-view__days-names" }, this.weekdays.map((day) => (h("mds-button", { class: "week-day-name", variant: "dark", tone: "text", label: day })))), h("div", { key: '211d488ff233741097cf28ca5039a0591da999e3', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (h("mds-calendar-cell", { key: index, today: DateTime.now().toFormat('yyyy-MM-dd') === dayInfo.date.toFormat('yyyy-MM-dd'), date: dayInfo.date.toFormat('yyyy-MM-dd'), month: dayInfo.isCurrentMonth ? 'current' : 'other', disabled: (() => {
-                if (this.min !== null &&
-                    this.min !== '' &&
-                    dayInfo.date < DateTime.fromISO(this.min)) {
-                    return true;
-                }
-                if (this.max !== null &&
-                    this.max !== '' &&
-                    dayInfo.date > DateTime.fromISO(this.max)) {
-                    return true;
-                }
-                return undefined;
-            })(), onClick: (event) => {
-                event.stopPropagation();
-                const target = event.currentTarget;
-                if (this.rangePicker)
-                    this.handleRange(target, dayInfo.date);
-                else
-                    this.handleSingleSelection(target, dayInfo.date);
-            }, title: dayInfo.date
+        return (h(Host, { key: 'eae79a23fef07ad0c39289138c1d9d201d01fdb8' }, h("div", { key: '981c8f338f2bb75ae160ed026964df32519cf7da', class: clsx('calendar-preselection', (this.showPreselection || this.hasPreselection) &&
+                'calendar-preselection--has-preselection') }, h("slot", { key: '5603f44dbaeea662b8717633333fad6ec82e7fd3', name: "preselection" })), h("div", { key: '666c4a41d8ea01c0dd4ec23f58c6cefbd077a6d8', class: "calendar-view" }, h("nav", { key: 'f5a49d71045f85a8d816fdd933a12a16f7da81d2' }, this.showPreviousButton && (h("mds-button", { key: 'f2d618d0030437a32224eccc60a44c975dc118d6', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "text", onClick: this.handlePrev })), h("div", { key: '67e29dee62c2c500b30cb3b9efa480c28ba2f212', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (h("mds-button", { key: '0e9df902f7d565f412fa9d3d443b5f93e142ce20', class: "action-month", truncate: "none", variant: "dark", tone: "text", label: this.currentMonth, onClick: this.handleMonthActionClick })), (this.currentView === 'calendar' || this.currentView === 'years') && (h("mds-button", { key: '1ae69a19bbdd472220d3c638f00549626875684c', class: "action-year", truncate: "none", variant: "dark", tone: "text", label: this.currentYear, onClick: this.handleYearActionClick }))), this.showNextButton && (h("mds-button", { key: 'c47a07e2eee26da908658c8038a3855c13a4dcdc', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "text", onClick: this.handleNext }))), this.currentView === 'calendar' && (h("section", { key: 'e346703e4efa4251a3277bf1fbabf5686337797a', class: "month-view" }, h("header", { key: 'c14e9f373b6296e22fc80b361f2235a20aaa5ddc', class: "month-view__days-names" }, this.weekdays.map((day) => (h("mds-button", { class: "week-day-name", variant: "dark", tone: "text", label: day })))), h("div", { key: '4a80ca577d0c84b538e18ddff65eac0feccdef1d', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (h("mds-calendar-cell", { key: index, today: DateTime.now().toFormat('yyyy-MM-dd') === dayInfo.date.toFormat('yyyy-MM-dd'), date: dayInfo.date.toFormat('yyyy-MM-dd'), month: dayInfo.isCurrentMonth ? 'current' : 'other', disabled: this.isDateDisabled(dayInfo.date), onClick: this.handleCellClick(dayInfo.date), title: dayInfo.date
                 .setLocale(this.language)
                 .toFormat('cccc d LLLL')
-                .replace(/^./, (char) => char.toUpperCase()), label: dayInfo.date.toFormat('dd') })))))), this.currentView === 'months' && (h("section", { key: '4676197c1020dc31d126ca3dd25c018d5fd4531d', class: "month-selection" }, h("header", { key: '19efaa277ef13ccb5b04896c9d93a4c2a71df374', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
+                .replace(/^./, (char) => char.toUpperCase()), label: dayInfo.date.toFormat('dd') })))))), this.currentView === 'months' && (h("section", { key: '605c67fd9b2f4dab967a2d0d2f59a3a1f8c3d970', class: "month-selection" }, h("header", { key: '1e6a1edf56452ad68ab75740a99dfcb858905199', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
             const monthName = DateTime.local()
                 .set({ month: index + 1 })
                 .setLocale(this.language)
                 .toFormat('MMMM');
-            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: monthName, onClick: (event) => {
-                    event.stopPropagation();
-                    this.currentDate = this.currentDate.set({ month: index + 1 });
-                    this.currentMonth = this.currentDate.toFormat('MMMM');
-                    this.currentView = 'calendar';
-                    this.updateCalendar().then(() => {
-                        requestAnimationFrame(() => this.setDates());
-                    });
-                } }));
-        })))), this.currentView === 'years' && (h("section", { key: 'e854ef954fd530baa48a5044de94ac8389853a12', class: "year-selection" }, h("header", { key: '7175d42c0853411c9a0b70be855f49e1cdc1ec60', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
+            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: monthName, onClick: this.handleMonthSelect(index + 1) }));
+        })))), this.currentView === 'years' && (h("section", { key: 'd58540f61197bee490b93d9097913d54cb7d7468', class: "year-selection" }, h("header", { key: '24a0f2cb86888f412e19053d64815173e82570a8', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
             const year = this.selectedYear + index;
-            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: `${year}`, onClick: (event) => {
-                    event.stopPropagation();
-                    this.currentDate = this.currentDate.set({ year });
-                    this.currentYear = year.toString();
-                    this.currentView = 'calendar';
-                    this.updateCalendar().then(() => {
-                        requestAnimationFrame(() => this.setDates());
-                    });
-                } }));
+            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: `${year}`, onClick: this.handleYearSelect(year) }));
         })))))));
     }
     static get is() { return "mds-calendar"; }

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

@@ -253,26 +253,37 @@ mds-card-media {
   }
 }
 
-: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, 0 0 0));
   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])) {
     background-color: rgb(var(--tone-neutral, 0 0 0));
     box-shadow: var(--shadow-outline-light);
   }
 }
 
-: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']) {
   box-shadow: var(--shadow-outline-50), 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-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     box-shadow: var(--shadow-outline-50), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
   }
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import clsx from "clsx";
 /**
  * @part layout - The layout element that wraps the slotted content
@@ -10,9 +11,26 @@ import clsx from "clsx";
 export class MdsCard {
     constructor() {
         /**
-         * Enables automatic responsive behavior based on container queries
+         * Disables the automatic responsive behavior based on container queries
          */
-        this.autoGrid = true;
+        this.disableAutoGrid = false;
+    }
+    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);
     }
     componentWillLoad() {
         this.layout = Array.from(this.host.children)
@@ -29,7 +47,7 @@ export class MdsCard {
             .reduce((prev, curr) => prev + curr.charAt(0), '');
     }
     render() {
-        return (h(Host, { key: '29ed24cfe97cc5d2cc898cf26df0e4251ed4555f' }, h("div", { key: '10c741aefac2067595b80c88879700af7c088824', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "layout" }, h("slot", { key: 'ee1956eefa0e1a1715592db6b7790a6120e8fb34', name: "media" }), h("slot", { key: '8aefb8b2cb53dfc9ecfa45183988ec7a8db45524', name: "header" }), h("slot", { key: '3cb04f02b82f2fd314a5e20f169c4efea628985c', name: "content" }), h("slot", { key: 'e87dd33aae38437af938120c2de966d361032228', name: "footer" }))));
+        return (h(Host, { key: 'fd15480d244339417b806f9d9e574f746a48ad6c', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '2b71e79d7281a5031b58493b704d77dfb9e5997c', class: clsx('layout', this.layout && `layout--${this.layout}`, this.disableAutoGrid ? 'layout--disabled' : ''), part: "layout" }, h("slot", { key: '8c96dc8a8bf67be1a26c54f6d29b518ffa5fe26f', name: "media" }), h("slot", { key: '613c5960554f6bfdceef39e71c45ca32ecf2d923', name: "header" }), h("slot", { key: 'ce4373aaf5f1811ade4e1a840e8cf44ddc3bbfa1', name: "content" }), h("slot", { key: '72bc28eded2e0f4c000e14cdf2f5ad28a3bf4f10', name: "footer" }))));
     }
     static get is() { return "mds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -45,7 +63,7 @@ export class MdsCard {
     }
     static get properties() {
         return {
-            "autoGrid": {
+            "disableAutoGrid": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -57,18 +75,21 @@ export class MdsCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables automatic responsive behavior based on container queries"
+                    "text": "Disables the automatic responsive behavior based on container queries"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "auto-grid",
-                "defaultValue": "true"
+                "attribute": "disable-auto-grid",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "layout": {}
         };
     }

package/dist/collection/components/mds-card/test/mds-card.stories.js

@@ -3,9 +3,9 @@ import { URLs } from "../../mds-img/meta/storybook";
 export default {
     title: 'Layout / Card',
     argTypes: {
-        'auto-grid': {
+        'disable-auto-grid': {
             type: { name: 'boolean' },
-            description: 'Enables automatic responsive behavior based on container queries',
+            description: 'Disables the automatic responsive behavior based on container queries',
         },
     },
 };
@@ -32,7 +32,7 @@ export const Default = {
 export const FullCardCustomSlots = {
     render: CustomSlotsTemplate,
     args: {
-        'auto-grid': false,
+        'disable-auto-grid': true,
     },
 };
 export const LayoutHeaderMediaContentFooter = {

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

@@ -82,6 +82,10 @@ mds-text {
   --mds-chip-icon-color: rgb(var(--tone-neutral, 0 0 0));
   --mds-chip-opacity-disabled: 0.5;
   --mds-chip-shadow: var(--shadow-sm-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1));
+  --mds-chip-transition-duration: var(--duration-150, 150ms);
+  --mds-chip-label-transition-duration: var(--duration-200, 200ms);
+  --private-chip-transition-duration: var(--mds-chip-transition-duration);
+  --private-chip-label-transition-duration: var(--mds-chip-label-transition-duration);
 
   align-items: center;
   background-color: var(--mds-chip-background, rgb(var(--tone-neutral, 0 0 0)));
@@ -97,7 +101,7 @@ mds-text {
   max-width: min-content;
   min-width: min-content;
   padding: 0 --spacing(50);
-  transition-duration: var(--duration-150, 150ms);
+  transition-duration: var(--private-chip-transition-duration);
   transition-property: background-color, border-color, box-shadow, color, opacity;
   transition-timing-function: var(--ease-in-out-quad, cubic-bezier(0.455, 0.03, 0.515, 0.955));
 }
@@ -126,7 +130,7 @@ mds-text {
   border-radius: 1000px;
   flex-grow: 1;
   text-decoration-color: transparent;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-chip-label-transition-duration);
   transition-property: color, text-decoration-color, outline, outline-offset;
   transition-timing-function: var(--ease-out-quad, cubic-bezier(0.25, 0.46, 0.45, 0.94));
 }
@@ -167,7 +171,7 @@ mds-text {
   fill: var(--mds-chip-icon-color, rgb(var(--tone-neutral, 0 0 0)));
   height: --spacing(400);
   transition: fill;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-chip-label-transition-duration);
   width: --spacing(400);
 }
 
@@ -501,43 +505,53 @@ mds-text {
   --mds-chip-border: rgb(var(--label-yellow-06, 188 143 6));
 }
 
-: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). */
 
-  .label,
-  .icon {
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-chip-transition-duration: 0s;
+  --private-chip-label-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
-
-    .label,
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-chip-transition-duration: 0s;
+    --private-chip-label-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-chip-background: rgb(var(--tone-neutral-08, 107 107 107));
 
   box-shadow: var(--shadow-outline);
 }
 
 @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-chip-background: rgb(var(--tone-neutral-08, 107 107 107));
 
     box-shadow: var(--shadow-outline);
   }
 }
 
-: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-chip-background: rgb(var(--tone-neutral, 0 0 0));
   --mds-chip-color: rgb(var(--tone-neutral-02, 244 244 244));
   --mds-chip-icon-background-selected: rgb(var(--variant-primary-03, 211 226 255));
@@ -551,8 +565,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])) {
     --mds-chip-background: rgb(var(--tone-neutral, 0 0 0));
     --mds-chip-color: rgb(var(--tone-neutral-02, 244 244 244));
     --mds-chip-icon-background-selected: rgb(var(--variant-primary-03, 211 226 255));

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

@@ -3,6 +3,7 @@ import miBaselineCancel from "@icon/mi/baseline/cancel.svg";
 import { setAttributeIfEmpty } from "../../common/aria";
 import { KeyboardManager } from "../../common/keyboard-manager";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -100,11 +101,30 @@ export class MdsChip {
             this.handleClickableKeyboard(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);
         this.km.detachClickBehavior('label');
     }
     render() {
-        return (h(Host, { key: 'a2ff34f9ecfc5f8fa6cb7ab399eb34b2f0c2cf04', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && (h("div", { key: '78e888b4c83cd44f05bbbd1377863c5008bfe328', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '19fc511e306b8a7cc25daf1596e932bb88dec748', class: "icon", name: this.icon }))), h("div", { key: 'ef990de72874ab99987ad8e74ee93f43bdf54dc9', class: "label-wrapper" }, this.clickable ? (h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)) : (h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label))), this.deletable && (h("mds-button", { key: '09edff4f0b1320017ea029742fa9b8d199622cab', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler, title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "text", size: "sm" }))));
+        return (h(Host, { key: 'c2f08773194dec05f5671d356978abee68813a7c', "aria-disabled": this.disabled ? 'true' : 'false', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon && (h("div", { key: 'd7de040a76d6b63366a0020bdaeb9cc1ec374bdd', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '6dcbd2f0e2648237b6adb1c28f59d21d9936c528', class: "icon", name: this.icon }))), h("div", { key: 'f4093b2a1c9e028b17a7a23cd493d87e83570842', class: "label-wrapper" }, this.clickable ? (h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)) : (h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label))), this.deletable && (h("mds-button", { key: '45a231ebae85b18661dcd0653efcc6bc46a4640c', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler, title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "text", size: "sm" }))));
     }
     static get is() { return "mds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -313,6 +333,10 @@ export class MdsChip {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }

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

@@ -41,6 +41,7 @@
 
 :host {
   --mds-details-duration: 300ms;
+  --private-details-duration: var(--mds-details-duration, 300ms);
   --mds-details-icon-color: rgb(var(--variant-primary-04, 184 208 255));
   --mds-details-helper-icon-color: rgb(var(--tone-neutral-03, 233 233 233));
 
@@ -63,7 +64,7 @@
   overflow: hidden;
   padding-top: 0;
   pointer-events: none;
-  transition-duration: var(--mds-details-duration, 300ms);
+  transition-duration: var(--private-details-duration);
   transition-property: grid-template-rows, opacity, padding;
 }
 
@@ -128,25 +129,37 @@
   gap: --spacing(400);
 }
 
-:host-context(:root.pref-animation-reduce) {
-  --mds-details-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-details-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-details-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-details-duration: 0s;
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   --mds-details-icon-color: rgb(var(--variant-primary-03, 211 226 255));
   --mds-details-helper-icon-color: rgb(var(--tone-neutral-02, 244 244 244));
 }
 
 @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-details-icon-color: rgb(var(--variant-primary-03, 211 226 255));
     --mds-details-helper-icon-color: rgb(var(--tone-neutral-02, 244 244 244));
   }

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import clsx from "clsx";
 import miBaselineKeyboardArrowRight from "@icon/mi/baseline/keyboard-arrow-right.svg";
 import { KeyboardManager } from "../../common/keyboard-manager";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
@@ -43,11 +44,22 @@ export class MdsDetails {
         this.km.addElement(header);
         this.km.attachClickBehavior();
     }
+    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);
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: 'd74c147e767625599ead47337938ca8314758dac' }, h("div", { key: '6d0b01f008d95f0eafee89d026fc7131008c521e', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: 'da0be4d9fca3fff84841b8ac56c7969103299a8f', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: 'dfb7b13ef7a28539c1cc50419887c50e3d2ee3fd', class: "content" }, h("header", { key: '4209585b8554c8aca288f813849446da4b72d532', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: '825c05b8282b143bf555cf3724a4c61e96fe680d', class: "title", part: "title" }, h("slot", { key: '9d339db4c240c11a334105ee8a3c35eba01497a4', name: "title" })), h("i", { key: '2eff776b4d94546fa56c2c744c03d58d453df89b', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowRight })), h("div", { key: 'cabc3ad3fcb39ca665c73300daf4baad7559fe33', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: 'c0522330a06abb1ad0fa336ab1574da972643840', class: "content-expander", part: "content" }, h("slot", { key: '6f02ec01d42f17bd88733308c3fd4523ea1e14bd' }), h("div", { key: '64590622875aac471b094064cc20591356f5046b', class: "actions" }, h("slot", { key: 'daa26ab68c2421e84f4a25634b264376a3874171', name: "action" })))))));
+        return (h(Host, { key: '9c099aa13a4869198ae511c8722abbc1d9b684ce', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast }, h("div", { key: '5b0b549081842677565c7aea5ca8602346857f9e', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: 'e3a9dbba4bd5a574ef97d8051377b9f989f2d8b5', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: '444e1882f988f27944faa438ef6a0ba15c33c153', class: "content" }, h("header", { key: '269d60a72fe939e091b9e73f4a59f9bce7e6d55a', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: 'c0ab49608685d0e362da26363b86a44f1a0e54b1', class: "title", part: "title" }, h("slot", { key: 'd6cdcf48b1a6c7326f2d5db71bc42a89090e850c', name: "title" })), h("i", { key: 'bb3b55b3cc3c390b7044e57176a0f907535cf872', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowRight })), h("div", { key: 'a63bcb71bf9adcff3a2ff5b1b0dfe9637e67805c', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: 'a3d08ebdcd8b594b6a370f86d8f306b48135f091', class: "content-expander", part: "content" }, h("slot", { key: '3f050900d9ad1973313788f77079023927d4ac84' }), h("div", { key: 'b94d54d4954f58699f7292b7aad178f869b0f75a', class: "actions" }, h("slot", { key: '286ba37e510969dcdea48f6e31239fc09d816a04', name: "action" })))))));
     }
     static get is() { return "mds-details"; }
     static get encapsulation() { return "shadow"; }
@@ -87,6 +99,8 @@ export class MdsDetails {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
             "isOpened": {},
             "hasIcon": {}
         };