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

package/dist/collection/components/mds-input-date-range/mds-input-date-range.js

@@ -3,6 +3,7 @@ import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import clsx from "clsx";
 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";
@@ -134,6 +135,12 @@ export class MdsInputDateRange {
                 .startOf('month')
                 .toISODate();
         };
+        this.handleCalendarPreselect = () => {
+            this.checkPreselections();
+        };
+        this.handleOpenCalendarClick = () => {
+            this.calendarKey += 1;
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -263,10 +270,28 @@ export class MdsInputDateRange {
         }
         this.syncFormValue();
     }
+    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('focusout', this.handleFocusOut);
-        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
+        (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     /**
      * Applies the given preselection range to the input.
@@ -424,21 +449,13 @@ export class MdsInputDateRange {
         return (h("div", { class: "calendar-preselection-panel" }, h("div", { class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, h("slot", { name: "calendar-preselection" }))));
     }
     renderSingleCalendar() {
-        return (h("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+        return (h("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: this.handleCalendarPreselect, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
     }
     renderDualCalendars() {
-        return (h("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {}))), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+        return (h("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: this.handleCalendarPreselect, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {}))), h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: this.handleCalendarPreselect, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
     }
     render() {
-        return (h(Host, { key: '13d9a565316927ca4ec2586f82e2f25f7d04ae25', onClick: this.focusDateInput }, h("div", { key: '71bda796783e6ead96c24ad4ed84ac79265291e8', class: "inputs" }, h("div", { key: 'c06b73facc486130eb89e857b782b15581cfba20', class: "input-element" }, h("mds-text", { key: '340fa48ce0a88bd6445cfc874c27ec70e2426feb', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: 'b82416e3ffa442ee84004d20e298b859ca5543a8', class: "input-wrapper" }, h("slot", { key: '9b8741fecf76c4503e58b044222b4ccb6bb889e0', name: "start" }))), h("div", { key: 'fcd38e4e5d5a065001c712a960dd5bcae1dd5e79', class: "input-element" }, h("mds-text", { key: '269cdf295bfefe625a3cf98f1aaf7fb021b688d4', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: 'ee917dba0a0af805e1ebe5b69fb997b492e044ba', class: "input-wrapper" }, h("slot", { key: 'dd22c8a98be387b76aa6b355f6b025db1a8fdbb6', name: "end" })))), h("div", { key: 'ca651a85e149d23e4eafdf66c121ffa3d5685dca', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'ff5e89aec57614f98890f52859bc2f10e33bc85d', class: "action-open-calendar", variant: "dark", tone: "text", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
-                this.calendarKey += 1;
-            } })), h("mds-dropdown", { key: '30609e1d1eb75209b5e17444758b1b9b2ac19bce', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
+        return (h(Host, { key: '70d713a2ba286fe3ee69feb5b804e043c0357166', onClick: this.focusDateInput, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '35518a0ed132cd6977c0a557a2f45438c7a9db6b', class: "inputs" }, h("div", { key: 'befa6ce8026d0f02451c5bda8f174252214a3457', class: "input-element" }, h("mds-text", { key: '7919fc8583f940b6a7ab46f6da35067c245f1c4e', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), h("div", { key: '9a9d1e950e8523423fba228b66b99d63722ae3f3', class: "input-wrapper" }, h("slot", { key: 'a4c7031eb4db25ebe766650676475a1b70c7a27f', name: "start" }))), h("div", { key: 'c033efadef102cac6d615505e1b8cd476e4bd911', class: "input-element" }, h("mds-text", { key: 'fe5cbbbb85d2f4895236de71c79b3850c076fbac', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), h("div", { key: '64e5392cb8d476e099d3efcd4b86958f2601986f', class: "input-wrapper" }, h("slot", { key: 'c2ff17f4e61a42a8afe50488847ccd3b71c670cf', name: "end" })))), h("div", { key: '8e3d4fecf6eca2c7cfc90aa3cec5835626a33cbc', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'c12b6fcbe2a7e233ba45a224620a26f37200e097', class: "action-open-calendar", variant: "dark", tone: "text", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: this.handleOpenCalendarClick })), h("mds-dropdown", { key: 'eb088ba8ec6c6c82373efa9f5dad8cae23c63604', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "disable-auto-placement": true, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
     }
     syncFormValue() {
         var _a, _b, _c, _d;
@@ -623,6 +640,10 @@ export class MdsInputDateRange {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "calendarKey": {},
             "internalStartDate": {},
             "internalEndDate": {},

package/dist/collection/components/mds-input-field/mds-input-field.css

@@ -129,3 +129,51 @@ mds-text {
   --mds-input-field-message-background: rgb(var(--status-error-09, 135 0 14));
 }
 
+/* Propagate the field variant to the slotted input from the parent via
+ * ::slotted, instead of the input reading its field. Cross-browser (no
+ * :host-context); ::slotted (outer tree) wins over the input's own variant. */
+
+:host([variant='info']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-info-04, 159 216 241));
+  --mds-input-tip-background: rgb(var(--status-info-05, 112 198 234));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='info']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-info-05, 112 198 234));
+  --mds-input-variant-color-rgb: var(--status-info-04, 159 216 241);
+}
+
+:host([variant='warning']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-warning-04, 255 200 33));
+  --mds-input-tip-background: rgb(var(--status-warning-05, 237 177 0));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='warning']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-warning-05, 237 177 0));
+  --mds-input-variant-color-rgb: var(--status-warning-04, 255 200 33);
+}
+
+:host([variant='success']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-success-04, 158 222 181));
+  --mds-input-tip-background: rgb(var(--status-success-05, 107 206 147));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='success']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-success-05, 107 206 147));
+  --mds-input-variant-color-rgb: var(--status-success-04, 158 222 181);
+}
+
+:host([variant='error']) ::slotted(mds-input) {
+  --mds-input-icon-color: rgb(var(--status-error-04, 254 193 189));
+  --mds-input-tip-background: rgb(var(--status-error-05, 250 165 160));
+  --mds-input-variant-color-rgb: 0 0 0;
+}
+
+:host([variant='error']) ::slotted(mds-input:focus) {
+  --mds-input-icon-color: rgb(var(--status-error-05, 250 165 160));
+  --mds-input-variant-color-rgb: var(--status-error-04, 254 193 189);
+}
+

package/dist/collection/components/mds-input-range/mds-input-range.css

@@ -23,6 +23,8 @@ mds-text {
  */
 
 :host {
+  --mds-input-range-transition-duration: var(--duration-300, 300ms);
+  --private-input-range-transition-duration: var(--mds-input-range-transition-duration);
   --mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-08, 107 107 107));
   --mds-input-range-thumb-background: rgb(var(--tone-neutral, 0 0 0));
   --mds-input-range-thumb-cursor: col-resize;
@@ -39,13 +41,9 @@ mds-text {
   );
   --private-thumb-size: calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);
 
-  @apply duration-300
-    ease-in-out
-    gap-200;
-
   display: grid;
-  gap: --spacing(100);
-  transition-duration: var(--duration-300, 300ms);
+  gap: --spacing(200);
+  transition-duration: var(--private-input-range-transition-duration);
   transition-property: color;
   transition-timing-function: var(--ease-in-out);
 }
@@ -73,15 +71,13 @@ mds-text {
 }
 
 .track {
-  @apply w-full;
-
   box-sizing: border-box;
   position: absolute;
   width: 100%;
 }
 
 .field {
-  @apply focus-bounce z-20;
+  @apply focus-bounce;
 
   appearance: none;
   background-color: transparent;
@@ -89,6 +85,7 @@ mds-text {
   flex-grow: 1;
   height: --spacing(400);
   margin: 0;
+  z-index: 20;
 }
 
 .field:focus-visible {
@@ -121,7 +118,7 @@ mds-text {
   background-color: var(--mds-input-range-track-progress-background);
   display: flex;
   height: var(--mds-input-range-track-size);
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-range-transition-duration);
   transition-property: background-color;
 
   /*
@@ -141,7 +138,7 @@ mds-text {
   display: flex;
   height: var(--mds-input-range-track-size);
   overflow: hidden;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-range-transition-duration);
   transition-property: background-color;
   transition-timing-function: var(--ease-in-out);
   width: 100%;
@@ -165,53 +162,57 @@ mds-text {
   cursor: not-allowed;
 }
 
-: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). */
 
-  .field::-webkit-slider-thumb,
-  .field::-webkit-slider-runnable-track,
-  .track-progress,
-  .track-total {
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-input-range-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
-
-    .field::-webkit-slider-thumb,
-    .field::-webkit-slider-runnable-track,
-    .track-progress,
-    .track-total {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-range-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-input-range-thumb-background: rgb(var(--variant-primary-04, 184 208 255));
   --mds-input-range-track-background: rgb(var(--tone-neutral-07, 134 134 134));
   --mds-input-range-track-progress-background: rgb(var(--variant-primary-05, 152 188 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-input-range-thumb-background: rgb(var(--variant-primary-04, 184 208 255));
     --mds-input-range-track-background: rgb(var(--tone-neutral-07, 134 134 134));
     --mds-input-range-track-progress-background: rgb(var(--variant-primary-05, 152 188 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']) {
   color: rgb(var(--tone-neutral-01, 255 255 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])) {
     color: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }

package/dist/collection/components/mds-input-range/mds-input-range.js

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part header - The element containing the labels displayed over the input element
  * @part track - The element containing the track of the input range
@@ -85,6 +86,27 @@ export class MdsInputRange {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    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);
+    }
     componentDidLoad() {
         var _a;
         this.decimalPlaces = this.countDecimals(this.step);
@@ -94,7 +116,7 @@ export class MdsInputRange {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a200a0ed9cc3735eab347999773ca856c8d2ded1' }, h("header", { key: 'b52c4601e16f356d76bffcb2018bc8cd66d2dbab', class: "header", part: "header" }, h("mds-text", { key: '7af7d0c88bb393bd1cad2c5a40a56fd26930e4fc', class: "label", typography: "label" }, h("slot", { key: '7f1482ea2b4f1ea553691f7613b9180e3447cc64' })), h("mds-text", { key: 'e8246bdc6dbeb8b5efaf3f2170e32cf725fb1462', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '1b8ee03cf6ad4213d9370bae15b3db0bb4e3bec3', class: "range" }, h("div", { key: 'e01ea5fb7bb7217c6e94a4f606ab3567bf6946c3', class: "track", part: "track" }, h("div", { key: 'a5b33522f8605dad0e07a02749e8905cbe23e689', class: "contrast-area" }), h("div", { key: '14699dffa17f50a13e008bae4c79b507cf1454dd', class: "track-total" }, h("div", { key: 'b601caf89612bb39ac586b77e14d7e86730098b7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: 'ea2948160dce05d3bdebbcf2f76adf01fb5159e5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'b820e8ed601040eee9bac980e0ee308a3d09de51', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("header", { key: 'f9849eb9243eaab7585991a7f32a7ecd0aa30d78', class: "header", part: "header" }, h("mds-text", { key: '9d32ebdd41564adfc5c4d4546017b87aeaef6580', class: "label", typography: "label" }, h("slot", { key: '6061c4d9d0987242ca08444370831aa55aa0e927' })), h("mds-text", { key: 'a8e588f3833bdd9a809b75b1f9cf2bef725ccd4e', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: 'b0ea4bd7ca1b5f82c4b6581d891a5ca3db71b901', class: "range" }, h("div", { key: '2d888c14de77f99cfbb651c470e85888869eefcf', class: "track", part: "track" }, h("div", { key: '0bd42dcedd84c2e8ce4ac8e922c40de108bca01c', class: "contrast-area" }), h("div", { key: 'd88d39f19a361f6a515ba9faf63bfce0961abb77', class: "track-total" }, h("div", { key: '82d7e7dd1e4741f89ab8ca250daf93b3e1fb7c28', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: 'c6d01e5b369efc8a60007255b1ae4c1cd2cfce03', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +271,11 @@ export class MdsInputRange {
     }
     static get states() {
         return {
-            "progress": {}
+            "progress": {},
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
         };
     }
     static get events() {

package/dist/collection/components/mds-input-select/mds-input-select.css

@@ -123,6 +123,12 @@ mds-input-tip-item {
   --mds-input-tip-horizontal-offset-focused: --spacing(1000);
   --mds-input-tip-vertical-offset: --spacing(100);
   --mds-input-tip-background: rgb(var(--tone-neutral-03, 233 233 233));
+  --mds-input-select-transition-duration: var(--duration-300, 300ms);
+  --mds-input-select-icon-transition-duration: var(--duration-200, 200ms);
+
+  /* private */
+  --private-input-select-transition-duration: var(--mds-input-select-transition-duration);
+  --private-input-select-icon-transition-duration: var(--mds-input-select-icon-transition-duration);
 
   @apply text-info-detail;
 
@@ -164,7 +170,7 @@ mds-input-tip-item {
   padding-left: --spacing(400);
   padding-right: --spacing(1200);
   text-overflow: ellipsis;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-select-transition-duration);
   transition-property: background-color, border-color, box-shadow, color, fill;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
   width: 100%;
@@ -175,7 +181,7 @@ mds-input-tip-item {
   @apply outline-hidden;
 
   color: rgb(var(--tone-neutral-03, 233 233 233));
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-select-transition-duration);
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
 
@@ -221,7 +227,7 @@ mds-input-tip-item {
   background-color: var(--mds-input-select-arrow-icon-background-color, var(--mds-input-select-arrow-icon-blur-background-color, rgb(var(--mds-input-select-variant-color-rgb, var(--tone-neutral-01, 255 255 255)) / 0)));
   border-radius: var(--radius-full, 1000px);
   fill: var(--mds-input-select-arrow-icon-color, var(--mds-input-select-arrow-icon-blur-color, rgb(var(--mds-input-select-variant-color-rgb, var(--tone-neutral-01, 255 255 255)) / 0.5)));
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-input-select-icon-transition-duration);
   transition-property: background-color, fill;
 }
 
@@ -331,32 +337,33 @@ mds-input-tip {
   --mds-input-select-variant-color-rgb: var(--status-error-05, 250 165 160);
 }
 
-: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). */
 
-  .input,
-  .input:hover,
-  .input:focus,
-  .icon {
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-input-select-transition-duration: 0s;
+  --private-input-select-icon-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
-
-    .input,
-    .input:hover,
-    .input:focus,
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-select-transition-duration: 0s;
+    --private-input-select-icon-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-input-select-ring: var(--shadow-outline-50);
   --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05, 152 188 255));
   --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
@@ -369,8 +376,8 @@ mds-input-tip {
 }
 
 @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-input-select-ring: var(--shadow-outline-50);
     --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05, 152 188 255));
     --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
@@ -383,7 +390,12 @@ mds-input-tip {
   }
 }
 
-: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-input-select-ring: var(--shadow-outline-strong-50);
 
   .input {
@@ -392,8 +404,8 @@ mds-input-tip {
 }
 
 @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-input-select-ring: var(--shadow-outline-strong-50);
 
     .input {

package/dist/collection/components/mds-input-select/mds-input-select.js

@@ -1,4 +1,5 @@
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import { Host, h, } from "@stencil/core";
 /**
@@ -155,6 +156,27 @@ export class MdsInputSelect {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    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);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
@@ -171,12 +193,12 @@ export class MdsInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: '464b7c512e49866bfeb174c68feb33eca3f85bce' }, h("select", { key: 'fbf891a0e4bc63ea509252bbbb7c5c0de9a04c4a', class: "input", onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, h("option", { key: 'b5b46a1fee6ba457b47c79123051bf5976bfa7fc', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue != null &&
+        return (h(Host, { key: '729807a3442ef1465c131a06041aa3e661e7362d', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("select", { key: '708f45218c8651e99143fbc99f4d701d3837cdf5', class: "input", onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, h("option", { key: '8aca9030ca7eecb8bd90347ab0f65dd6195bf446', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue != null &&
                 this.defaultValue !== '' &&
                 this.defaultValue !== 0 &&
                 !Number.isNaN(this.defaultValue)
                 ? undefined
-                : true }, this.placeholder)), h("div", { key: 'e3101de2d9c66aee324ef4dfc332b560e6c561bf', class: "icon-container" }, h("i", { key: 'f191aadd1e565a1182e9bb7ac956a6149b170d1e', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'ae377495ebb30aed7580ebd67d4d2bd0080cc1bf', class: "option-container" }, h("slot", { key: '77c743369dbed2bfd1c86f2b9803a3055cc7e7f5', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '31e000f584381fa7c7324f99ccfa9b068eb35af8', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '456fa339c96db8e85d4d6df4cf61bb880c467d78', expanded: true, variant: "disabled" }), this.required && (h("mds-input-tip-item", { key: '3778f2888a7d3bca817edcbf31d77b30a73fdd77', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
+                : true }, this.placeholder)), h("div", { key: 'c9ec4a12c6a1c61a843bd8e3b17fa49060f59cf4', class: "icon-container" }, h("i", { key: '8b1dffa75c8ccb7e69236d06cb22fedd75663721', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '829bd49c29b9f890f36e88f09f1685a4675b4d37', class: "option-container" }, h("slot", { key: '7c077c0c8e5a46cfbd1707fc405e453cd12839d0', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'fb95b541445b5c5a2cdd7e8dda6f71e0a4a7dc8a', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '1f49975a3d659e263ed400edcc77a0d1ba3ca1ca', expanded: true, variant: "disabled" }), this.required && (h("mds-input-tip-item", { key: '45829a603cbd0c208e49c0103be849ada469db1a', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -418,6 +440,10 @@ export class MdsInputSelect {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "hasFocus": {},
             "language": {}
         };

package/dist/collection/components/mds-input-switch/mds-input-switch.css

@@ -511,7 +511,13 @@ mds-text {
   --mds-input-switch-icon-explicit-color: var(--mds-input-switch-icon-color-unchecked-disabled, rgb(var(--tone-neutral-06, 158 158 158)));
 }
 
-: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-input-switch-box-color-enabled-checked: rgb(var(--variant-primary-04, 184 208 255));
   --mds-input-switch-box-color-enabled-unchecked: rgb(var(--tone-neutral-06, 158 158 158));
   --mds-input-switch-box-color-disabled-checked: rgb(var(--tone-neutral-08, 107 107 107));
@@ -529,8 +535,8 @@ mds-text {
 }
 
 @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-input-switch-box-color-enabled-checked: rgb(var(--variant-primary-04, 184 208 255));
     --mds-input-switch-box-color-enabled-unchecked: rgb(var(--tone-neutral-06, 158 158 158));
     --mds-input-switch-box-color-disabled-checked: rgb(var(--tone-neutral-08, 107 107 107));

package/dist/collection/components/mds-input-switch/mds-input-switch.js

@@ -6,6 +6,7 @@ import { KeyboardManager } from "../../common/keyboard-manager";
 import { inputSwitchIconVariant } from "./meta/variants";
 import { hasSlotted } from "../../common/slot";
 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";
@@ -121,6 +122,19 @@ export class MdsInputSwitch {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         var _a, _b;
         this.language = this.t.lang(this.host);
@@ -133,7 +147,7 @@ export class MdsInputSwitch {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: '2567f5e3e7e467b8e631ea7811d57006c4b1c5d3', onClick: this.handleDirty }, h("input", { key: 'b33e197bed24584b0f1a1f795a699f8d4c2ba1ea', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: (event) => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: '1972a79c1db097026c9833f47da6eb96a7d95d6d', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: '041a88fbb8a21a4a5eb810947c29dbce24665651', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: 'ea04ede1e08f07893d941eb2426a7cb0d9005a3d' })))));
+        return (h(Host, { key: '963b8366404d13af6237a061c10d7b7f3512ff47', onClick: this.handleDirty, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("input", { key: '1d13fb479902008db6d8f8bce420aea5eabb8232', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: this.handleInputOnChange, type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: 'e95925e2b9c53b9fb5e2dba6523d24b573eb4849', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: 'cc1fd90f2ac22285cb764b4cce34e80180d95431', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: '2bfaae2683bf4b30daf69d07febbf7848605e1de' })))));
     }
     static get is() { return "mds-input-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -422,6 +436,8 @@ export class MdsInputSwitch {
     }
     static get states() {
         return {
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "dirty": {},
             "hasText": {},
             "language": {}