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

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

@@ -74,6 +74,9 @@ export class MdsImg {
         this.setAriaAttributes = () => {
             setAttributeIfEmpty(this.host, 'aria-label', this.alt);
         };
+        this.handleConsumptionLoadClick = () => {
+            this.imageConsumptionLoaded = true;
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -112,9 +115,7 @@ export class MdsImg {
         }
         if (this.srcsetConsumptionData) {
             if (this.consumptionMode === 'low') {
-                return (h(Host, { "aria-label": this.alt, role: "img", onClick: () => {
-                        this.imageConsumptionLoaded = true;
-                    } }, h("div", { class: "contrast-area-50" }), !this.imageConsumptionLoaded ? (h("div", { "aria-hidden": "true", class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { "aria-hidden": "true", role: "none", class: "click-to-load", tabIndex: -1, variant: "light", tone: "outline" }, this.t.get('clickToLoad')))) : (h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_a = this.srcsetConsumptionData[this.consumptionMode]) !== null && _a !== void 0 ? _a : this.src, srcset: this.srcset, width: this.width }))));
+                return (h(Host, { "aria-label": this.alt, role: "img", onClick: this.handleConsumptionLoadClick }, h("div", { class: "contrast-area-50" }), !this.imageConsumptionLoaded ? (h("div", { "aria-hidden": "true", class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { "aria-hidden": "true", role: "none", class: "click-to-load", tabIndex: -1, variant: "light", tone: "outline" }, this.t.get('clickToLoad')))) : (h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_a = this.srcsetConsumptionData[this.consumptionMode]) !== null && _a !== void 0 ? _a : this.src, srcset: this.srcset, width: this.width }))));
             }
             return (h(Host, { "aria-label": this.alt, role: "img" }, h("div", { class: "contrast-area-50" }), h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_b = this.srcsetConsumptionData[this.consumptionMode]) !== null && _b !== void 0 ? _b : this.src, srcset: this.srcset, width: this.width })));
         }

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

@@ -153,10 +153,12 @@ mds-spinner {
   --mds-input-tip-vertical-offset: --spacing(100);
   --mds-input-variant-color-rgb: var(--variant-primary-03, 211 226 255);
   --mds-input-border-radius: var(--radius-xl, 20px);
+  --mds-input-transition-duration: var(--duration-300, 300ms);
 
   /* private */
   --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-controls-color: rgb(var(--tone-neutral-03, 233 233 233));
+  --private-input-transition-duration: var(--mds-input-transition-duration);
 
   border-radius: var(--mds-input-border-radius);
   container-type: inline-size;
@@ -192,7 +194,7 @@ mds-spinner {
   overflow: hidden;
   padding: --spacing(300) --spacing(400);
   text-overflow: ellipsis;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-transition-duration);
   transition-property:
     background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
@@ -223,7 +225,7 @@ mds-spinner {
 
 :host textarea.input,
 :host([typography]) textarea.input {
-  border-radius: var(--radius-xs, 8px);
+  border-radius: var(--mds-input-border-radius);
   field-sizing: var(--mds-input-textarea-field-sizing, content);
   max-height: var(--mds-input-textarea-max-height, --spacing(6400));
   min-height: var(--mds-input-textarea-min-height, --spacing(2400));
@@ -487,76 +489,42 @@ mds-input-tip {
   --mds-input-variant-color-rgb: var(--status-error-04, 254 193 189);
 }
 
-:host-context(mds-input-field[variant='info']):host {
-  --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;
-}
+/* 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-context(mds-input-field[variant='info']):host(: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([pref-animation='reduce']) {
+  --private-input-transition-duration: 0s;
 }
 
-:host-context(mds-input-field[variant='warning']):host {
-  --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-context(mds-input-field[variant='warning']):host(: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-context(mds-input-field[variant='success']):host {
-  --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-context(mds-input-field[variant='success']):host(: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-context(mds-input-field[variant='error']):host {
-  --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-context(mds-input-field[variant='error']):host(: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);
-}
-
-:host-context(:root.pref-animation-reduce) .input {
-  transition-duration: 0s;
-}
-
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .input {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-transition-duration: 0s;
   }
 }
 
-: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-ring: var(--shadow-outline-strong-50);
   --mds-input-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));
 }
 
-:host-context(:root.pref-contrast-more) .input::placeholder {
+:host([pref-contrast='more']) .input::placeholder {
   color: rgb(var(--tone-neutral-03, 233 233 233));
 }
 
 @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-ring: var(--shadow-outline-strong-50);
     --mds-input-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));
@@ -567,7 +535,13 @@ mds-input-tip {
   }
 }
 
-: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-ring: var(--shadow-outline-50);
   --mds-input-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -578,8 +552,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-ring: var(--shadow-outline-50);
     --mds-input-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));

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

@@ -18,6 +18,7 @@ import localeIt from "./meta/locale.it.json";
 import { createInputValidationManager, } from "./meta/input-type/InputValidationManager";
 import { maxLenghtValidator, maxValidator, minLenghtValidator, minValidator, requiredValidor, } from "./meta/validators";
 import { hashRandomValue } from "../../common/aria";
+import { subscribePreference } from "../../common/preference";
 export class MdsInput {
     constructor() {
         this.speechToTextIcon = miOutlineMic;
@@ -160,6 +161,9 @@ export class MdsInput {
             this.speechToTextIcon = miBaselineDone;
             this.startRecognition();
         };
+        this.handlePasswordToggleClick = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+        };
         this.onSpeechRecognitionError = () => {
             console.error('SpeechRecognition API may not work properly on Chrome based browsers.');
             this.speechButton.classList.remove('mic-toggle-button--recording');
@@ -225,8 +229,27 @@ export class MdsInput {
         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;
+        });
         this.datalistId = `datalist-${hashRandomValue()}`;
     }
+    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() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -370,9 +393,9 @@ export class MdsInput {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ad6a22b8162d976d62a9991054934c71c218c500' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: '68c91a11f6c37cea5e21c9695522e45213050d45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'fd2b20e2a3ed42a61b6728fcadfd305f34c6a446', class: "counter counter--vertical" }, h("mds-button", { key: '48a253a2ca7e4ee58228c0a6df600ef366e984cc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: '0a6b850aae842b24dc4f7ef8988a75990de136aa', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'ea3e0594d7a31601bbe20cc4e38afd4bec6cdff7', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: 'bf34d6df82fc3e960fbcbc3067d92b433b42accd', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => (this.isPasswordVisible = !this.isPasswordVisible), tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: '99ec0f020348a5de910ab91fd42e1bd4484e4aff', class: "password-mask" }, h("div", { key: '3551407dcbde2547391f940c3a010a7c0855ef85', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '49dbb6cffac109437ac5de7357a1a995d9c9d22f', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), h("mds-input-tip", { key: 'a81de1242c891bc7a82d6a213e854af3b7f7e6b6', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'b6ec44b88905eded511cf192504853c5e7eaa287', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'ce523b25baf2300715d12b5bef5c0842d2a19fd9', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: '7aa2b62701797678d32bdb43f7c0d3c0da47443c', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: '17cf961c116164a7266e5541693dc00435b72e16', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: 'e604b97d70fd47ee4a9681272a1a95f1aafc3a82', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '572470935113d9182e9d96c0ef743d4c30ffbf22', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '1501e7a01bc73103691be34570420ab8f2601e75', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+        return (h(Host, { key: '0d7460db7aad441110cd7f4d47764c2d9e791108', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'c172027bf96b0c93dbf96d248a1c88b301039e45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'f3a88361f0941911d29d0c6d705d0960857a336b', class: "counter counter--vertical" }, h("mds-button", { key: '0843bbc7172058eab2b159c3886f196f64220f82', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: '3e820603b927109d00d1619f9767543ce99cb0d4', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'eb607c83b10df8828ad70794795a098fc6b14105', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: '94118a6d845831badad930088ff46643c3247d9f', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: this.handlePasswordToggleClick, tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: '4026d3f3e1fef4cb7ed4f8f5ba6e5da8ebc0909d', class: "password-mask" }, h("div", { key: 'c7cebe84657042702702c76d9e60e57423ca4350', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '7c2c2928717675d31808a25d3f42b3ebb1d3470a', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: this.toggleTextRecognition, tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), h("mds-input-tip", { key: '5f0cb96e29178d3b1ab54c3172cec7123aab665a', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'd0bd26011d9831b88c3e3d5cbe4aacb7e7d5f1f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '7f36c1740c4ce9835e361b423a6e569d0d9b9c1d', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'e9208eb5f269492e0700196bf2837fd00a7558c2', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: 'faa8b92c6f881b6945923162b6f3a9ffb14311cf', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: 'dbb4cd6b9525f2e27e685886d158848fc9fc3096', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '4be41bf4d722fb252bb55bb9a6f069277ba50b23', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '18f5d2db217e70e0e96769550630eb21e41fa4fd', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
             return h("option", { key: i, value: element });
-        }))), this.icon && !this.await && (h("mds-icon", { key: '5e3eb451e9d1bbc2d1c2c253c8baa80b5ba8a9ed', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: 'f0606534fb2a0b698a28548d48352e5429302d1b', running: this.await, class: clsx('await', this.variant) })));
+        }))), this.icon && !this.await && (h("mds-icon", { key: 'be8705af2bfacf0b7b36b2e3d4c2b0267f2d9875', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: 'c3644543256d040a5f9538c2ab60ec07feed04fe', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -901,6 +924,10 @@ export class MdsInput {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "hasFocus": {},
             "language": {},
             "isRecording": {},

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

@@ -102,6 +102,10 @@
   --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-date-transition-duration: var(--duration-300, 300ms);
+
+  /* private */
+  --private-input-date-transition-duration: var(--mds-input-date-transition-duration);
 
   @apply text-info-detail;
 
@@ -135,7 +139,7 @@
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-date-transition-duration);
   transition-property:
     background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
@@ -165,7 +169,6 @@
   min-height: 3rem;
   padding-left: --spacing(400);
   padding-right: --spacing(1200);
-  padding-top: --spacing(300);
   width: 100%;
 }
 
@@ -250,20 +253,31 @@ mds-input-tip-item {
   }
 }
 
-:host-context(:root.pref-animation-reduce) .input {
-  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-input-date-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .input {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-date-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-date-ring: var(--shadow-outline-50);
   --mds-input-date-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -274,8 +288,8 @@ mds-input-tip-item {
 }
 
 @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-date-ring: var(--shadow-outline-50);
     --mds-input-date-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -286,7 +300,12 @@ mds-input-tip-item {
   }
 }
 
-: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-date-ring: var(--shadow-outline-strong-50);
   --mds-input-date-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));
@@ -297,8 +316,8 @@ mds-input-tip-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-input-date-ring: var(--shadow-outline-strong-50);
     --mds-input-date-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import miBaselineCalendarToday from "@icon/mi/baseline/calendar-today.svg";
 import { DateTime } from "luxon";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 // TODO add input validation manager for error message
 export class MdsInputDate {
     constructor() {
@@ -77,6 +78,20 @@ export class MdsInputDate {
                 }, 10);
             }
         };
+        this.handleOpenCalendarClick = () => {
+            this.calendarKey += 1;
+        };
+        this.handleCalendarChange = (ev) => {
+            this.value = ev.detail.startDate;
+            if (this.delay === 0)
+                return;
+            const { dropdownRef } = this;
+            if (dropdownRef) {
+                setTimeout(() => {
+                    dropdownRef.visible = false;
+                }, this.delay);
+            }
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -137,6 +152,27 @@ export class MdsInputDate {
     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.isSlotted = !(this.host.getAttribute('slot') === null || this.host.getAttribute('slot') === '');
         this.value = this.value || '';
@@ -152,19 +188,7 @@ export class MdsInputDate {
         this.validateValue();
     }
     render() {
-        return (h(Host, { key: '1c3f9c46a1a1bc77e6639135ffe9615b91754289', empty: this.empty }, h("input", { key: 'e8867ce0ccc07885b616cd0c898859d4d378d70c', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (h("div", { key: '82e8e07567fceed4f0a589f8ceac9057c9aaa324', class: "action-open-calendar-wrapper" }, h("mds-button", { key: '9c22475d725089ae3ccfe4c39aac26149726e8ff', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: miBaselineCalendarToday, onClick: () => {
-                this.calendarKey += 1;
-            } }))), h("mds-input-tip", { key: '3b4a5d49acf05f853839b7317a2e8bfe8d7d487d', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '987565a2df5bcaf1a538f3bf276cd6f7a12811a9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'b51c192d654c65279fb2bdb0eb43952cc51e02e0', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'acd20e717f7abab93a5750f7125f06f55d618da8', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (h("mds-dropdown", { key: '9c2d0e843d019c530509f30cd37e890f5ab351a8', placement: "bottom-end", "auto-placement": false, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: (ev) => {
-                this.value = ev.detail.startDate;
-                if (this.delay === 0)
-                    return;
-                const { dropdownRef } = this;
-                if (dropdownRef) {
-                    setTimeout(() => {
-                        dropdownRef.visible = false;
-                    }, this.delay);
-                }
-            }, startDate: this.value }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))))));
+        return (h(Host, { key: '4d896aae88a4637f371861ee251e2337530baded', empty: this.empty, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("input", { key: '5e58df1c7b4e43e9c31c2660d31180efd2ac813e', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (h("div", { key: 'bd68590ff1bbbc0a3a744e44e88d6a3bca11fdca', class: "action-open-calendar-wrapper" }, h("mds-button", { key: 'f3bd3316bce646eb4df4eb368a952096397447e7', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: miBaselineCalendarToday, onClick: this.handleOpenCalendarClick }))), h("mds-input-tip", { key: '9f4264859de66046a3761ec96083c09c53bdced9', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '8be9f58f10be7407d6c76d5e7b79e2faaa6aaa86', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '144bce0f9a1a67593be23decd4a59e34c342b359', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'efcafab1b01ddb3983299273dbddae86af6f621d', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (h("mds-dropdown", { key: 'df129e18751e4312509dc60ea4538fb4797071ff', placement: "bottom-end", "disable-auto-placement": true, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: this.handleCalendarChange, startDate: this.value }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))))));
     }
     static get is() { return "mds-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -383,6 +407,10 @@ export class MdsInputDate {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "empty": {},
             "isValid": {},
             "language": {},

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

@@ -85,6 +85,10 @@ mds-text {
     0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb, 0 0 0) / 0.1),
     0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb, 0 0 0) / 0.06);
   --mds-input-date-range-variant-color-rgb: 0 0 0;
+  --mds-input-date-range-transition-duration: var(--duration-300, 300ms);
+
+  /* private */
+  --private-input-date-range-transition-duration: var(--mds-input-date-range-transition-duration);
 
   @apply text-info-detail;
 
@@ -124,7 +128,7 @@ mds-text {
   padding-left: --spacing(400);
   padding-right: --spacing(1200);
   text-overflow: ellipsis;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-date-range-transition-duration);
   transition-property:
     background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
@@ -219,20 +223,31 @@ mds-dropdown {
   padding: 0;
 }
 
-:host-context(:root.pref-animation-reduce) .input {
-  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-input-date-range-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .input {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-date-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-date-range-ring: var(--shadow-outline-50);
   --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -243,8 +258,8 @@ mds-dropdown {
 }
 
 @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-date-range-ring: var(--shadow-outline-50);
     --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-06, 158 158 158));
@@ -255,7 +270,12 @@ mds-dropdown {
   }
 }
 
-: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-date-range-ring: var(--shadow-outline-strong-50);
   --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));
@@ -266,8 +286,8 @@ mds-dropdown {
 }
 
 @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-date-range-ring: var(--shadow-outline-strong-50);
     --mds-input-date-range-background: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-input-date-range-controls-border: 2px solid rgb(var(--tone-neutral-05, 197 197 197));