@momentum-design/components 0.141.2 → 0.141.4

package/dist/components/cardradio/cardradio.component.js

@@ -194,7 +194,7 @@ __decorate([
     __metadata("design:type", Object)
 ], CardRadio.prototype, "checked", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], CardRadio.prototype, "name", void 0);
 export default CardRadio;

package/dist/components/checkbox/checkbox.component.js

@@ -175,6 +175,10 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
     handleKeyDown(event) {
         var _a;
         const action = this.getActionForKeyEvent(event);
+        if (this.softDisabled && action === ACTIONS.ENTER) {
+            event.preventDefault();
+            return;
+        }
         if (this.getKeyboardNavMode() === NAV_MODES.DEFAULT) {
             if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
                 event.preventDefault();
@@ -260,6 +264,7 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
           aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
+          aria-disabled="${this.disabled || this.softDisabled}"
           ?readonly="${this.readonly}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           tabindex="${this.disabled ? -1 : this.tabIndex}"

package/dist/components/combobox/combobox.component.js

@@ -262,6 +262,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     }
     /** @internal */
     openPopover() {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         this.isOpen = true;
     }
     /** @internal */
@@ -313,7 +315,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     }
     /** @internal */
     handleTriggerClick() {
-        if (this.disabled) {
+        if (this.disabled || this.softDisabled || this.readonly) {
             return;
         }
         // Toggle dropdown when clicking the trigger button
@@ -492,10 +494,10 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
             listbox.setAttribute('aria-label', this.label || this.dataAriaLabel || '');
             (_b = this.visualCombobox) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-controls', this.listboxId);
         }
-        if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
-            if (this.disabled || this.readonly) {
-                // If the combobox is disabled or readonly,
-                // we close the popover if it is open.
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled') ||
+            changedProperties.has('readonly')) {
+            if (this.disabled || this.softDisabled || this.readonly) {
                 this.closePopover();
             }
         }
@@ -645,6 +647,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
      * @internal
      */
     handleBlurChange() {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const options = this.getVisibleOptions(this.filteredValue);
         const activeIndex = options.findIndex(option => option.hasAttribute('data-focused'));
         if (activeIndex !== -1) {
@@ -691,6 +695,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     }
     /** @internal */
     handleInputKeydown(event) {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const options = this.getVisibleOptions(this.filteredValue).filter(option => !option.hasAttribute('disabled'));
         const activeIndex = options.findIndex(option => option.hasAttribute('data-focused'));
         const isSpatialNavigation = this.getKeyboardNavMode() === NAV_MODES.SPATIAL;
@@ -817,6 +823,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     /** @internal */
     handleInputChange(event) {
         var _a;
+        if (this.preventSoftDisabledChange(event, this.filteredValue))
+            return;
         event.preventDefault();
         event.stopPropagation();
         this.filteredValue = event.target.value;
@@ -835,6 +843,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     /** @internal */
     handleOptionsClick(event) {
         var _a;
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         event.preventDefault();
         event.stopPropagation();
         // ensure we get the actual option element even if the click target is a child node
@@ -848,7 +858,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     }
     /** @internal */
     shouldDisplayPopover(optionsLength) {
-        if (this.disabled || this.readonly) {
+        if (this.disabled || this.softDisabled || this.readonly) {
             return false;
         }
         if (optionsLength || this.noResultText) {
@@ -904,13 +914,14 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         role="${ROLE.COMBOBOX}"
         ?readonly="${this.readonly}"
         ?required="${this.required}"
+        @beforeinput=${this.preventSoftDisabledInput}
         @input=${this.handleInputChange}
         @keydown=${this.handleInputKeydown}
         @blur="${this.handleBlurChange}"
         aria-autocomplete="${AUTOCOMPLETE_LIST}"
         aria-controls=""
         aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-        aria-disabled="${this.disabled ? 'true' : 'false'}"
+        aria-disabled="${this.disabled || this.softDisabled}"
         aria-expanded="${this.isOpen ? 'true' : 'false'}"
         aria-haspopup="${ROLE.LISTBOX}"
         aria-invalid="${this.helpTextType === VALIDATION.ERROR ? 'true' : 'false'}"
@@ -938,6 +949,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
           @click="${this.handleTriggerClick}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readonly}"
+          ?soft-disabled="${this.softDisabled}"
           help-text-type="${this.helpTextType}"
         >
           ${this.renderBaseInput()}
@@ -945,6 +957,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         <mdc-buttonsimple
           @click="${this.handleTriggerClick}"
           part="combobox-button"
+          ?soft-disabled="${this.softDisabled}"
           ?disabled="${this.disabled}"
           tabindex="-1"
           aria-expanded="${this.isOpen ? 'true' : 'false'}"

package/dist/components/datepicker/datepicker.component.js

@@ -175,6 +175,17 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled') ||
+            changedProperties.has('readonly')) {
+            if (this.disabled || this.softDisabled || this.readonly) {
+                this.closePopover();
+                if (this.pendingDigitTimeout)
+                    clearTimeout(this.pendingDigitTimeout);
+                this.pendingDigits = '';
+                this.parseValueToInternal();
+            }
+        }
         if (changedProperties.has('value') && !this.displayPopover) {
             this.parseValueToInternal();
             this.syncFormValue();
@@ -289,6 +300,8 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         }
     }
     commitValue() {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const newVal = this.internalToValue();
         if (newVal) {
             const clampedVal = this.clampValueToRange(newVal);
@@ -335,7 +348,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     }
     // -- Popover handling --
     handleCalendarButtonClick() {
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.softDisabled || this.readonly)
             return;
         if (this.displayPopover) {
             this.closePopover();
@@ -345,7 +358,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         this.displayPopover = true;
     }
     handleSelectTriggerClick() {
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.softDisabled || this.readonly)
             return;
         if (this.displayPopover) {
             this.closePopover();
@@ -354,7 +367,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         this.displayPopover = true;
     }
     handleSelectKeydown(event) {
-        if (this.disabled || this.readonly)
+        if (this.disabled || this.softDisabled || this.readonly)
             return;
         if (event.key === KEYS.ENTER || event.key === KEYS.SPACE || event.key === KEYS.ARROW_DOWN) {
             event.preventDefault();
@@ -383,6 +396,8 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             this.focusBackToTrigger();
     }
     handleDateSelected(event) {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const { detail } = event;
         const mode = this.effectiveSelectionMode;
         if (mode === SELECTION_MODE.WEEK || mode === SELECTION_MODE.RANGE) {
@@ -451,8 +466,11 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         this.requestUpdate();
     }
     handleSpinbuttonKeydown(event, field) {
-        if (this.readonly)
+        if (this.disabled || this.softDisabled || this.readonly) {
+            if (event.key === KEYS.ARROW_UP || event.key === KEYS.ARROW_DOWN)
+                event.preventDefault();
             return;
+        }
         const range = this.getFieldRange(field);
         const currentVal = parseInt(this.getFieldValue(field), 10) || 0;
         switch (event.key) {
@@ -661,6 +679,9 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         autocomplete="off"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
+        aria-disabled="${this.disabled || this.softDisabled}"
+        @beforeinput="${this.preventSoftDisabledInput}"
+        @input="${(event) => this.preventSoftDisabledChange(event, value)}"
         tabindex="${this.disabled ? '-1' : '0'}"
         @keydown="${(e) => this.handleSpinbuttonKeydown(e, field)}"
         @focus="${this.handleSpinbuttonFocus}"
@@ -691,8 +712,10 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           prefix-icon="${CALENDAR_ICON}"
           aria-label="${this.localeCalendarLabel}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+          aria-disabled="${this.disabled || this.softDisabled}"
           aria-haspopup="dialog"
           ?disabled="${this.disabled}"
+          ?soft-disabled="${this.softDisabled}"
           size="20"
           @click="${this.handleCalendarButtonClick}"
         ></mdc-button>
@@ -710,6 +733,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         class="mdc-focus-ring"
         role="combobox"
         aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+        aria-disabled="${this.disabled || this.softDisabled}"
         aria-haspopup="dialog"
         aria-label="${this.localeCalendarLabel}"
         tabindex="${this.disabled ? '-1' : '0'}"

package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts

@@ -107,6 +107,10 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
     softDisabled: boolean;
     /** @internal */
     protected shouldRenderLabel: Boolean;
+    /** @internal */
+    protected preventSoftDisabledInput(event: InputEvent): void;
+    /** @internal */
+    protected preventSoftDisabledChange(event: Event, value: string): boolean;
     /**
      * creates the label element when the label property is set.
      * id is used to link the label with the input field.

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -94,6 +94,22 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         /** @internal */
         this.shouldRenderLabel = true;
     }
+    /** @internal */
+    preventSoftDisabledInput(event) {
+        if (this.softDisabled) {
+            event.preventDefault();
+        }
+    }
+    /** @internal */
+    preventSoftDisabledChange(event, value) {
+        if (!this.softDisabled)
+            return false;
+        // Restore edits from non-cancelable beforeinput events, including IME composition.
+        const input = event.currentTarget;
+        input.value = value;
+        event.stopImmediatePropagation();
+        return true;
+    }
     /**
      * creates the label element when the label property is set.
      * id is used to link the label with the input field.

package/dist/components/input/input.component.js

@@ -208,6 +208,8 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      * @internal
      */
     onInput(event) {
+        if (this.preventSoftDisabledChange(event, this.value))
+            return;
         this.updateValue();
         this.setInputValidity();
         this.checkValidity();
@@ -230,6 +232,8 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      * @internal
      */
     onChange(event) {
+        if (this.preventSoftDisabledChange(event, this.value))
+            return;
         this.updateValue();
         this.setInputValidity();
         const EventConstructor = event.constructor;
@@ -242,6 +246,11 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      */
     handleKeyDown(event) {
         var _a;
+        if (this.softDisabled) {
+            if (this.getActionForKeyEvent(event) === ACTIONS.ENTER)
+                event.preventDefault();
+            return;
+        }
         if (this.getActionForKeyEvent(event) === ACTIONS.ENTER && this.getKeyboardNavMode() === NAV_MODES.DEFAULT) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
@@ -296,6 +305,8 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      */
     clearInputText() {
         var _a;
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         this.value = '';
         // focus the input field after clearing the text
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
@@ -319,7 +330,8 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
         size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
         aria-label="${this.clearAriaLabel}"
         @click=${this.clearInputText}
-        ?disabled=${this.disabled || this.readonly || !showBtn}
+        ?disabled=${this.disabled || this.softDisabled || this.readonly || !showBtn}
+        ?soft-disabled=${this.softDisabled}
       ></mdc-button>
     `;
     }
@@ -334,6 +346,7 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
       .value="${live(this.value)}"
       ?disabled="${this.disabled}"
       ?readonly="${this.readonly}"
+      aria-disabled="${this.disabled || this.softDisabled}"
       ?required="${this.required}"
       type="${type}"
       aria-labelledby="${ifDefined(this.label ? DEFAULTS.HEADING_ID : undefined)}"
@@ -349,6 +362,7 @@ class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
       pattern=${ifDefined(this.pattern)}
       list=${ifDefined(this.list)}
       size=${ifDefined(this.size)}
+      @beforeinput=${this.preventSoftDisabledInput}
       @input=${this.onInput}
       @change=${this.onChange}
       @keydown=${this.handleKeyDown}

package/dist/components/numberinput/numberinput.component.js

@@ -164,6 +164,12 @@ class NumberInput extends Input {
      */
     handleKeyDown(event) {
         const isStepKey = event.key === KEYS.ARROW_UP || event.key === KEYS.ARROW_DOWN;
+        if (this.softDisabled) {
+            if (isStepKey)
+                event.preventDefault();
+            super.handleKeyDown(event);
+            return;
+        }
         if (this.step === DEFAULTS.STEP_ANY && isStepKey && !this.disabled && !this.readonly) {
             event.preventDefault();
             this.stepBy(event.key === KEYS.ARROW_UP ? 'increment' : 'decrement');
@@ -179,6 +185,8 @@ class NumberInput extends Input {
      * Stepping already clamps, so this only covers manual keyboard entry.
      */
     onChange(event) {
+        if (this.preventSoftDisabledChange(event, this.value))
+            return;
         if (this.clamp === CLAMP.AUTO && this.clampInputToRange()) {
             this.inputElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
         }
@@ -209,6 +217,8 @@ class NumberInput extends Input {
      */
     stepBy(direction) {
         var _a;
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const inputElement = this.inputElement;
         const previousValue = inputElement.value;
         if (this.step === DEFAULTS.STEP_ANY) {
@@ -260,6 +270,7 @@ class NumberInput extends Input {
         prefix-icon="${isIncrement ? DEFAULTS.INCREMENT_ICON : DEFAULTS.DECREMENT_ICON}"
         aria-label="${isIncrement ? this.incrementAriaLabel : this.decrementAriaLabel}"
         ?disabled=${this.disabled || this.readonly}
+        ?soft-disabled=${this.softDisabled}
         @click=${isIncrement ? this.handleIncrement : this.handleDecrement}
         tabindex="-1"
       ></mdc-button>

package/dist/components/password/password.component.js

@@ -88,6 +88,8 @@ class Password extends Input {
      * Toggles the visibility of the password.
      */
     toggleShowPassword() {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         this.showPassword = !this.showPassword;
     }
     /**
@@ -104,6 +106,7 @@ class Password extends Input {
         class="own-focus-ring ${!showBtn ? 'hidden' : ''}"
         variant=${BUTTON_VARIANTS.TERTIARY}
         ?disabled=${this.disabled || this.readonly || !showBtn}
+        ?soft-disabled=${this.softDisabled}
         size="${DEFAULTS.ICON_SIZE}"
         @click=${this.toggleShowPassword}
         aria-label=${this.showPassword ? this.hideButtonAriaLabel : this.showButtonAriaLabel}

package/dist/components/radio/radio.component.js

@@ -203,6 +203,10 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
         if (this.disabled)
             return;
         const action = this.getActionForKeyEvent(event);
+        if (this.softDisabled && action === ACTIONS.ENTER) {
+            event.preventDefault();
+            return;
+        }
         if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
             event.preventDefault();
         }
@@ -264,6 +268,9 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
     }
     update(changedProperties) {
         super.update(changedProperties);
+        if (changedProperties.has('disabled') || changedProperties.has('softDisabled')) {
+            this.ariaDisabled = String(this.disabled || this.softDisabled);
+        }
         if (changedProperties.has('checked')) {
             this.ariaChecked = this.checked.toString();
             this.setActualFormValue();

package/dist/components/searchfield/searchfield.component.js

@@ -105,6 +105,8 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
          * @internal
          */
         this.handleChipKeyDown = (event) => {
+            if (this.disabled || this.softDisabled || this.readonly)
+                return;
             const action = this.getActionForKeyEvent(event);
             if (event.key === 'Backspace' || event.key === 'Delete') {
                 event.preventDefault();
@@ -183,6 +185,8 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
     handleKeyDown(event) {
         var _a;
         super.handleKeyDown(event);
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         const action = this.getActionForKeyEvent(event);
         if (action === ACTIONS.ESCAPE) {
             this.clearInputText();
@@ -303,6 +307,8 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
      * @param chip - The chip element to be removed
      */
     removeChip(chip) {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         this.dispatchEvent(new CustomEvent('chipRemove', { detail: { chip }, bubbles: true, composed: true }));
         if (this.controlType !== 'controlled') {
             chip.remove();
@@ -310,6 +316,8 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
     }
     clearInputText() {
         var _a;
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         super.clearInputText();
         // Directly remove all chips from DOM since not all chip types support the 'removed' event
         // In uncontrolled mode, removeChip handles DOM removal.
@@ -368,6 +376,8 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
      * @internal
      */
     removeChipAtIndex(index) {
+        if (this.disabled || this.softDisabled || this.readonly)
+            return;
         if (!this.chips || index < 0 || index >= this.chips.length)
             return;
         const chip = this.chips[index];

package/dist/components/slider/slider.component.d.ts

@@ -190,11 +190,6 @@ declare class Slider extends Slider_base {
      * @param evt - The event to prevent.
      */
     private handleKeyEvent;
-    /**
-     * Sets the soft-disabled state for the slider.
-     * Applies the appropriate ARIA attributes.
-     */
-    private setSoftDisabled;
     /**
      * Initializes the range slider by setting default values for the start and end handles.
      * Updates the slider's input elements to reflect the current values.
@@ -228,6 +223,7 @@ declare class Slider extends Slider_base {
      * The track is filled between the two thumbs.
      */
     updateTrackStyling(): void;
+    private preventSoftDisabledChange;
     /**
      * Handles the input event for the single value slider.
      * @param e - The input event.

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}"