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-tab-item/mds-tab-item.css CHANGED Viewed

@@ -65,7 +65,7 @@ mds-button {
   display: flex;
 }
-:host-context(mds-tab[animation='slide']) {
+:host([animation='slide']) {
   --mds-tab-item-hover-background: transparent;
   --mds-tab-item-selected-background: transparent;
   --mds-tab-item-selected-shadow: none;
@@ -102,23 +102,28 @@ mds-button {
   pointer-events: none;
 }
-:host-context(mds-tab[direction='vertical']) {
+:host([direction='vertical']) {
   width: 100%;
 }
-:host-context(mds-tab[direction='vertical']) .button {
+:host([direction='vertical']) .button {
   justify-content: start;
 }
 /* @import './css/mds-tab-item-pref-theme.css'; */
-: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-item-selected-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-tab-item-selected-shadow: var(--shadow-outline-strong-50);
 }
 @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-item-selected-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-tab-item-selected-shadow: var(--shadow-outline-strong-50);
   }

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

@@ -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: '8e3e4eaa9a5c331d461247f8ac91b1ba4fffbc11' }, h("mds-button", { key: 'f2afbe737326a6c01fd42727e1893c48dc2c5e0c', 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 CHANGED Viewed

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

@@ -1,13 +1,14 @@
 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";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s.
- * @slot batch-actions - Put `mds-button` element/s.
+ * @slot - Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s.
+ * @slot batch-action - Put `mds-button` element/s.
  * @part table-wrapper - Selects the element which wraps the table
  * @part table - Selects the table element
  * @part batch-actions - Selects the element which wraps the batch actions
@@ -33,7 +34,7 @@ export class MdsTable {
             var _a;
             const cells = this.rows[0].querySelectorAll('mds-table-cell');
             const cellSelection = (_a = this.rows[0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.selection-cell');
-            this.cellsWidth = cellSelection ? cellSelection.offsetWidth : 0;
+            this.cellsWidth = cellSelection != null ? cellSelection.offsetWidth : 0;
             cells.forEach((cell) => {
                 this.cellsWidth += cell.offsetWidth;
             });
@@ -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: '26c4ebf8d8dac2b2e8505526cac64abe56f9635f' }, h("div", { key: 'efe2076b369e0898e38ea181b6fa403c4ad97bb1', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '0951fff09d1ae80d5ed7080b602a64df3a181751', class: clsx('table', this.interactive && 'table--interactive'), role: "table", part: "table" }, h("slot", { key: '360f656f2380d7e211bd2e21f79a575ae76d1bc9', onSlotchange: this.updateSlottedElements }))), this.selectable && this.hasBatchActions && (h("div", { key: '3f0882dbcd34c89d9be13568b1b92fcc4ce76512', class: clsx('batch-actions-wrapper', this.selectedRows.length > 0 ? 'batch-actions-wrapper--has-selected-rows' : ''), part: "batch-actions-wrapper" }, h("div", { key: 'a7738eacba45b945a317573a0245534e69068342', class: "batch-actions", part: "batch-actions" }, h("div", { key: 'd0189b91bb6a3ccd185a52a5945fb20c880b51c0', class: "batch-actions-header" }, h("mds-text", { key: '6b6ba41fb6157e1285135342ce9fe15f6e118926', class: "batch-actions-label", typography: "label" }, this.t.get('batchActions')), h("mds-badge", { key: 'caaf5b9fea8cea12d045b59d8c45b0b4f74c3a5e', variant: "dark", tone: "outline", typography: "label" }, this.selectedRows.length)), h("slot", { key: 'b97911b24077a3197f7a2f5b12d88cf48a89afd0', 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"; }
@@ -196,7 +218,7 @@ export class MdsTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Indicates whether row selection is currently active in the table."
                 },
                 "getter": false,
                 "setter": false,
@@ -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 CHANGED Viewed

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

@@ -1,10 +1,20 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Put `mds-table-row` element/s.
+ * @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: 'a764ed8fcb40bd58e0e343e10ecd7be004f7cd68', role: "rowgroup" }, h("slot", { key: '4976aeaf766ad113e8ee8f1f535f4e1fdf41764c' })));
+        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"; }
@@ -32,7 +42,7 @@ export class MdsTableBody {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Specifies whether the rows react to user interaction (hover/focus)."
                 },
                 "getter": false,
                 "setter": false,
@@ -51,7 +61,7 @@ export class MdsTableBody {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Enables the selection column for the rows in this table body."
                 },
                 "getter": false,
                 "setter": false,
@@ -60,4 +70,9 @@ export class MdsTableBody {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
 }

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

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

@@ -1,14 +1,24 @@
 import { Host, h } from "@stencil/core";
 import { setAttributeIfEmpty } from "../../common/aria";
+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.
  */
 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: 'f129e0a47627697a61583d2aab152312162d7fd0' }, h("slot", { key: 'c944390e056de47f4376f829f3b9bfe885a5c3b2' })));
+        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 CHANGED Viewed

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

@@ -1,10 +1,20 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `mds-table-row` element/s.
+ * @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: 'e2661b9dfe47fa427e9055e435d7ea59c7f6855f', role: "row" }, h("slot", { key: '365a39d3a739ca4ec2b374f6e2c25710cf41dc60' })));
+        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": {}
+        };
+    }
 }