@maggioli-design-system/magma 2.0.0-beta.1 → 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
  */
@@ -44,6 +45,9 @@ export class MdsStepperBarItem {
             return (h("mds-badge", { class: "badge", variant: "dark", tone: "weak", typography: "option" }, this.t.get('badgeQueued')));
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -61,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) {
@@ -71,7 +82,7 @@ export class MdsStepperBarItem {
         this.isCurrent = newValue;
     }
     render() {
-        return (h(Host, { key: '117ff77114f72fb2e58659a53a594b133092edc2' }, h("div", { key: 'bdfcff07ea6e0c849643b1c36d8d0a3004d90a0f', class: "header" }, h("mds-icon", { key: '15a20b0bb4bd3ec80e04890fafe28f657aa50c62', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '3da9d9cd257d82f7628f5f2845524854fd6a43e2', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: '21ceca94f0545a0110558483668f289122fb2dcf', class: "infos" }, this.step && (h("mds-text", { key: 'd7609567247c9cf43acf3a52b8ee0c3e1697fbc5', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (h("mds-text", { key: '3fc26167d085031d5ff9c7241c80046d28a1843d', class: "text", typography: this.typography }, this.label)), this.badge && h("div", { key: '1ff407f2b05a19f13d3cdf7abc508853e9fb951c', 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"; }
@@ -273,6 +284,7 @@ export class MdsStepperBarItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
             "isDone": {},
             "isCurrent": {},
             "index": {},
@@ -319,7 +331,7 @@ export class MdsStepperBarItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-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,12 +2,13 @@ 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`.
  * @part tabs - Selects the container of `mds-tab-item` list elements.
  * @slot content - Add `HTML elements` or `components`, one per mds-tab-item added.
- * @slot default - Add `mds-tab-item` element/s.
+ * @slot - Add `mds-tab-item` element/s.
  */
 export class MdsTab {
     constructor() {
@@ -42,9 +43,11 @@ 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) {
+                if (item.id === '') {
                     setAttributeIfEmpty(item, 'id', hashRandomValue('mds-tab-item'));
                 }
                 if (item.selected) {
@@ -75,7 +78,7 @@ export class MdsTab {
             this.updateOverflowState();
         };
         this.updateOverflowState = () => {
-            if (!this.tabs || !this.tabsContainer)
+            if (this.tabs == null || this.tabsContainer == null)
                 return;
             const containerWidth = this.tabsContainer.offsetWidth;
             const tabsWidth = this.tabs.scrollWidth;
@@ -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: 'cce3940ff16568da1dfe05f92703e4728bccb046' }, h("div", { key: '36e2dac7142dc4656ffc7e8c0428a3cebf922eeb', class: clsx('tabs-wrapper', this.fill && 'tabs-wrapper--fill') }, this.overflow && (h("div", { key: '12f6f6cbbdd3de8aacddb74cd9dd853e4d6b8b3d', class: clsx('tabs-wrapper-overflow-left', this.overflowLeft && 'tabs-wrapper-overflow-left--show') })), this.overflow && (h("div", { key: '5fbac5f5d688d73c5691a5620876a3d3393ff3ce', class: clsx('tabs-wrapper-overflow-right', this.overflowRight && 'tabs-wrapper-overflow-right--show') })), h("div", { key: 'b20ce9bd0f6706d5f8ba7c89cdc1fe7656c59c81', class: "tabs", part: "tabs", role: "tablist" }, h("slot", { key: '6e1266f9ba7bb07121ea46e4b6703b11b6dc1dab' }), this.animation === 'slide' && (h("div", { key: 'b314111ac0a86da0fbe6105d2b152007df9102c8', 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: 'e3cc9d9abc57bd7ddcf6ee17043100d816100531', class: "contents", part: "contents" }, h("slot", { key: '4ecc3ff8d6687f293092d5420d0d4858da344d43', 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,6 +1,7 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `mds-tab-bar-item` element/s.
+ * @slot - Add `mds-tab-bar-item` element/s.
  */
 export class MdsTabBar {
     constructor() {
@@ -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: '65e92345e90f0b287bcb89e42803730b914bb6c1' }, h("slot", { key: 'c5eb2105f89f7957a0fb0aa5752d40d90d4396b3' })));
+        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,10 +1,14 @@
 import { Host, h, } from "@stencil/core";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export class MdsTabBarItem {
     constructor() {
+        /**
+         * The icon displayed in the tab bar item.
+         */
         this.icon = '';
         /**
          * Specifies the typography of the element
@@ -18,7 +22,7 @@ export class MdsTabBarItem {
         };
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(this.element);
         };
@@ -26,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;
     }
@@ -33,7 +58,7 @@ export class MdsTabBarItem {
         this.label = sanitizeLabel(newValue);
     }
     render() {
-        return (h(Host, { key: 'cfdd8682bdab7117d3853abff77c31f871314a20', onClick: this.select }, h("mds-icon", { key: '4dd1b08193a0c6c1238104c1484523b7cc074a8a', name: this.icon }), h("mds-text", { key: 'd8bb748fbc4941fd5b65101997a1a21b1b7a1ed4', typography: this.typography }, this.label || h("slot", { key: '7e4fead88e847406b6e22ac534fcd67862fbe613', 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"; }
@@ -61,7 +86,7 @@ export class MdsTabBarItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The icon displayed in the tab bar item."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,6 +163,10 @@ export class MdsTabBarItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "isSelected": {}
         };
     }