npm - @maggioli-design-system/magma - Versions diffs - 2.0.0-beta.1 → 2.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1223) hide show

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

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

@@ -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;
@@ -82,7 +83,7 @@ export class MdsInput {
         this.value = '';
         this.countMaxLength = () => {
             var _a, _b, _c;
-            if (!this.maxlength)
+            if (this.maxlength === undefined || this.maxlength === 0 || Number.isNaN(this.maxlength))
                 return;
             if (this.value === undefined)
                 return;
@@ -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');
@@ -170,7 +174,7 @@ export class MdsInput {
         };
         this.startRecognition = () => {
             var _a, _b, _c;
-            if (!this.speechButton) {
+            if (this.speechButton == null) {
                 this.speechButton = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mic-toggle-button');
             }
             const SpeechRecognition =
@@ -214,6 +218,9 @@ export class MdsInput {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.el);
         this.t.update();
@@ -222,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);
@@ -239,7 +265,7 @@ export class MdsInput {
         }
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
-        this.isValid = !(this.required && !this.value);
+        this.isValid = !(this.required && this.value === '');
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -254,13 +280,13 @@ export class MdsInput {
     setValidators() {
         if (this.required)
             this.inputValidation.validator.addValidator(requiredValidor);
-        if (this.max !== '' && Number(this.max))
+        if (this.max !== '' && Number(this.max) !== 0 && !Number.isNaN(Number(this.max)))
             this.inputValidation.validator.addValidator(maxValidator(Number(this.max)));
-        if (this.min !== '' && Number(this.min))
+        if (this.min !== '' && Number(this.min) !== 0 && !Number.isNaN(Number(this.min)))
             this.inputValidation.validator.addValidator(minValidator(Number(this.max)));
-        if (this.maxlength)
+        if (this.maxlength !== undefined && this.maxlength !== 0 && !Number.isNaN(this.maxlength))
             this.inputValidation.validator.addValidator(maxLenghtValidator(this.maxlength));
-        if (this.minlength)
+        if (this.minlength !== undefined && this.minlength !== 0 && !Number.isNaN(this.minlength))
             this.inputValidation.validator.addValidator(minLenghtValidator(this.minlength));
     }
     /**
@@ -293,10 +319,18 @@ export class MdsInput {
         }
         this.countMaxLength();
     }
+    /**
+     * Adds a validator to the input.
+     * @param validator the validator function to add
+     */
     async addValidator(validator) {
         this.inputValidation.validator.addValidator(validator);
         return Promise.resolve();
     }
+    /**
+     * Removes a previously added validator from the input.
+     * @param validator the validator function to remove
+     */
     async removeValidator(validator) {
         this.inputValidation.validator.removeValidator(validator);
     }
@@ -308,6 +342,10 @@ export class MdsInput {
     async hasValidator(validator) {
         return this.inputValidation.validator.hasValidator(validator);
     }
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     async getErrors() {
         return Promise.resolve(this.inputValidation.validator.errors);
     }
@@ -355,9 +393,9 @@ export class MdsInput {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '63efd28d71e55c73c829a0dd566f62e735bb6736' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'c7730f2bb6457570a922004478025712bbe0569c', 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: 'a11a1cdf049cfdbed17dc25b3d361d61e65fbfa3', class: "counter counter--vertical" }, h("mds-button", { key: '9456eac1d48a91187911f429f321a30a9f303b82', 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: 'c29f7bdd570957db6055898dd0af0dd1525d98b0', 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: '3d755f49f8464bfe4f6f7ca9e85157db825c3905', 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: '6641194c7b448b1d27f806c52c7cd011c0ae3ad5', 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: 'be0a893b00483e43582ebe1cbdf2de78ea9fdd1b', class: "password-mask" }, h("div", { key: '7ac73065205c17a04132d2076e768387f25c9164', 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: '6fdca5aca12eb56670883c2fa414802f9c6eb32f', 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: 'ab202ab518990cb89eeaf6e2aaf0d51f0b701f05', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: '76011dab3a8cf3fb65329be96e53748a86e17246', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '97a9d42fe7b76c4da7cc58c8cbb1135e635004e5', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'ccd9e6849514e7b6b8d556fffd5c0d8d2289ad08', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: 'db35b767d1030dfbea345de28279770e9b1e8293', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: '31d65280cbd8b23e61e485c5afef05c00134d00e', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '3da21c408e5a10820ab5f3ee2ec0513546e58bd7', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '7aaf629292a7f31c54c260367e5ee3ca66dce889', 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: '237c929482c18f7a52fdf7b9e82c5bce509f73b0', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: '33902197107e138f7eed71b59f05d46f077762a3', 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"; }
@@ -886,6 +924,10 @@ export class MdsInput {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "hasFocus": {},
             "language": {},
             "isRecording": {},
@@ -1014,7 +1056,7 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },
@@ -1024,7 +1066,7 @@ export class MdsInput {
                     "parameters": [{
                             "name": "validator",
                             "type": "(input: string) => MdsValidationErrors | null",
-                            "docs": ""
+                            "docs": "the validator function to add"
                         }],
                     "references": {
                         "Promise": {
@@ -1041,8 +1083,11 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Adds a validator to the input.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "validator the validator function to add"
+                        }]
                 }
             },
             "removeValidator": {
@@ -1051,7 +1096,7 @@ export class MdsInput {
                     "parameters": [{
                             "name": "validator",
                             "type": "(input: string) => MdsValidationErrors | null",
-                            "docs": ""
+                            "docs": "the validator function to remove"
                         }],
                     "references": {
                         "Promise": {
@@ -1068,8 +1113,11 @@ export class MdsInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Removes a previously added validator from the input.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "validator the validator function to remove"
+                        }]
                 }
             },
             "hasValidator": {
@@ -1124,8 +1172,11 @@ export class MdsInput {
                     "return": "Promise<MdsValidationErrors | null>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Returns the current validation errors, or `null` if the value is valid.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "the validation errors, or `null` when valid"
+                        }]
                 }
             },
             "setFocus": {

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

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