@momentum-design/components 0.141.1 → 0.141.3

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/skeleton/skeleton.component.d.ts

@@ -22,6 +22,8 @@ import type { SkeletonVariant } from './skeleton.types';
  * 
  * @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/components/skeleton/skeleton.component.js

@@ -17,6 +17,8 @@ import styles from './skeleton.styles';
  *
  * @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/components/skeleton/skeleton.styles.js

@@ -1,9 +1,11 @@
 import { css } from 'lit';
 const styles = css `
   :host {
+    --mdc-skeleton-animation-delay: 0s;
     --mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
     --mdc-skeleton-height: 100%;
     --mdc-skeleton-width: 100%;
+    position: relative;
     display: block;
     overflow: hidden;
     background-color: var(--mdc-skeleton-background-color);
@@ -11,32 +13,38 @@ const styles = css `
     width: var(--mdc-skeleton-width);
   }
 
-  :host([motion]) {
+  :host([motion])::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    pointer-events: none;
     background-image: linear-gradient(
       90deg,
       var(--mds-color-theme-background-skeleton-shimmer-0) 0%,
       var(--mds-color-theme-background-skeleton-shimmer-1) 50%,
       var(--mds-color-theme-background-skeleton-shimmer-2) 100%
     );
-    background-repeat: no-repeat;
-    background-size: 200% 100%;
     animation: skeleton-shimmer 2s linear infinite;
+    animation-delay: var(--mdc-skeleton-animation-delay);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([motion]) {
+    :host([motion])::before {
       animation: none;
-      background-position: 50% 0;
+      transform: translateX(-25%);
     }
   }
 
   @keyframes skeleton-shimmer {
     0% {
-      background-position: 200% 0;
+      transform: translateX(-100%);
     }
 
     100% {
-      background-position: -200% 0;
+      transform: translateX(100%);
     }
   }
 

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.