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

package/dist/collection/components/mds-tab-item/mds-tab-item.js

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import clsx from "clsx";
 export class MdsTabItem {
     constructor() {
@@ -33,12 +34,29 @@ export class MdsTabItem {
             this.selectedEvent.emit({ target: this.element, value: this.value });
         }
     }
+    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.hasText = this.element.innerHTML !== '';
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a91b51214bfa7b7b77d6dba5332904ba94827ec2' }, h("mds-button", { key: 'cc6ae4285e0084f5f36b28928fd1b3aced17e106', class: clsx('button', this.selected ? 'selected' : ''), await: this.await, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, href: this.href, icon: this.icon, iconPosition: this.iconPosition, onKeyDown: this.focus, onClick: this.toggle, part: "button", role: "tab", label: this.label, size: this.size, type: this.type })));
+        return (h(Host, { key: 'cd997257998ba3d36571cb506fc91932ed7f32ba', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-button", { key: 'cfe5fcf557eae0841c7ba6d2f3b51fef659e0af3', class: clsx('button', this.selected ? 'selected' : ''), await: this.await, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, href: this.href, icon: this.icon, iconPosition: this.iconPosition, onKeyDown: this.focus, onClick: this.toggle, part: "button", role: "tab", label: this.label, size: this.size, type: this.type })));
     }
     static get is() { return "mds-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -230,6 +248,58 @@ export class MdsTabItem {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DirectionType",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {
+                        "DirectionType": {
+                            "location": "import",
+                            "path": "@component/mds-tab/meta/type",
+                            "id": "src/components/mds-tab/meta/type.ts::DirectionType",
+                            "referenceLocation": "DirectionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the parent tab layout direction (set by mds-tab); drives the\nvertical layout without :host-context"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HorizontalActionsAnimationType",
+                    "resolved": "\"fade\" | \"slide\" | undefined",
+                    "references": {
+                        "HorizontalActionsAnimationType": {
+                            "location": "import",
+                            "path": "@type/animation",
+                            "id": "src/type/animation.ts::HorizontalActionsAnimationType",
+                            "referenceLocation": "HorizontalActionsAnimationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the parent tab selection animation (set by mds-tab); drives the\nslide-variant styling without :host-context"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "animation"
+            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -272,6 +342,9 @@ export class MdsTabItem {
     }
     static get states() {
         return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "isSelected": {},
             "hasText": {}
         };

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

@@ -72,6 +72,8 @@ mds-table-header {
 }
 
 :host {
+  --mds-table-transition-duration: var(--duration-300, 300ms);
+  --private-table-transition-duration: var(--mds-table-transition-duration);
   --mds-table-actions-gap: --spacing(200);
   --mds-table-background-alt: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-table-background: rgb(var(--tone-neutral, 0 0 0));
@@ -86,8 +88,7 @@ mds-table-header {
   --private-cell-border-color: var(--mds-table-border-color, rgb(var(--tone-neutral-08, 107 107 107)));
   --private-cell-border-width: var(--mds-table-border-width, 2px);
 
-  @apply duration-200
-    ease-out;
+  @apply ease-out;
 
   background-color: var(--mds-table-background-alt, rgb(var(--tone-neutral-10, 60 60 60)));
   border: var(--mds-table-border-width, 2px) solid var(--mds-table-border-color, rgb(var(--tone-neutral-08, 107 107 107))) !important;
@@ -96,6 +97,7 @@ mds-table-header {
   corner-shape: var(--magma-corner-shape, round);
   display: flex;
   overflow: hidden;
+  transition-duration: var(--duration-200, 200ms);
   transition-property: background-color, border-color, color;
 }
 
@@ -118,7 +120,7 @@ mds-table-header {
   display: flex;
   flex-shrink: 0;
   max-width: 0px;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-table-transition-duration);
   transition-property: max-width;
   transition-timing-function: var(--ease-in-out-circ, cubic-bezier(0.785, 0.135, 0.15, 0.86));
   width: 100%;
@@ -158,18 +160,31 @@ mds-table-header {
   --mds-table-body-background: var(--mds-table-body-background-hover, var(--mds-table-background-alt, rgb(var(--tone-neutral-10, 60 60 60))));
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-table-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-table-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-table-background: rgb(var(--tone-neutral-08, 107 107 107));
   --mds-table-body-background-hover: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-table-border-color: rgb(var(--tone-neutral-07, 134 134 134));
@@ -178,8 +193,8 @@ mds-table-header {
 }
 
 @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-table-background: rgb(var(--tone-neutral-08, 107 107 107));
     --mds-table-body-background-hover: rgb(var(--tone-neutral-10, 60 60 60));
     --mds-table-border-color: rgb(var(--tone-neutral-07, 134 134 134));
@@ -188,20 +203,25 @@ mds-table-header {
   }
 }
 
-: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-tab-bar-item-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02, 230 239 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-tab-bar-item-color: rgb(var(--tone-neutral-04, 218 218 218));
     --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-02, 230 239 255));
   }
 }
 
-:host-context(:root.pref-contrast-more.pref-theme-dark) {
+:host([pref-contrast='more'][pref-theme='dark']) {
   --mds-table-background: rgb(var(--tone-neutral-08, 107 107 107));
   --mds-table-body-background-hover: rgb(var(--tone-neutral, 0 0 0));
   --mds-table-border-color: rgb(var(--tone-neutral-05, 197 197 197));
@@ -210,7 +230,7 @@ mds-table-header {
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system.pref-theme-dark) {
+  :host([pref-contrast='system'][pref-theme='dark']) {
     --mds-table-background: rgb(var(--tone-neutral-08, 107 107 107));
     --mds-table-body-background-hover: rgb(var(--tone-neutral, 0 0 0));
     --mds-table-border-color: rgb(var(--tone-neutral-05, 197 197 197));
@@ -220,7 +240,7 @@ mds-table-header {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-contrast-more.pref-theme-system) {
+  :host([pref-contrast='more'][pref-theme='system']) {
     --mds-table-background: rgb(var(--tone-neutral-08, 107 107 107));
     --mds-table-body-background-hover: rgb(var(--tone-neutral, 0 0 0));
     --mds-table-border-color: rgb(var(--tone-neutral-05, 197 197 197));
@@ -230,7 +250,7 @@ mds-table-header {
 }
 
 @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-  :host-context(:root.pref-contrast-system.pref-theme-system) {
+  :host([pref-contrast='system'][pref-theme='system']) {
     --mds-table-background: rgb(var(--tone-neutral-08, 107 107 107));
     --mds-table-body-background-hover: rgb(var(--tone-neutral, 0 0 0));
     --mds-table-border-color: rgb(var(--tone-neutral-05, 197 197 197));

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { Host, h, } from "@stencil/core";
 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";
@@ -84,6 +85,9 @@ export class MdsTable {
         this.header.setSelection(this.selectedRows.length, this.rows.length);
         this.selection = this.selectedRows.length > 0;
         this.body.selection = this.selection;
+        this.rows.forEach((row) => {
+            row.selection = this.selection;
+        });
     }
     /**
      * Selects all elements or none, works only if `selectable` is true.
@@ -123,14 +127,32 @@ export class MdsTable {
             this.handleActions();
         }
     }
+    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;
+        var _a, _b, _c, _d, _e;
+        (_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.host.removeEventListener('scroll', this.handleActions);
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_e = this.resizeObserver) === null || _e === void 0 ? void 0 : _e.disconnect();
         this.tableBodyObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '7e29aed526c49ac9021de41ccaaf4e2479df7f2f' }, h("div", { key: 'dae1ff46dad9f3733c0d4e5b3922c0ceef60e397', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '97c5ef324b98a0ff0d8be1ee1fe8e1ae2b42792c', class: clsx('table', this.interactive && 'table--interactive'), role: "table", part: "table" }, h("slot", { key: '6dbbeed8c36f9ecb347db140c1a8cdb7c792601a', onSlotchange: this.updateSlottedElements }))), this.selectable && this.hasBatchActions && (h("div", { key: 'fac215ed7d4ed631f6df92b212406298088fe906', class: clsx('batch-actions-wrapper', this.selectedRows.length > 0 ? 'batch-actions-wrapper--has-selected-rows' : ''), part: "batch-actions-wrapper" }, h("div", { key: '6c33bb5c57b4fd2ae6d15eda97d6b353cfb6ad67', class: "batch-actions", part: "batch-actions" }, h("div", { key: 'bc10432ff603a335021116fe16a1937288892c5b', class: "batch-actions-header" }, h("mds-text", { key: 'b804e56fc035ddb65da640124612b345bf76c300', class: "batch-actions-label", typography: "label" }, this.t.get('batchActions')), h("mds-badge", { key: '5f0322a4ef1252b237850c596f23c6453b984a8d', variant: "dark", tone: "outline", typography: "label" }, this.selectedRows.length)), h("slot", { key: '977eb1424d5d37b9a429369c43c97b45f8e5f249', name: "batch-action" }))))));
+        return (h(Host, { key: 'e7c77e9d01cf6b4efe638161ec811b1333b298ed', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '65df091f6d13a48f5ff8d6c1af82c3b6bea7d5ef', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '0d29aef521d40d8aa6063f985f73da1e8c5fb8ea', class: clsx('table', this.interactive && 'table--interactive'), role: "table", part: "table" }, h("slot", { key: '7927888cab77d8b2bbd5bfaa39dd44d670e16e2c', onSlotchange: this.updateSlottedElements }))), this.selectable && this.hasBatchActions && (h("div", { key: 'c97383c8124e11f0c9b339f31048d8497b18870c', class: clsx('batch-actions-wrapper', this.selectedRows.length > 0 ? 'batch-actions-wrapper--has-selected-rows' : ''), part: "batch-actions-wrapper" }, h("div", { key: '9a626e46b1d7f75241e7020623e081c9c445e3fa', class: "batch-actions", part: "batch-actions" }, h("div", { key: 'b142358ed944bc66c9b6b81920c92997b432b8b3', class: "batch-actions-header" }, h("mds-text", { key: '08b360e1ec653882e1fc982955e2a4708c8d964d', class: "batch-actions-label", typography: "label" }, this.t.get('batchActions')), h("mds-badge", { key: '7fadd5fc8395d8dfc35a31f93b7ee7de179e53c1', variant: "dark", tone: "outline", typography: "label" }, this.selectedRows.length)), h("slot", { key: '3e7b51e4082b2b1c0d1001c512954bd147194289', name: "batch-action" }))))));
     }
     static get is() { return "mds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -207,6 +229,10 @@ export class MdsTable {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "selectedRows": {},
             "language": {}
         };

package/dist/collection/components/mds-table-body/mds-table-body.css

@@ -57,13 +57,15 @@ mds-table-row {
 
   /* internal */
   --mds-table-row-color: var(--mds-table-body-color, var(--mds-table-color, rgb(var(--tone-neutral-02, 244 244 244))));
+  --mds-table-body-transition-duration: var(--duration-200, 200ms);
+  --private-table-body-transition-duration: var(--mds-table-body-transition-duration);
 
-  @apply duration-200
-    ease-out;
+  @apply ease-out;
 
   background-color: var(--mds-table-body-background, var(--mds-table-background, rgb(var(--tone-neutral, 0 0 0))));
   display: table-row-group;
   overflow: hidden;
+  transition-duration: var(--private-table-body-transition-duration);
   transition-property: background-color;
 }
 
@@ -71,7 +73,7 @@ mds-table-row {
   --private-cell-border-color: transparent;
 }
 
-:host-context(:not(.safari)):host([interactive]:hover) {
+:host([interactive]:hover) {
   --mds-table-row-background: var(--mds-table-body-background-hover, var(--mds-table-background-alt, rgb(var(--tone-neutral-10, 60 60 60))));
   --mds-table-row-color: var(--mds-table-body-color-alt, var(--mds-table-color-alt, rgb(var(--tone-neutral-05, 197 197 197))));
 }
@@ -80,14 +82,21 @@ mds-table-row {
   --mds-table-body-background: var(--mds-table-body-background-alt, var(--mds-table-body-background-hover, var(--mds-table-background-alt, rgb(var(--tone-neutral-10, 60 60 60)))));
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-table-body-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-table-body-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-table-body/mds-table-body.js

@@ -1,10 +1,20 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Put `mds-table-row` element/s.
  */
 export class MdsTableBody {
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: 'a6a5b376b43a0be644ee648205b7e6abab0da626', role: "rowgroup" }, h("slot", { key: 'da15c2964399841bf18c82350d1fb258d5dfcd38' })));
+        return (h(Host, { key: '2747df441238bcad421a7d83829fd37601ed845e', role: "rowgroup", "pref-animation": this.prefAnimation }, h("slot", { key: '8796134d65fa121fe9d36e3ee404f73c85ad94e7' })));
     }
     static get is() { return "mds-table-body"; }
     static get encapsulation() { return "shadow"; }
@@ -60,4 +70,9 @@ export class MdsTableBody {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
 }

package/dist/collection/components/mds-table-cell/mds-table-cell.css

@@ -34,9 +34,10 @@
   --mds-table-cell-background-alt: var(--mds-table-row-background-alt, rgb(var(--tone-neutral, 0 0 0)));
   --mds-table-cell-color-alt: var(--mds-table-row-color-alt, rgb(var(--tone-neutral-02, 244 244 244)));
   --mds-table-cell-color: var(--mds-table-row-color);
+  --mds-table-cell-transition-duration: var(--duration-200, 200ms);
+  --private-table-cell-transition-duration: var(--mds-table-cell-transition-duration);
 
-  @apply duration-200
-    ease-out;
+  @apply ease-out;
 
   background-color: var(--mds-table-cell-background, var(--mds-table-row-background));
   border-bottom: var(--private-cell-border-width) solid var(--private-cell-border-color) !important;
@@ -44,17 +45,25 @@
   color: var(--mds-table-cell-color, var(--mds-table-row-color));
   display: table-cell;
   padding: var(--mds-table-cell-padding, --spacing(400));
+  transition-duration: var(--private-table-cell-transition-duration);
   transition-property: background-color, border-color, color;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-table-cell-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-table-cell-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-table-cell/mds-table-cell.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { setAttributeIfEmpty } from "../../common/aria";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
@@ -7,8 +8,17 @@ export class MdsTableCell {
     componentWillLoad() {
         setAttributeIfEmpty(this.host, 'role', 'cell');
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '23bf4e14f265a14bdd0ee6fc81ebb76b0b3077c1' }, h("slot", { key: '8d17336ccffc0ca1735fa1af852d93dd64e86973' })));
+        return (h(Host, { key: 'cb36677b929728cfe418b9fbcc528fb36769f62c', "pref-animation": this.prefAnimation }, h("slot", { key: 'cfad63ed2784a464f48ab96fa1ba67184afc6aba' })));
     }
     static get is() { return "mds-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -45,5 +55,10 @@ export class MdsTableCell {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/mds-table-footer/mds-table-footer.css

@@ -11,12 +11,15 @@ mds-table-cell {
 
 
 :host {
-  @apply duration-200
-    ease-out;
+  --mds-table-footer-transition-duration: var(--duration-200, 200ms);
+  --private-table-footer-transition-duration: var(--mds-table-footer-transition-duration);
+
+  @apply ease-out;
 
   border-top: var(--private-cell-border-width) solid var(--private-cell-border-color);
   display: table-row;
   overflow: hidden;
+  transition-duration: var(--private-table-footer-transition-duration);
   transition-property: border-color;
 }
 
@@ -24,14 +27,21 @@ mds-table-cell {
   --private-cell-border-color: transparent;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-table-footer-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-table-footer-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-table-footer/mds-table-footer.js

@@ -1,10 +1,20 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `mds-table-row` element/s.
  */
 export class MdsTableFooter {
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '99c02de554402662fb728dd214d0928e4a554a80', role: "row" }, h("slot", { key: '8afc57c85ff9d5b44c3d0a580e4132ca3b6dab27' })));
+        return (h(Host, { key: '3a5ce1c2dcb5748a7fd552a3abb7fb2adb1030a7', role: "row", "pref-animation": this.prefAnimation }, h("slot", { key: 'c08a5999b5676f7810c5cb4b4fc3e3ab62b0df7f' })));
     }
     static get is() { return "mds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -18,4 +28,9 @@ export class MdsTableFooter {
             "$": ["mds-table-footer.css"]
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
 }

package/dist/collection/components/mds-table-header/mds-table-header.css

@@ -13,12 +13,15 @@ mds-table-header-cell {
 
 
 :host {
-  @apply duration-200
-    ease-out;
+  --mds-table-header-transition-duration: var(--duration-200, 200ms);
+  --private-table-header-transition-duration: var(--mds-table-header-transition-duration);
+
+  @apply ease-out;
 
   border-bottom: var(--private-cell-border-width) solid var(--private-cell-border-color);
   display: table-row;
   overflow: hidden;
+  transition-duration: var(--private-table-header-transition-duration);
   transition-property: border-color;
 }
 
@@ -34,14 +37,21 @@ mds-table-header-cell {
   display: flex;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-table-header-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-table-header-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-table-header/mds-table-header.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 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";
@@ -53,13 +54,22 @@ export class MdsTableHeader {
         }
         this.checkboxEl.checked = selectedItems === totalItems;
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         this.table = this.host.closest('mds-table');
         this.hasActions = this.table.querySelector('mds-table-row > [slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '4c1907b2a9d7f3be74b77ea8c4897b39337062f7', role: "row" }, this.selectable && (h("mds-table-cell", { key: 'da97fe04013a2d0627e7d42d83383b1bdc5ad20a', class: "selection", role: "columnheader" }, h("div", { key: '25d63dba96cfa5d0b797644fe5ade059a27130ab', class: "checkbox-wrapper" }, h("mds-input-switch", { key: 'd048fc26d2d851383851907a10fdea46c028af8b', class: "checkbox", title: this.t.get(this.selectAll ? 'selectNoneRows' : 'selectAllRows'), lang: this.language, type: "checkbox", onMdsInputSwitchChange: this.handleSelectAllChange, indeterminate: this.indeterminate })))), h("slot", { key: '02ff4fdb5d9703d6300aac7cdb6ecf090f8db974' }), this.hasActions && (h("mds-table-header-cell", { key: '77b1de04053c57ead60a545d134f60d54de1da48', part: "actions", class: "actions", label: this.t.get('actions') }))));
+        return (h(Host, { key: '06529aa3e118513b377d2998802498c261761c50', role: "row", "pref-animation": this.prefAnimation }, this.selectable && (h("mds-table-cell", { key: 'e6a90c762c4a8f0fc9ac992eda086ece6668b4c9', class: "selection", role: "columnheader" }, h("div", { key: '28834ccb255c9f54553e6fc626d85cf9c071094a', class: "checkbox-wrapper" }, h("mds-input-switch", { key: '43ee2e5a02cb71e3c268860d6d3ee04918e32401', class: "checkbox", title: this.t.get(this.selectAll ? 'selectNoneRows' : 'selectAllRows'), lang: this.language, type: "checkbox", onMdsInputSwitchChange: this.handleSelectAllChange, indeterminate: this.indeterminate })))), h("slot", { key: '4927fa2a425e609494d5eb357c9d31408c4cdfc5' }), this.hasActions && (h("mds-table-header-cell", { key: '1e56bda8d1e791be85d76995387561b6a77cc6b0', part: "actions", class: "actions", label: this.t.get('actions') }))));
     }
     static get is() { return "mds-table-header"; }
     static get encapsulation() { return "shadow"; }
@@ -98,6 +108,7 @@ export class MdsTableHeader {
     }
     static get states() {
         return {
+            "prefAnimation": {},
             "selectAll": {},
             "hasActions": {},
             "indeterminate": {},