@momentum-design/components 0.141.2 → 0.141.3

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

@@ -47825,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",
@@ -47841,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",
@@ -51924,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/package.json

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