@momentum-design/components 0.141.1 → 0.141.3

package/dist/components/slider/slider.component.js

@@ -83,6 +83,7 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         this.spatialNavEditMode = false;
         this.addEventListener('keydown', this.handleKeyEvent.bind(this));
         this.addEventListener('mousedown', this.preventChange.bind(this));
+        this.addEventListener('pointerdown', this.preventChange.bind(this));
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -97,9 +98,6 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
             changedProperties.has('valueEnd')) {
             this.updateTrackStyling();
         }
-        if (changedProperties.has('softDisabled')) {
-            this.setSoftDisabled();
-        }
         if (changedProperties.has('range') || changedProperties.has('valueStart') || changedProperties.has('valueEnd')) {
             this.initializeRangeSlider();
         }
@@ -123,9 +121,14 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
     handleKeyEvent(evt) {
         var _a;
         const action = this.getActionForKeyEvent(evt);
+        if (this.softDisabled) {
+            if (action !== ACTIONS.TAB) {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }
+            return;
+        }
         if (this.getKeyboardNavMode() === NAV_MODES.SPATIAL) {
-            if (this.softDisabled)
-                return;
             const activeElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
             const isInputFocused = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === 'INPUT';
             evt.preventDefault();
@@ -157,25 +160,6 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                 }
             }
         }
-        else if (this.softDisabled && action !== ACTIONS.TAB) {
-            evt.preventDefault();
-            evt.stopPropagation();
-        }
-    }
-    /**
-     * Sets the soft-disabled state for the slider.
-     * Applies the appropriate ARIA attributes.
-     */
-    setSoftDisabled() {
-        this.inputElements.forEach(input => {
-            const inputElement = input;
-            if (this.softDisabled) {
-                inputElement.setAttribute('aria-disabled', 'true');
-            }
-            else {
-                inputElement.removeAttribute('aria-disabled');
-            }
-        });
     }
     /**
      * Initializes the range slider by setting default values for the start and end handles.
@@ -322,11 +306,26 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
             this.inputElements[0].style.background = `linear-gradient(to right, ${progressColor} ${progress}%, ${trackColor} ${progress}%)`;
         }
     }
+    preventSoftDisabledChange(event) {
+        var _a, _b, _c;
+        if (!this.softDisabled)
+            return false;
+        const input = event.currentTarget;
+        let value = (_a = this.value) !== null && _a !== void 0 ? _a : this.min;
+        if (this.range) {
+            value = input.id === 'start-slider' ? ((_b = this.valueStart) !== null && _b !== void 0 ? _b : this.min) : ((_c = this.valueEnd) !== null && _c !== void 0 ? _c : this.max);
+        }
+        input.value = String(value);
+        event.stopImmediatePropagation();
+        return true;
+    }
     /**
      * Handles the input event for the single value slider.
      * @param e - The input event.
      */
     onInput(e) {
+        if (this.preventSoftDisabledChange(e))
+            return;
         const input = e.target;
         this.handleInput(input);
     }
@@ -335,6 +334,8 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
      * @param e - The change event.
      */
     onChange(e) {
+        if (this.preventSoftDisabledChange(e))
+            return;
         const input = e.target;
         this.value = Number(input.value);
         this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
@@ -344,6 +345,8 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
      * @param e - The change event.
      */
     onChangeStart(e) {
+        if (this.preventSoftDisabledChange(e))
+            return;
         const input = e.target;
         this.valueStart = Number(input.value);
         this.dispatchEvent(new CustomEvent('change', { detail: { valueStart: this.valueStart, valueEnd: this.valueEnd } }));
@@ -353,6 +356,8 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
      * @param e - The change event.
      */
     onChangeEnd(e) {
+        if (this.preventSoftDisabledChange(e))
+            return;
         const input = e.target;
         this.valueEnd = Number(input.value);
         this.dispatchEvent(new CustomEvent('change', { detail: { valueEnd: this.valueEnd, valueStart: this.valueStart } }));
@@ -419,6 +424,7 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                   step="${(_a = this.step) !== null && _a !== void 0 ? _a : 1}"
                   .value="${String((_b = this.valueStart) !== null && _b !== void 0 ? _b : this.min)}"
                   ?disabled="${this.disabled}"
+                  aria-disabled="${this.disabled || this.softDisabled || false}"
                   name="${(_c = this.nameStart) !== null && _c !== void 0 ? _c : ''}"
                   aria-valuemin="${this.min}"
                   aria-valuemax="${this.max}"
@@ -456,6 +462,7 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                   step="${(_e = this.step) !== null && _e !== void 0 ? _e : 1}"
                   .value="${String((_f = this.valueEnd) !== null && _f !== void 0 ? _f : this.max)}"
                   ?disabled="${this.disabled}"
+                  aria-disabled="${this.disabled || this.softDisabled || false}"
                   name="${(_g = this.nameEnd) !== null && _g !== void 0 ? _g : ''}"
                   aria-valuemin="${this.min}"
                   aria-valuemax="${this.max}"
@@ -495,6 +502,7 @@ class Slider extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                   step="${(_j = this.step) !== null && _j !== void 0 ? _j : 1}"
                   .value="${String((_k = this.value) !== null && _k !== void 0 ? _k : this.min)}"
                   ?disabled="${this.disabled}"
+                  aria-disabled="${this.disabled || this.softDisabled || false}"
                   name="${(_l = this.name) !== null && _l !== void 0 ? _l : ''}"
                   aria-valuemin="${this.min}"
                   aria-valuemax="${this.max}"

package/dist/components/textarea/textarea.component.js

@@ -110,7 +110,7 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
          * @param event - The pointer event.
          */
         this.handlePointerDown = (event) => {
-            if (this.readonly) {
+            if (this.disabled || this.softDisabled || this.readonly) {
                 return;
             }
             const resizeButton = event.currentTarget;
@@ -129,6 +129,8 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
          * @param event - The pointer event.
          */
         this.handlePointerMove = (event) => {
+            if (this.disabled || this.softDisabled || this.readonly)
+                return;
             if (!this.textarea)
                 return;
             const deltaY = event.clientY - this.resizeStartY;
@@ -241,7 +243,9 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
      * Sets the form value.
      * @returns void
      */
-    updateValue() {
+    updateValue(event) {
+        if (this.preventSoftDisabledChange(event, this.value))
+            return;
         this.value = this.textarea.value;
         this.internals.setFormValue(this.textarea.value);
         this.announceCharacterLimitWarning();
@@ -257,7 +261,9 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
      * @param event - Event which contains information about the value change.
      */
     onChange(event) {
-        this.updateValue();
+        if (this.preventSoftDisabledChange(event, this.value))
+            return;
+        this.updateValue(event);
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
@@ -272,7 +278,7 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
      * @param event - The keyboard event.
      */
     handleResizeKeyDown(event) {
-        if (this.readonly) {
+        if (this.disabled || this.softDisabled || this.readonly) {
             return;
         }
         const currentRows = this.rows || DEFAULTS.ROWS;
@@ -307,6 +313,7 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
           .value="${this.value}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readonly}"
+          aria-disabled="${this.disabled || this.softDisabled}"
           ?required="${this.required}"
           placeholder=${ifDefined(this.placeholder)}
           rows=${ifDefined(this.rows)}
@@ -317,6 +324,7 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
           minlength=${ifDefined(this.minlength)}
           maxlength=${ifDefined(this.maxlength)}
           dirname=${ifDefined(this.dirname)}
+          @beforeinput=${this.preventSoftDisabledInput}
           @input=${this.updateValue}
           @change=${this.onChange}
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
@@ -337,7 +345,8 @@ class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(
                 size="24"
                 prefix-icon="resize-corner-regular"
                 aria-label=${(_b = this.resizeButtonAriaLabel) !== null && _b !== void 0 ? _b : ''}
-                ?disabled="${this.disabled || this.readonly}"
+                ?disabled="${this.disabled || this.softDisabled || this.readonly}"
+                ?soft-disabled="${this.softDisabled}"
                 @keydown=${this.handleResizeKeyDown}
                 @pointerdown=${this.handlePointerDown}
               ></mdc-button>

package/dist/components/timepicker/timepicker.component.js

@@ -191,6 +191,10 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             changedProperties.has('readonly')) {
             if (this.disabled || this.softDisabled || this.readonly) {
                 this.displayPopover = false;
+                if (this.pendingDigitTimeout)
+                    clearTimeout(this.pendingDigitTimeout);
+                this.pendingDigits = '';
+                this.parseValueToInternal();
             }
         }
     }
@@ -326,6 +330,8 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
      * @internal
      */
     commitValue() {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const newValue = this.internalToValue();
         if (newValue && newValue !== this.value) {
             this.value = newValue;
@@ -380,6 +386,8 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
      */
     handleOptionClick(optionValue) {
         var _a;
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         this.value = optionValue;
         this.parseValueToInternal();
         this.displayPopover = false;
@@ -510,6 +518,11 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
      */
     handlePeriodKeydown(event) {
         var _a, _b;
+        if (this.disabled || this.softDisabled || this.readonly) {
+            if (event.key === KEYS.ARROW_UP || event.key === KEYS.ARROW_DOWN)
+                event.preventDefault();
+            return;
+        }
         switch (event.key) {
             case KEYS.ARROW_UP:
             case KEYS.ARROW_DOWN:
@@ -551,6 +564,11 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
      */
     handleSpinbuttonKeydown(event, field) {
         var _a, _b, _c, _d, _e, _f;
+        if (this.disabled || this.softDisabled || this.readonly) {
+            if (event.key === KEYS.ARROW_UP || event.key === KEYS.ARROW_DOWN)
+                event.preventDefault();
+            return;
+        }
         const is12h = this.timeFormat === TIME_FORMAT.TWELVE_HOUR;
         let minVal;
         let maxVal;
@@ -795,7 +813,10 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
               placeholder="${this.hoursPlaceholder}"
               ?disabled="${this.disabled}"
               ?readonly="${this.readonly}"
+              aria-disabled="${this.disabled || this.softDisabled}"
+              @beforeinput="${this.preventSoftDisabledInput}"
               tabindex="${this.disabled ? '-1' : '0'}"
+              @input="${(event) => this.preventSoftDisabledChange(event, this.internalHours)}"
               @keydown="${this.handleHoursKeydown}"
               @focus="${this.handleSpinbuttonFocus}"
             />
@@ -813,7 +834,10 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
               placeholder="${this.minutesPlaceholder}"
               ?disabled="${this.disabled}"
               ?readonly="${this.readonly}"
+              aria-disabled="${this.disabled || this.softDisabled}"
+              @beforeinput="${this.preventSoftDisabledInput}"
               tabindex="${this.disabled ? '-1' : '0'}"
+              @input="${(event) => this.preventSoftDisabledChange(event, this.internalMinutes)}"
               @keydown="${this.handleMinutesKeydown}"
               @focus="${this.handleSpinbuttonFocus}"
             />
@@ -830,7 +854,10 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
                     placeholder="${this.periodPlaceholder}"
                     ?disabled="${this.disabled}"
                     ?readonly="${this.readonly}"
+                    aria-disabled="${this.disabled || this.softDisabled}"
+                    @beforeinput="${this.preventSoftDisabledInput}"
                     tabindex="${this.disabled ? '-1' : '0'}"
+                    @input="${(event) => this.preventSoftDisabledChange(event, this.displayPeriod || '')}"
                     @keydown="${this.handlePeriodKeydown}"
                     @focus="${this.handleSpinbuttonFocus}"
                   />
@@ -846,6 +873,7 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             aria-expanded="${this.displayPopover ? 'true' : 'false'}"
             aria-haspopup="true"
             ?disabled="${this.disabled}"
+            ?soft-disabled="${this.softDisabled}"
             size="20"
             @click="${this.handleDropdownClick}"
           ></mdc-button>

package/dist/components/toggle/toggle.component.js

@@ -158,6 +158,10 @@ class Toggle extends KeyToActionMixin(ControlTypeMixin(AutoFocusOnMountMixin(For
     handleKeyDown(event) {
         var _a;
         const action = this.getActionForKeyEvent(event);
+        if (this.softDisabled && action === ACTIONS.ENTER) {
+            event.preventDefault();
+            return;
+        }
         if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
             event.preventDefault();
         }
@@ -217,6 +221,7 @@ class Toggle extends KeyToActionMixin(ControlTypeMixin(AutoFocusOnMountMixin(For
           value="${ifDefined(this.value)}"
           .checked="${this.checked}"
           aria-checked="${this.checked}"
+          aria-disabled="${this.disabled || this.softDisabled}"
           .disabled="${this.disabled}"
           ?readonly="${this.readonly}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"

package/dist/custom-elements.json

@@ -47338,6 +47338,10 @@
           "description": "",
           "name": "Skeleton",
           "cssProperties": [
+            {
+              "description": "Delay of the two-second shimmer cycle (default: 0s). Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.",
+              "name": "--mdc-skeleton-animation-delay"
+            },
             {
               "description": "background color of the skeleton",
               "name": "--mdc-skeleton-background-color"
@@ -47416,7 +47420,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-skeleton",
-          "jsDoc": "/**\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
+          "jsDoc": "/**\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).\n *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
           "customElement": true
         }
       ],
@@ -47821,6 +47825,24 @@
               ],
               "description": "Prevents default behavior for mouse and keyboard events.\nThis prevents user interaction with the slider when it is soft-disabled."
             },
+            {
+              "kind": "method",
+              "name": "preventSoftDisabledChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "range",
@@ -47837,12 +47859,6 @@
               "name": "renderTicks",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "description": "Sets the soft-disabled state for the slider.\nApplies the appropriate ARIA attributes."
-            },
             {
               "kind": "field",
               "name": "softDisabled",
@@ -51920,6 +51936,14 @@
               "kind": "method",
               "name": "updateValue",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "description": "Updates the value of the textarea field.\nSets the form value.",
               "return": {
                 "type": {

package/dist/react/skeleton/index.d.ts

@@ -19,6 +19,8 @@ import Component from '../../components/skeleton';
  * 
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  * 
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/dist/react/skeleton/index.js

@@ -7,6 +7,8 @@ import { TAG_NAME } from '../../components/skeleton/skeleton.constants';
  *
  * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
  *
+ * @cssproperty --mdc-skeleton-animation-delay - Delay of the two-second shimmer cycle (default: 0s).
+ *   Use a negative CSS time to start partway through the cycle and align instances with application-managed timing.
  * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
  * @cssproperty --mdc-skeleton-height - height of the skeleton
  * @cssproperty --mdc-skeleton-width - width of the skeleton

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.141.1",
+  "version": "0.141.3",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"