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

package/dist/collection/components/mds-stepper-bar-item/mds-stepper-bar-item.js

@@ -6,6 +6,7 @@ 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";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part badge - The badge wrapper
  */
@@ -64,7 +65,14 @@ export class MdsStepperBarItem {
     componentWillRender() {
         this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         this.km.detachClickBehavior();
     }
     selectedHandler(newValue) {
@@ -74,7 +82,7 @@ export class MdsStepperBarItem {
         this.isCurrent = newValue;
     }
     render() {
-        return (h(Host, { key: '153ad28fc7602065f33667e8eee0674ed6c03199' }, h("div", { key: 'eb763ce9856102511798408c6d060154e2ac6ea5', class: "header" }, h("mds-icon", { key: '1be42e5b2c360eba80ab2a17b350081a18b47539', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: 'ffc6dd8c3d9e643d6baf1b05847dad5f18425607', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: '2ada9d24154c880007dfc39c626ada7605260e00', class: "infos" }, this.step && (h("mds-text", { key: '841db62d45c451aae46b1bd27fe459d9ab35ca00', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (h("mds-text", { key: 'c11ce137d906cf357e478e53a83cc3b802b2d15d', class: "text", typography: this.typography }, this.label)), this.badge && h("div", { key: 'bc067a6ad5462ddcc7d9b8cdfda458e5e7fff73a', part: "badge" }, this.showBadge()))));
+        return (h(Host, { key: '5a8c6d0b17fd719b63c022620da9c0e52d4d6396', "pref-animation": this.prefAnimation }, h("div", { key: 'bbc8a708a030d5877166a4ce59c6072be1312a21', class: "header" }, h("mds-icon", { key: '3d1b84caad6c99c41427f2e9df11257020ef7f5e', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '174bb2a23c49847fd7a9fd7c8520d8536599750e', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: '7a7a1499febfb335abbcc5971cf0d210a71d2bbb', class: "infos" }, this.step && (h("mds-text", { key: 'b7e0840dc402e165495aa9362e1a4a5094853c74', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (h("mds-text", { key: 'f1204fb34565802fad46d6b74a9c6eade81a488c', class: "text", typography: this.typography }, this.label)), this.badge && h("div", { key: '98cba12f069e469a100387be7636f494f1c9796d', part: "badge" }, this.showBadge()))));
     }
     static get is() { return "mds-stepper-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -276,6 +284,7 @@ export class MdsStepperBarItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
             "isDone": {},
             "isCurrent": {},
             "index": {},

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

@@ -265,6 +265,7 @@ mds-tab-item {
   --mds-tab-tabs-wrapper-shadow-color: var(--mds-tab-tabs-background, rgb(var(--tone-neutral-09, 76 76 76)));
   --mds-tab-tabs-wrapper-shadow: 0 0 0 2px var(--mds-tab-tabs-wrapper-shadow-color, var(--mds-tab-tabs-background, rgb(var(--tone-neutral-09, 76 76 76)))) inset;
   --mds-tab-transition-duration: 0.5s;
+  --private-tab-transition-duration: var(--mds-tab-transition-duration, 0.5s);
   --mds-tab-transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
   --mds-tab-corner-shape: var(--magma-corner-shape, round);
 
@@ -276,6 +277,18 @@ mds-tab-item {
   position: relative;
 }
 
+/* Animation preference: scroll-behavior is a keyword, so its reduced-motion state
+ * is handled here, cross-browser, via @media. This follows the OS preference
+ * (the in-app explicit override does not reach a keyword). The transition
+ * durations are reduced separately through the flag in
+ * css/mds-tab-pref-animation.css. */
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-tab-scroll-behavior: auto;
+  }
+}
+
 @container style(--mds-tab-corner-shape: round) {
   :host {
     --mds-tab-item-radius: calc(var(--mds-tab-tabs-radius, var(--radius-2xl, 24px)) - calc(var(--mds-tab-tabs-padding, --spacing(200)) * 2));
@@ -308,7 +321,7 @@ mds-tab-item {
   padding: var(--mds-tab-tabs-padding, --spacing(200));
   scroll-behavior: var(--mds-tab-scroll-behavior);
   scroll-snap-type: x mandatory;
-  transition-duration: var(--mds-tab-transition-duration, 0.5s);
+  transition-duration: var(--private-tab-transition-duration);
   transition-property: background-color;
   transition-timing-function: var(--mds-tab-transition-timing-function);
   z-index: 0;
@@ -338,7 +351,7 @@ mds-tab-item {
   opacity: var(--mds-tab-tabs-wrapper-outline-opacity, 0.7);
   pointer-events: none;
   position: absolute;
-  transition-duration: var(--mds-tab-transition-duration, 0.5s);
+  transition-duration: var(--private-tab-transition-duration);
   transition-property: box-shadow, opacity;
   transition-timing-function: var(--mds-tab-transition-timing-function);
 }
@@ -346,19 +359,20 @@ mds-tab-item {
 .contents {
   --mds-tab-contents-height: auto;
 
-  @apply gap-600 hide-scrollbar;
+  @apply hide-scrollbar;
 
   align-items: stretch;
   box-sizing: border-box;
   display: flex;
   flex-grow: 1;
+  gap: --spacing(600);
   height: var(--mds-tab-contents-height);
   overflow-x: auto;
   overflow-y: hidden;
   position: relative;
   scroll-behavior: var(--mds-tab-scroll-behavior);
   scroll-snap-type: x mandatory;
-  transition-duration: var(--mds-tab-transition-duration, 0.5s);
+  transition-duration: var(--private-tab-transition-duration);
   transition-property: height;
   transition-timing-function: var(--mds-tab-transition-timing-function);
 }
@@ -368,11 +382,11 @@ mds-tab-item {
 }
 
 ::slotted([slot='content']) {
-  @apply min-w-full w-full;
-
   flex-basis: 0;
   flex-grow: 1;
+  min-width: 100%;
   scroll-snap-align: start;
+  width: 100%;
 }
 
 ::slotted([slot='content'][mds-tab-content-hidden]) {
@@ -520,20 +534,31 @@ mds-tab-item {
   z-index: 1;
 }
 
-: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-tab-tabs-background: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-tab-item-selected-background: rgb(var(--tone-neutral-08, 107 107 107));
 }
 
 @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-tab-tabs-background: rgb(var(--tone-neutral-10, 60 60 60));
     --mds-tab-item-selected-background: rgb(var(--tone-neutral-08, 107 107 107));
   }
 }
 
-: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-shadow: var(--shadow-outline-50);
   --mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color, var(--mds-tab-tabs-background, rgb(var(--tone-neutral-09, 76 76 76)))) inset;
   --mds-tab-tabs-wrapper-shadow-color: rgb(var(--tone-neutral-07, 134 134 134));
@@ -541,8 +566,8 @@ mds-tab-item {
 }
 
 @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-shadow: var(--shadow-outline-50);
     --mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color, var(--mds-tab-tabs-background, rgb(var(--tone-neutral-09, 76 76 76))))
       inset;
@@ -551,16 +576,21 @@ mds-tab-item {
   }
 }
 
-:host-context(:root.pref-animation-reduce) {
-  --mds-tab-scroll-behavior: auto;
-  --mds-tab-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-tab-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-tab-scroll-behavior: auto;
-    --mds-tab-transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-tab-transition-duration: 0s;
   }
 }
 

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { setAttributeIfEmpty, hashRandomValue } from "../../common/aria";
 import clsx from "clsx";
 import { cssDurationToMilliseconds } from "../../common/unit";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part contents - Selects the container of the tabbed contents elements.
  * @part slider - Selects the slider element which is visible when attribute `animation` is set to `slide`.
@@ -42,6 +43,8 @@ export class MdsTab {
             this.currentItemIndex = -1;
             this.tabItems.forEach((item) => {
                 item.size = this.size;
+                item.direction = this.direction;
+                item.animation = this.animation;
             });
             this.tabItems.forEach((item, key) => {
                 if (item.id === '') {
@@ -132,7 +135,26 @@ export class MdsTab {
     componentWillLoad() {
         this.setTabsItems();
     }
+    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.unsetOverflowCheck();
     }
     componentDidLoad() {
@@ -180,9 +202,17 @@ export class MdsTab {
             }
         });
     }
-    handleAnimationChange() {
+    handleAnimationChange(newValue) {
+        this.tabItems.forEach((element) => {
+            element.animation = newValue;
+        });
         this.updateSliderPosition();
     }
+    handleDirectionChange(newValue) {
+        this.tabItems.forEach((element) => {
+            element.direction = newValue;
+        });
+    }
     handleScrollbarChange(newValue) {
         if (newValue === false) {
             this.scrollbar = undefined;
@@ -206,12 +236,12 @@ export class MdsTab {
         });
     }
     render() {
-        return (h(Host, { key: '80d8b12242b72f94479bdf196c8bc7135a305a8c' }, h("div", { key: '307d15fe46c0a82d4a3f9806aecc0592e04f9cfb', class: clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, this.overflow && (h("div", { key: 'b593c0214f0e9c11a0d8831093e08c4a96b4e6e9', class: clsx('tabs-wrapper-overflow-left', this.overflowLeft && 'tabs-wrapper-overflow-left--show') })), this.overflow && (h("div", { key: '384ef0a5d39785aee8dc42e093fe4c50b8270dc7', class: clsx('tabs-wrapper-overflow-right', this.overflowRight && 'tabs-wrapper-overflow-right--show') })), h("div", { key: '90f41f2d5ac1fc3e286ac262ae1502c5f9ebb33e', class: "tabs", part: "tabs", role: "tablist" }, h("slot", { key: '4b9183053872aa01d857a3fe3a1009d50125d0b1' }), this.animation === 'slide' && (h("div", { key: 'fdc734f877ef9a41da18e694a7bf68bdb2bf0db5', class: "slider", part: "slider", style: {
+        return (h(Host, { key: 'a7d4f2735044826402658813ebc7585c46b741e3', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '8512e5e3b39460dd59135ab1e50aa2c09a736d52', class: clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, this.overflow && (h("div", { key: 'b8893131b4210f5a0e8c76c2b2d8cc30cff2a3f1', class: clsx('tabs-wrapper-overflow-left', this.overflowLeft && 'tabs-wrapper-overflow-left--show') })), this.overflow && (h("div", { key: '2ae8c9e969d7f8c249da45e1a64f6fd1a4eacc99', class: clsx('tabs-wrapper-overflow-right', this.overflowRight && 'tabs-wrapper-overflow-right--show') })), h("div", { key: '4b7fb2d877a2cefd3e307b98e149f2e006b1eaef', class: "tabs", part: "tabs", role: "tablist" }, h("slot", { key: 'd67188da78030dd43bf49a163f5f17e80c0f7562' }), this.animation === 'slide' && (h("div", { key: 'cae0574ed230042efc63cebc4770b48591906f3c', class: "slider", part: "slider", style: {
                 '--mds-tab-slider-width': `${this.sliderWidth}px`,
                 '--mds-tab-slider-height': `${this.sliderHeight}px`,
                 '--mds-tab-slider-offset-x': `${this.sliderOffsetX}px`,
                 '--mds-tab-slider-offset-y': `${this.sliderOffsetY}px`,
-            } })))), h("div", { key: 'c64737e1a93159defa4b48b56b166f508d40cf84', class: "contents", part: "contents" }, h("slot", { key: '2c795ecacb613662ddd79108d8c0028bc1135fd0', name: "content", onSlotchange: this.updateContentItems }))));
+            } })))), h("div", { key: 'b3a78639ddd17afc2c4b1941ef286a4d9ee2a75d', class: "contents", part: "contents" }, h("slot", { key: '2844967e10dc15cddaceb52bd12865922cc87915', name: "content", onSlotchange: this.updateContentItems }))));
     }
     static get is() { return "mds-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -368,6 +398,10 @@ export class MdsTab {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "sliderWidth": {},
             "sliderHeight": {},
             "sliderOffsetX": {},
@@ -406,6 +440,9 @@ export class MdsTab {
         return [{
                 "propName": "animation",
                 "methodName": "handleAnimationChange"
+            }, {
+                "propName": "direction",
+                "methodName": "handleDirectionChange"
             }, {
                 "propName": "scrollbar",
                 "methodName": "handleScrollbarChange"

package/dist/collection/components/mds-tab-bar/mds-tab-bar.css

@@ -11,8 +11,10 @@ mds-tab-bar-item {
 
 
 :host {
-  @apply duration-200
-    ease-out;
+  --mds-tab-bar-transition-duration: var(--duration-200, 200ms);
+  --private-tab-bar-transition-duration: var(--mds-tab-bar-transition-duration);
+
+  @apply ease-out;
 
   background-color: rgb(var(--tone-neutral, 0 0 0));
   bottom: 0;
@@ -22,38 +24,57 @@ mds-tab-bar-item {
   left: 0;
   position: fixed;
   right: 0;
+  transition-duration: var(--private-tab-bar-transition-duration);
   transition-property: background-color, color, box-shadow;
 }
 
-: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-tab-bar-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-tab-bar-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'])) {
   box-shadow: var(--shadow-outline-50);
 }
 
 @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])) {
     box-shadow: var(--shadow-outline-50);
   }
 }
 
-: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);
 }
 
 @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);
   }
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `mds-tab-bar-item` element/s.
  */
@@ -10,6 +11,27 @@ export class MdsTabBar {
         const items = this.queryItems();
         items.forEach((item, key) => (item.id = `mds-tab-bar-item-${key}`));
     }
+    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);
+    }
     changeEventHandler(event) {
         const items = this.queryItems();
         items.forEach((item, key) => {
@@ -20,7 +42,7 @@ export class MdsTabBar {
         });
     }
     render() {
-        return (h(Host, { key: '84740f9df076cec8856a6cbe740bfc3f1611cbb8' }, h("slot", { key: '0ce78860c913e57192918839130e566b349b7804' })));
+        return (h(Host, { key: 'a874af977206198e723eeb535c7378538e474a2e', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: '68e238b6950a366c7a18a8c03d92a34040487264' })));
     }
     static get is() { return "mds-tab-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -34,6 +56,14 @@ export class MdsTabBar {
             "$": ["mds-tab-bar.css"]
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changedEvent",

package/dist/collection/components/mds-tab-bar-item/mds-tab-bar-item.css

@@ -47,11 +47,10 @@ mds-text {
   --mds-tab-bar-item-background-selected: transparent;
   --mds-tab-bar-item-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-tab-bar-item-color-selected: rgb(var(--variant-primary-03, 211 226 255));
+  --mds-tab-bar-item-transition-duration: var(--duration-200, 200ms);
+  --private-tab-bar-item-transition-duration: var(--mds-tab-bar-item-transition-duration);
 
-  @apply duration-200
-    ease-in-out
-    gap-100
-    p-200;
+  @apply ease-in-out;
 
   align-items: center;
   background-color: var(--mds-tab-bar-item-background, rgb(var(--tone-neutral-10, 60 60 60)));
@@ -63,7 +62,10 @@ mds-text {
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
+  gap: --spacing(100);
+  padding: --spacing(200);
   text-align: center;
+  transition-duration: var(--private-tab-bar-item-transition-duration);
   transition-property: color, background-color, fill;
 }
 
@@ -73,38 +75,56 @@ mds-text {
   fill: var(--mds-tab-bar-item-color-selected, rgb(var(--variant-primary-03, 211 226 255)));
 }
 
-: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-tab-bar-item-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-tab-bar-item-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-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-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-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) {
+/* 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));
   }

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

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
@@ -29,6 +30,27 @@ export class MdsTabBarItem {
     componentWillLoad() {
         this.isSelected = this.selected;
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     validateSelected(newValue) {
         this.isSelected = newValue;
     }
@@ -36,7 +58,7 @@ export class MdsTabBarItem {
         this.label = sanitizeLabel(newValue);
     }
     render() {
-        return (h(Host, { key: 'f3c37cdf12cd99a5e9c2ffa3ef04af68548c4c3c', onClick: this.select }, h("mds-icon", { key: 'f79a29591079ab87d9afcc6e5bcf3acf8db4c66c', name: this.icon }), h("mds-text", { key: '5399aa307b7c9e097232b903e3482b2f2d8eebc4', typography: this.typography }, this.label || h("slot", { key: 'ebd5d848468f5f0fd895c93b5c67f7954636234a', onSlotchange: this.onSlotChangeHandler }))));
+        return (h(Host, { key: 'cc00fc45e7c8086a20e3800a9aca2fad80c08b7e', onClick: this.select, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-icon", { key: '7edf9ade273c6408a477b9ccefd00be8fa323501', name: this.icon }), h("mds-text", { key: '42e04f0959f32573efbe01cc294d0a7a3754423f', typography: this.typography }, this.label || h("slot", { key: 'a654056dce145ce9bc0236cd4381e8b89f743dc5', onSlotchange: this.onSlotChangeHandler }))));
     }
     static get is() { return "mds-tab-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +163,10 @@ export class MdsTabBarItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "isSelected": {}
         };
     }

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

@@ -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);
   }