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/cjs/preference-BdpIXWLP.js ADDED Viewed

@@ -0,0 +1,81 @@
+'use strict';
+/**
+ * Shared, reactive read-model of the `<html>` accessibility preferences
+ * (theme / contrast / animation / consumption).
+ *
+ * The `mds-pref-*` controllers remain the sole writers/authority: they publish
+ * the resolved state as a `pref-<dim>-<value>` class on `<html>` (and the
+ * Storybook accessibility panel writes the same class). This store does NOT
+ * decide anything - it mirrors that published state behind a SINGLE shared
+ * MutationObserver, so consuming components subscribe to one central channel
+ * instead of each one sniffing `<html>` on its own.
+ *
+ * Consumers bind the value to a dedicated host attribute and style off it with
+ * plain `:host([pref-<dim>='...'])` selectors (no `:host-context`).
+ */
+// Allowed values per preference, mirroring the pref-<dim>-<value> classes the
+// controllers publish. Single-axis only for now - theme is multi-axis (mode +
+// scheme) and will need a dedicated resolver when it is converted.
+const PREFERENCE_VALUES = {
+    animation: ['reduce', 'system', 'no-preference'],
+    consumption: ['low', 'medium', 'high'],
+    contrast: ['more', 'no-preference', 'system'],
+    // theme is two independent single-axis prefs: mode (mds-pref-theme) + scheme
+    // (mds-pref-theme-variant). Resolved separately, both reflected on the host.
+    theme: ['light', 'dark', 'system'],
+    'theme-scheme': ['light', 'dark', 'all'],
+};
+const listeners = new Map();
+const current = new Map();
+let observer;
+const resolve = (preference) => {
+    var _a;
+    const values = (_a = PREFERENCE_VALUES[preference]) !== null && _a !== void 0 ? _a : [];
+    const { classList } = document.documentElement;
+    return values.find((value) => classList.contains(`pref-${preference}-${value}`));
+};
+const sync = () => {
+    listeners.forEach((set, preference) => {
+        const next = resolve(preference);
+        if (next !== current.get(preference)) {
+            current.set(preference, next);
+            set.forEach((listener) => listener(next));
+        }
+    });
+};
+const ensureObserver = () => {
+    if (observer || typeof MutationObserver === 'undefined') {
+        return;
+    }
+    observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+};
+/**
+ * Subscribe to a preference. The listener is called immediately with the
+ * current value (or `undefined` when no controller has published it) and again
+ * on every change. Returns a teardown to call from `disconnectedCallback`.
+ */
+const subscribePreference = (preference, listener) => {
+    if (typeof document === 'undefined') {
+        listener(undefined);
+        return () => { };
+    }
+    ensureObserver();
+    if (!listeners.has(preference)) {
+        listeners.set(preference, new Set());
+        current.set(preference, resolve(preference));
+    }
+    const set = listeners.get(preference);
+    set === null || set === void 0 ? void 0 : set.add(listener);
+    listener(current.get(preference));
+    return () => {
+        set === null || set === void 0 ? void 0 : set.delete(listener);
+        if (set && set.size === 0) {
+            listeners.delete(preference);
+            current.delete(preference);
+        }
+    };
+};
+exports.subscribePreference = subscribePreference;

package/dist/collection/common/floating-controller.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class FloatingController {
             return inset;
         };
         this.arrowTransform = (arrowPosition) => {
-            let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
+            let transformProps = !this._host.hideArrow && this._host.visible ? 'scale(1)' : 'scale(0)';
             switch (arrowPosition) {
                 case 'bottom':
                     transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
@@ -90,19 +90,19 @@ export class FloatingController {
             if (this._host.shiftPadding) {
                 config.padding = this._host.shiftPadding;
             }
-            if (this._host.autoPlacement) {
+            if (!this._host.disableAutoPlacement) {
                 middleware.push(autoPlacement());
             }
             if (this._host.offset) {
                 middleware.push(offset(this._host.offset));
             }
-            if (!this._host.autoPlacement && this._host.flip) {
+            if (this._host.disableAutoPlacement && this._host.flip) {
                 middleware.push(flip(config));
             }
-            if (this._host.shift) {
+            if (!this._host.disableShift) {
                 middleware.push(shift(config));
             }
-            if (this.arrowEl && this._host.arrow) {
+            if (this.arrowEl && !this._host.hideArrow) {
                 middleware.push(arrow({
                     element: this.arrowEl,
                     padding: this._host.arrowPadding,

package/dist/collection/common/preference.js ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * Shared, reactive read-model of the `<html>` accessibility preferences
+ * (theme / contrast / animation / consumption).
+ *
+ * The `mds-pref-*` controllers remain the sole writers/authority: they publish
+ * the resolved state as a `pref-<dim>-<value>` class on `<html>` (and the
+ * Storybook accessibility panel writes the same class). This store does NOT
+ * decide anything - it mirrors that published state behind a SINGLE shared
+ * MutationObserver, so consuming components subscribe to one central channel
+ * instead of each one sniffing `<html>` on its own.
+ *
+ * Consumers bind the value to a dedicated host attribute and style off it with
+ * plain `:host([pref-<dim>='...'])` selectors (no `:host-context`).
+ */
+// Allowed values per preference, mirroring the pref-<dim>-<value> classes the
+// controllers publish. Single-axis only for now - theme is multi-axis (mode +
+// scheme) and will need a dedicated resolver when it is converted.
+const PREFERENCE_VALUES = {
+    animation: ['reduce', 'system', 'no-preference'],
+    consumption: ['low', 'medium', 'high'],
+    contrast: ['more', 'no-preference', 'system'],
+    // theme is two independent single-axis prefs: mode (mds-pref-theme) + scheme
+    // (mds-pref-theme-variant). Resolved separately, both reflected on the host.
+    theme: ['light', 'dark', 'system'],
+    'theme-scheme': ['light', 'dark', 'all'],
+};
+const listeners = new Map();
+const current = new Map();
+let observer;
+const resolve = (preference) => {
+    var _a;
+    const values = (_a = PREFERENCE_VALUES[preference]) !== null && _a !== void 0 ? _a : [];
+    const { classList } = document.documentElement;
+    return values.find((value) => classList.contains(`pref-${preference}-${value}`));
+};
+const sync = () => {
+    listeners.forEach((set, preference) => {
+        const next = resolve(preference);
+        if (next !== current.get(preference)) {
+            current.set(preference, next);
+            set.forEach((listener) => listener(next));
+        }
+    });
+};
+const ensureObserver = () => {
+    if (observer || typeof MutationObserver === 'undefined') {
+        return;
+    }
+    observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+};
+/**
+ * Subscribe to a preference. The listener is called immediately with the
+ * current value (or `undefined` when no controller has published it) and again
+ * on every change. Returns a teardown to call from `disconnectedCallback`.
+ */
+const subscribePreference = (preference, listener) => {
+    if (typeof document === 'undefined') {
+        listener(undefined);
+        return () => { };
+    }
+    ensureObserver();
+    if (!listeners.has(preference)) {
+        listeners.set(preference, new Set());
+        current.set(preference, resolve(preference));
+    }
+    const set = listeners.get(preference);
+    set === null || set === void 0 ? void 0 : set.add(listener);
+    listener(current.get(preference));
+    return () => {
+        set === null || set === void 0 ? void 0 : set.delete(listener);
+        if (set && set.size === 0) {
+            listeners.delete(preference);
+            current.delete(preference);
+        }
+    };
+};
+export { subscribePreference };

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

@@ -68,36 +68,36 @@
   display: grid;
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-accordion-duration: 0s;
-}
+/* 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. */
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-accordion-duration: 0s;
-  }
-}
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --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-border-color: rgb(var(--tone-neutral-06, 158 158 158));
   }
 }
-: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-border-color: rgb(var(--tone-neutral-01, 255 255 255));
   --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-border-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-accordion-color: rgb(var(--tone-neutral-01, 255 255 255));
   }

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

@@ -1,4 +1,5 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `mds-accordion-item` element/s.
  */
@@ -9,9 +10,9 @@ export class MdsAccordion {
          */
         this.multiple = false;
         /**
-         * Specifies if an item can be closed by user
+         * Prevents the user from closing the currently open item, forcing at least one panel to stay expanded
          */
-        this.closable = true;
+        this.disableClose = false;
         this.queryItems = () => this.element.querySelectorAll('mds-accordion-item');
         this.selectMultipleItems = () => {
             const items = this.queryItems();
@@ -28,18 +29,44 @@ export class MdsAccordion {
         this.changedChildrenHandler = (event) => {
             const items = this.queryItems();
             if (this.multiple) {
+                if (this.disableClose && !event.detail.selected) {
+                    const isLastOpenItem = !Array.from(items).some((item) => item.id !== event.detail.id && item.selected);
+                    if (isLastOpenItem) {
+                        const target = Array.from(items).find((item) => item.id === event.detail.id);
+                        if (target) {
+                            target.selected = true;
+                        }
+                    }
+                }
                 this.selectMultipleItems();
                 return;
             }
             items.forEach((item, key) => {
                 item.selected =
-                    `item-${key}` === event.detail.id && (event.detail.selected || !this.closable);
+                    `item-${key}` === event.detail.id && (event.detail.selected || this.disableClose);
                 if (item.selected) {
                     this.changedEvent.emit({ children: items, selected: key.toString() });
                 }
             });
         };
     }
+    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() {
         const items = this.queryItems();
         items.forEach((item, key) => (item.id = `item-${key}`));
@@ -51,7 +78,7 @@ export class MdsAccordion {
         this.changedChildrenHandler(event);
     }
     render() {
-        return (h(Host, { key: 'c3abd999f46ae45f2ba929c1719a04b2f6e57e62' }, h("slot", { key: '368b026625a477dfc337b5d9b56ee6e01eef15ce' })));
+        return (h(Host, { key: '291876971fed6c87a8c6644472b2fa952b7998bb', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: '7779b91cd742c90cab357edb0b798c853406d722' })));
     }
     static get is() { return "mds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +114,7 @@ export class MdsAccordion {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
-            "closable": {
+            "disableClose": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -99,16 +126,23 @@ export class MdsAccordion {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if an item can be closed by user"
+                    "text": "Prevents the user from closing the currently open item, forcing at least one panel to stay expanded"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "closable",
-                "defaultValue": "true"
+                "attribute": "disable-close",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changedEvent",

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

@@ -2,9 +2,10 @@ import { h } from "@stencil/core";
 export default {
     title: 'UI / Accordion',
     argTypes: {
-        closable: {
+        'disable-close': {
+            name: 'disableClose',
             type: { name: 'boolean' },
-            label: 'Specifies if an item can be closed by user',
+            label: 'Prevents the user from closing the currently open item',
         },
         multiple: {
             type: { name: 'boolean' },
@@ -21,7 +22,7 @@ export const Default = {
 export const ItemNotClosable = {
     render: Template,
     args: {
-        closable: false,
+        'disable-close': true,
     },
 };
 export const Multiple = {

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,5 +1,6 @@
 import miBaselineKeyboardArrowRight from "@icon/mi/baseline/keyboard-arrow-right.svg";
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add contents like `text string`, `HTML elements` or `components` to this slot.
  * @part content - the content wrapper of the `default` slot
@@ -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: '70cbd276fd2552fa643a9297ca91479835a3669a' }, h("button", { key: '80f2fe79c0c3516330949615ab76e30d76c553c8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { key: '1709a57f269dc53e3530d17e37984d3a90991ec3', typography: this.typography, part: "label" }, this.label), h("mds-text", { key: 'd9c01a62a36a9a8930b228cc748e7527d8c927bd', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, h("i", { key: '80ecf7c41a6c8ee7a7d7793836466496e6c35149', class: "icon", innerHTML: miBaselineKeyboardArrowRight }))), h("div", { key: '43617c689361b7748b588af64e4e209f43788f8e', class: "content", id: "content" }, h("div", { key: 'ee082641d530d31c12e5f0e52464fb64c38ad572', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, h("slot", { key: '9499ce48fce9fa821ba339c08226c74eea72b63f' })))));
+        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-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;
   }
 }