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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1223) hide show

package/dist/collection/components/mds-calendar-cell/mds-calendar-cell.js CHANGED Viewed

@@ -24,7 +24,7 @@ export class MdsCalendarCell {
         this.today = undefined;
     }
     render() {
-        return (h(Host, { key: 'ca8595ffc3ffce266f0f77898d14ec636ff2f08a' }, h("div", { key: 'c4d083c999c81cdb4cec42f77404314c077616f7', class: "inner-dot" }), h("div", { key: '75e8d406f2b54aa0af396f1b0c1ff42febb37774', class: "area-background" }), h("mds-button", { key: 'f472dc9e3155f695be6042242c42b65dab288f6d', class: "action", variant: "dark", tone: "text", disabled: this.disabled, label: this.label })));
+        return (h(Host, { key: 'eea49336dfecb6f76ef93509fb42228417bac55a' }, h("div", { key: 'ea9d3de623b5e1edf19bba5cab930022e790f8f8', class: "inner-dot" }), h("div", { key: 'f973bf80d0456cbb7151db3dfebc6f80f9afc5ff', class: "area-background" }), h("mds-button", { key: '755324a7827cc9be52f8500f079df1f6f8285bde', class: "action", variant: "dark", tone: "text", disabled: this.disabled, label: this.label })));
     }
     static get is() { return "mds-calendar-cell"; }
     static get encapsulation() { return "shadow"; }

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

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

@@ -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,28 +11,43 @@ 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)
             // check custom slot
-            .map((c) => {
-            var _a;
-            return ((_a = c.getAttribute('slot')) !== null && _a !== void 0 ? _a :
-                // if no custom slot find mds-card-{component}
+            .map((c) => (c.getAttribute('slot') != null
+            ? c.getAttribute('slot') !== ''
+            : // if no custom slot find mds-card-{component}
                 c.tagName.startsWith('MDS-CARD-'))
-                ? // replace mds-card-header with header (for all mds-card-{component})
-                    c.tagName.toLocaleLowerCase().replace('mds-card-', '')
-                : // if find other tag do nothing
-                    '';
-        })
+            ? // replace mds-card-header with header (for all mds-card-{component})
+                c.tagName.toLocaleLowerCase().replace('mds-card-', '')
+            : // if find other tag do nothing
+                '')
             .sort()
             .reduce((prev, curr) => prev + curr.charAt(0), '');
     }
     render() {
-        return (h(Host, { key: 'e5143babcd5c15b6e626af3dc62824ce1766faea' }, h("div", { key: '9bdd4440748ad05436f9385037dbd0acb9819f3d', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "layout" }, h("slot", { key: 'e4cc48c56f8859d82c79e9f3aa5f1d749efe2ce2', name: "media" }), h("slot", { key: 'd1873703aac2d635645e88f852f6a658616f69b5', name: "header" }), h("slot", { key: 'd9d07a179c013d75360262a2f3bc1b026d49c25a', name: "content" }), h("slot", { key: '0b942e340f715a0e25827f680a891083cd73c8cb', 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"; }
@@ -47,7 +63,7 @@ export class MdsCard {
     }
     static get properties() {
         return {
-            "autoGrid": {
+            "disableAutoGrid": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -59,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 CHANGED Viewed

@@ -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-card-content/mds-card-content.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsCardContent {
     render() {
-        return (h(Host, { key: '8473bf383d3e53d5e7fc1d28bb1db7c55e89ed1f', slot: "content" }, h("slot", { key: 'd94a743c850ae055f5cf18ec64cccbc25f2c2386' })));
+        return (h(Host, { key: '565800120da6d86c184dd5f75c4e18fb5eae0b70', slot: "content" }, h("slot", { key: '85c7feee51473d66cb921e3328f24756ef2436c4' })));
     }
     static get is() { return "mds-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-card-footer/mds-card-footer.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsCardFooter {
     render() {
-        return (h(Host, { key: 'ece0d1f82874b8418e5fe959f52542fa75562b9c', slot: "footer" }, h("slot", { key: '0e1dc915caf0abf097fa9d2c152b9af919280d1e' })));
+        return (h(Host, { key: '09063cd00e75b0949a6836416a2c768bd575f50f', slot: "footer" }, h("slot", { key: 'c06e99b7186e4037aa5c386eddd2ebb404b20e99' })));
     }
     static get is() { return "mds-card-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @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.
  */
 export class MdsCardHeader {
@@ -8,7 +8,7 @@ export class MdsCardHeader {
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '8330b5f74a2d0995e33d77ea2b5c4131c29266a4', slot: "header" }, h("slot", { key: 'e3a7ca1b4fccc0c4a618808c5285f3af8bc20ca4' }), this.actions && (h("div", { key: 'ace7c1ac31dec0a141673612118bbbdab4ce24c9', class: "actions" }, h("slot", { key: 'd64698964813c57b065b67d27c695ea93d2b2cd8', name: "action" })))));
+        return (h(Host, { key: '6efc9cb2ce54f8114d6143a3b514c66205c44444', slot: "header" }, h("slot", { key: 'c7ad38193e9d5f36c447dd636909cd426f53496d' }), this.actions && (h("div", { key: 'f80bc0f5444df7271c6b09792a7cdc24a79edaf7', class: "actions" }, h("slot", { key: '196095c6e86c45c02450776892ce77b3993e69b3', name: "action" })))));
     }
     static get is() { return "mds-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-card-media/mds-card-media.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot default - Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents.
+ * @slot - Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents.
  * @slot content - Add `text string`, `HTML elements` or `components` to this slot, contents will be shown in front of the media element.
  */
 export class MdsCardMedia {
     render() {
-        return (h(Host, { key: '3b5160ec822d4f36a670153d18d0c3186c25cea9', slot: "media" }, h("div", { key: '6e4c0488e264f6334041fffe32781eced8a01625', class: "content", part: "content" }, h("slot", { key: '8d19d53a625f894f7f5ad9b4e0980600ef8ffb09', name: "content" })), h("slot", { key: 'c8674d696ebf4d6df73758beed889c65ebdc9ea1' })));
+        return (h(Host, { key: '2b44ca234a11ddc6775b20081809ba04b63dbf53', slot: "media" }, h("div", { key: '7fa0c8e670f3ee6ec9a1ad656ac5553fab37b9aa', class: "content", part: "content" }, h("slot", { key: '72547efbb5900edd34ce5cc5f4e7782d293b5e78', name: "content" })), h("slot", { key: 'b39be7942b66438b905d9fae1ab0bdf9c437dd81' })));
     }
     static get is() { return "mds-card-media"; }
     static get encapsulation() { return "shadow"; }

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

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

@@ -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";
@@ -32,6 +33,9 @@ export class MdsChip {
          * Sets the color variant tone of the component
          */
         this.tone = 'strong';
+        this.onDeleteHandler = (event) => {
+            this.deleteEvent.emit({ event, element: this.host });
+        };
         this.handleClickableKeyboard = (isClickable) => {
             var _a;
             if (isClickable) {
@@ -45,7 +49,7 @@ export class MdsChip {
         this.handleClickableElement = (isClickable) => {
             var _a;
             const label = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label');
-            if (!label) {
+            if (label == null) {
                 return;
             }
             if (isClickable) {
@@ -57,6 +61,9 @@ export class MdsChip {
             label.removeEventListener('click', this.onClickLabelHandler.bind(this));
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -85,9 +92,6 @@ export class MdsChip {
         }
         this.clickLabelEvent.emit({ event, element: this.host });
     }
-    onDeleteHandler(event) {
-        this.deleteEvent.emit({ event, element: this.host });
-    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -97,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: '0ff9c5f44050e5aae268321b89f3479ad50b3eec', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon && (h("div", { key: '554e3024e5492fe32fbe14df912d7f48cf3d1e42', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: 'ed4ecb18bee7cf7a5471c8dc2dd212d2264b7188', class: "icon", name: this.icon }))), h("div", { key: '4ded2dcecb606224cdbd336dd6bda407a2a020e7', 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: '847b0fe5c0f111a79a3aac85285c7003ff771183', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), 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"; }
@@ -310,6 +333,10 @@ export class MdsChip {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -397,7 +424,7 @@ export class MdsChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

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

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

@@ -2,8 +2,9 @@ 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 default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @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.
  * @slot icon - Insert an icon image, it can be `HTML elements` or `components`, it is **recommended** to add `mds-icon` element.
  * @slot title - Add a `text string`, `HTML elements` or `components`, it is **recommended** to use `mds-text` 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: 'b68670a1cb741c24b00788b5a89572c5111222ec' }, h("div", { key: '5af8b496c967b7143e690432a1ee835fac852da7', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, h("slot", { key: '22952053827e6831c2d076860f2c3f78acaf94ad', name: "icon", onSlotchange: this.onSlotChangeHandler })), h("div", { key: 'ede2234ae7c9d27258b968d1b4e9e9c6da4c6f42', class: "content" }, h("header", { key: '62e2aaacdd4246c581737f84a37fbaff14a7976a', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, h("div", { key: '8f2a07baa3e76757abb194fc6b5f7709c8feb093', class: "title", part: "title" }, h("slot", { key: 'fbeb7c6facfb6dfa71d78b859e7763f5a6c334f7', name: "title" })), h("i", { key: '90bea8dacf62c4013eb2da3099b011a28478465d', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowRight })), h("div", { key: '0a1b8b0753bc148d019bb32304e2b71fece2aa90', class: clsx('details', this.isOpened && 'opened') }, h("div", { key: '5dda2bd4b47bdbc4dacbdb8bab413300c67dc2f8', class: "content-expander", part: "content" }, h("slot", { key: '36361643f560082b16e72307c2570d00f542ddaa' }), h("div", { key: '01bce23c1fd8fa04bb3290b2a07759099209e5cf', class: "actions" }, h("slot", { key: '54e6dd6e93ee2a7044eaf85ce2211278a46f7b95', 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": {}
         };