@zywave/zui-slider 4.4.0-pre.4 → 4.4.0-pre.6

package/test/zui-slider.test.ts

@@ -97,17 +97,14 @@ suite('zui-slider', () => {
     assert.equal(element.value, '33.5');
   });
 
-  test('float input position and track background update after drag', async () => {
+  test('float input position updates after drag', async () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     const thumbDiv = element.shadowRoot!.querySelector<HTMLElement>('.thumb-input')!;
-    const bgBefore = input.style.getPropertyValue('--zui-slider-track-bg');
     input.value = '75';
     input.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbDiv.style.left, '75%');
-    assert.notEqual(input.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
-    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), '75%');
   });
 
   test('floating input change fires component change event', async () => {
@@ -127,7 +124,7 @@ suite('zui-slider', () => {
   test('valueAsNumber reads the single-mode backing field regardless of range mode', () => {
     element.value = '35';
     element.range = true;
-    // valueAsNumber reads #value (the single-mode backing field) — range mode does not update it
+    // valueAsNumber reads #value (the single-mode backing field); range mode does not update it
     assert.equal(element.valueAsNumber, 35);
   });
 
@@ -196,26 +193,38 @@ suite('zui-slider', () => {
     assert.equal(new FormData(form).get(name), '50');
   });
 
-  test('single mode input has inline linear-gradient background with transparent insets', async () => {
+  test('element.value, native range input, and floating input stay in sync after drag', async () => {
     await element.updateComplete;
-    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    const bg = input.style.getPropertyValue('--zui-slider-track-bg');
-    assert.include(bg, 'linear-gradient');
-    assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
-    assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
+    const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+
+    rangeInput.value = '75';
+    rangeInput.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+
+    assert.equal(element.value, '75');
+    assert.equal(rangeInput.value, '75');
+    assert.equal(floatInput.value, '75');
   });
 
-  test('single mode gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
-    element.disabled = true;
+  test('programmatic value reset after drag keeps native range input in sync', async () => {
+    // Reproduces a live() omission: user drags while a programmatic set is pending,
+    // causing Lit to skip the DOM write because its stored virtual still matches.
+    element.value = '50';
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
-    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
 
-    element.disabled = false;
-    await element.updateComplete;
-    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
-    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
+    // Simulate drag: browser writes directly to DOM, then fires input event
+    input.value = '75';
+    input.dispatchEvent(new Event('input'));
+
+    // Before that render fires, programmatically revert. This is the live() failure case.
+    element.value = '50'; // Lit virtual is still '50' from the last render
+
+    await element.updateComplete; // without live(), Lit sees virtual='50'==new='50' → skips DOM write
+
+    assert.equal(input.value, '50');
+    assert.equal(element.value, '50');
   });
 
   test('form reset hides visible floating input', async () => {
@@ -268,7 +277,7 @@ suite('zui-slider', () => {
   });
 
   test('connectedCallback with range property (not attribute) uses range branch', async () => {
-    // el.range = true without setAttribute — connectedCallback must check this.range too.
+    // el.range = true without setAttribute; connectedCallback must check this.range too.
     // Must await so the async connectedCallback reads native inputs and calls _setFormValue.
     const el = document.createElement('zui-slider') as ZuiSlider;
     el.range = true;
@@ -303,56 +312,6 @@ suite('zui-slider', () => {
     document.body.removeChild(f);
   });
 
-  test('floating input updates value after debounce delay but not immediately', async () => {
-    await element.updateComplete;
-    element.value = '50';
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    floatInput.value = '75';
-    floatInput.dispatchEvent(new Event('input'));
-    // Debounce is 500ms — value must not update synchronously
-    assert.equal(element.value, '50');
-    await new Promise<void>((r) => setTimeout(r, 600));
-    assert.equal(element.value, '75');
-  });
-
-  test('form reset cancels pending floating input debounce', async () => {
-    await element.updateComplete;
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    floatInput.value = '80';
-    floatInput.dispatchEvent(new Event('input'));
-    // Debounce is pending — reset before it fires
-    form.reset();
-    await new Promise<void>((r) => setTimeout(r, 600));
-    // Debounce timer must have been cancelled by formResetCallback
-    assert.equal(element.value, '50');
-  });
-
-  test('floating input empty-string input does not trigger value update', async () => {
-    await element.updateComplete;
-    element.value = '50';
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    floatInput.value = '';
-    floatInput.dispatchEvent(new Event('input'));
-    // Empty string is an in-progress edit — value must not be updated
-    assert.equal(element.value, '50');
-  });
-
-  test('clearing floating input cancels pending debounce so stale value is not committed', async () => {
-    await element.updateComplete;
-    element.value = '50';
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    // Start a debounce for '75'
-    floatInput.value = '75';
-    floatInput.dispatchEvent(new Event('input'));
-    assert.equal(element.value, '50'); // debounce not yet fired
-    // Then clear the field — should cancel the '75' debounce
-    floatInput.value = '';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 350));
-    // The pending debounce was cancelled; value stays at '50'
-    assert.equal(element.value, '50');
-  });
-
   test('committing empty floating input reverts display to current value', async () => {
     await element.updateComplete;
     element.value = '75';
@@ -363,51 +322,103 @@ suite('zui-slider', () => {
     assert.equal(floatInput.value, '75');
   });
 
-  test('floating input clamps out-of-bounds values to min/max after debounce', async () => {
+  test('floating input clamps out-of-bounds values to min/max on commit', async () => {
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
     floatInput.value = '150';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
+    floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '100');
 
     element.min = 20;
     floatInput.value = '5';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
+    floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '20');
   });
 
-  test('floating input snaps typed value to nearest step after debounce', async () => {
+  test('floating input snaps typed value to nearest step on commit', async () => {
     await element.updateComplete;
     element.step = 10;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
     floatInput.value = '47';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
+    floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '50');
   });
 
-  test('floating input change flushes debounce and dispatches correct value immediately', async () => {
+  test('floating input change dispatches correct value and does not re-fire if value is unchanged', async () => {
     await element.updateComplete;
+    let changeCount = 0;
     let detail: string | undefined;
     element.addEventListener('change', (e: Event) => {
+      changeCount++;
       detail = (e as CustomEvent<string>).detail;
     });
 
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    // Simulate typing then immediately committing before the 300ms debounce settles
     floatInput.value = '75';
-    floatInput.dispatchEvent(new Event('input'));
-    assert.equal(element.value, '50'); // debounce not yet fired
-    floatInput.dispatchEvent(new Event('change')); // commits immediately
+    floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '75');
     assert.equal(detail, '75');
-    // Debounce timer was cleared — value must not update again after 500ms
-    await new Promise<void>((r) => setTimeout(r, 600));
+    assert.equal(changeCount, 1);
+
+    // Committing the same value again must not fire another change event
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(changeCount, 1);
+  });
+
+  test('pressing Enter in floating input commits value and retains focus', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    let blurred = false;
+    floatInput.addEventListener('blur', () => (blurred = true));
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(element.value, '75');
+    assert.isFalse(blurred);
+  });
+
+  test('blurring floating input commits typed value', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
     assert.equal(element.value, '75');
   });
 
+  test('blurring floating input after Enter does not dispatch second change event', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.value, '75');
+    assert.equal(changeCount, 1);
+  });
+
+  test('typing after Enter in floating input re-enables blur commit', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(changeCount, 1);
+    floatInput.value = '80';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.value, '80');
+    assert.equal(changeCount, 2);
+  });
+
   test('focused floating input stays visible after pointerleave', async () => {
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
@@ -437,7 +448,7 @@ suite('zui-slider', () => {
     await element.updateComplete;
     assert.isTrue(thumbInputDiv.classList.contains('thumb-input--visible'));
 
-    // Blur without re-focusing — #blurFloatingInput clears focused and schedules hide.
+    // Blur without re-focusing; #blurFloatingInput clears focused and schedules hide.
     // #scheduleHideThumbInput uses a real 100ms setTimeout, so wait past it before asserting.
     floatInput.dispatchEvent(new Event('blur'));
     rangeInput.dispatchEvent(new Event('pointerleave'));
@@ -455,7 +466,7 @@ suite('zui-slider', () => {
     await element.updateComplete;
     assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
 
-    // Disconnect then reconnect — disconnectedCallback should clear state
+    // Disconnect then reconnect; disconnectedCallback should clear state
     document.body.removeChild(form);
     document.body.appendChild(form);
     await element.updateComplete;
@@ -473,8 +484,7 @@ suite('zui-slider', () => {
     input.dispatchEvent(new Event('input'));
     assert.equal(element.value, '50');
     floatInput.value = '75';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 350));
+    floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '50');
   });
 
@@ -540,7 +550,6 @@ suite('zui-slider min-max labels', () => {
   });
 
   test('min-max labels are hidden when showStepLabels is true', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.showStepLabels = true;
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelector<HTMLElement>('.min-max-labels');
@@ -582,7 +591,6 @@ suite('zui-slider min-max labels', () => {
   });
 
   test('show-step-labels attribute hides min-max labels', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.setAttribute('show-step-labels', '');
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelector<HTMLElement>('.min-max-labels');
@@ -807,61 +815,39 @@ suite('zui-slider range', () => {
     document.body.removeChild(f);
   });
 
-  test('input handler rejects start dragging past end', async () => {
+  test('input handler rejects start dragging to or past end', async () => {
     await element.updateComplete;
     element.valueStart = '20';
     element.valueEnd = '60';
-
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.value = '70';
-    startInput.dispatchEvent(new Event('input'));
 
+    startInput.value = '70'; // past end
+    startInput.dispatchEvent(new Event('input'));
     assert.equal(element.valueStart, '20');
     assert.equal(element.valueEnd, '60');
     assert.equal(startInput.value, '20');
-  });
 
-  test('input handler rejects start dragging to equal end', async () => {
-    await element.updateComplete;
-    element.valueStart = '20';
-    element.valueEnd = '60';
-
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.value = '60';
+    startInput.value = '60'; // equal to end
     startInput.dispatchEvent(new Event('input'));
-
-    // start >= end is rejected; input snaps back and state is unchanged
     assert.equal(element.valueStart, '20');
-    assert.equal(element.valueEnd, '60');
     assert.equal(startInput.value, '20');
   });
 
-  test('input handler rejects end dragging before start', async () => {
+  test('input handler rejects end dragging to or before start', async () => {
     await element.updateComplete;
     element.valueStart = '30';
     element.valueEnd = '70';
-
     const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    endInput.value = '20';
-    endInput.dispatchEvent(new Event('input'));
 
+    endInput.value = '20'; // before start
+    endInput.dispatchEvent(new Event('input'));
     assert.equal(element.valueEnd, '70');
     assert.equal(element.valueStart, '30');
     assert.equal(endInput.value, '70');
-  });
-
-  test('input handler rejects end dragging to equal start', async () => {
-    await element.updateComplete;
-    element.valueStart = '30';
-    element.valueEnd = '70';
 
-    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    endInput.value = '30';
+    endInput.value = '30'; // equal to start
     endInput.dispatchEvent(new Event('input'));
-
-    // end <= start is rejected; input snaps back and state is unchanged
     assert.equal(element.valueEnd, '70');
-    assert.equal(element.valueStart, '30');
     assert.equal(endInput.value, '70');
   });
 
@@ -892,20 +878,63 @@ suite('zui-slider range', () => {
     assert.equal(element.valueStart, '33.5');
   });
 
-  test('range start float input position and wrapper background update after drag', async () => {
+  test('range start float input position updates after drag', async () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
     const thumbInputDivs = element.shadowRoot!.querySelectorAll<HTMLElement>('.thumb-input');
-    const bgBefore = startInput.style.getPropertyValue('--zui-slider-track-bg');
     startInput.value = '30';
     startInput.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbInputDivs[0].style.left, '30%');
-    assert.notEqual(startInput.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
-    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), '30%');
   });
 
-  test('change event fires with valueStart and valueEnd detail on range-start change', async () => {
+  test('native range inputs and floating inputs stay in sync with component values after drag', async () => {
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+
+    startInput.value = '30';
+    startInput.dispatchEvent(new Event('input'));
+    endInput.value = '60';
+    endInput.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+
+    assert.equal(element.valueStart, '30');
+    assert.equal(startInput.value, '30');
+    assert.equal(floatInputs[0].value, '30');
+    assert.equal(element.valueEnd, '60');
+    assert.equal(endInput.value, '60');
+    assert.equal(floatInputs[1].value, '60');
+  });
+
+  test('programmatic value resets after drag keep both native range inputs in sync via live()', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+
+    startInput.value = '40';
+    startInput.dispatchEvent(new Event('input'));
+    element.valueStart = '20'; // Lit virtual is still '20'; live() must force the DOM write
+
+    endInput.value = '60';
+    endInput.dispatchEvent(new Event('input'));
+    element.valueEnd = '80'; // same live() invariant for end thumb
+
+    await element.updateComplete;
+
+    assert.equal(element.valueStart, '20');
+    assert.equal(startInput.value, '20');
+    assert.equal(floatInputs[0].value, '20');
+    assert.equal(element.valueEnd, '80');
+    assert.equal(endInput.value, '80');
+    assert.equal(floatInputs[1].value, '80');
+  });
+
+  test('change event fires with valueStart and valueEnd detail from both thumbs', async () => {
     await element.updateComplete;
     let detail: { valueStart: string; valueEnd: string } | undefined;
     element.addEventListener('change', (e: Event) => {
@@ -914,11 +943,15 @@ suite('zui-slider range', () => {
 
     element.valueStart = '10';
     element.valueEnd = '40';
-
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
     startInput.dispatchEvent(new Event('change'));
-
     assert.deepEqual(detail, { valueStart: '10', valueEnd: '40' });
+
+    element.valueStart = '15';
+    element.valueEnd = '55';
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    endInput.dispatchEvent(new Event('change'));
+    assert.deepEqual(detail, { valueStart: '15', valueEnd: '55' });
   });
 
   test('range change event bubbles', async () => {
@@ -932,22 +965,6 @@ suite('zui-slider range', () => {
     assert.isTrue(bubbled);
   });
 
-  test('change event fires with valueStart and valueEnd detail on range-end change', async () => {
-    await element.updateComplete;
-    let detail: { valueStart: string; valueEnd: string } | undefined;
-    element.addEventListener('change', (e: Event) => {
-      detail = (e as CustomEvent).detail;
-    });
-
-    element.valueStart = '15';
-    element.valueEnd = '55';
-
-    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    endInput.dispatchEvent(new Event('change'));
-
-    assert.deepEqual(detail, { valueStart: '15', valueEnd: '55' });
-  });
-
   test('floating input change fires component range change event', async () => {
     await element.updateComplete;
     let detail: { valueStart: string; valueEnd: string } | undefined;
@@ -962,19 +979,6 @@ suite('zui-slider range', () => {
     assert.deepEqual(detail, { valueStart: '20', valueEnd: '100' });
   });
 
-  test('range-wrapper gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
-    element.disabled = true;
-    await element.updateComplete;
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
-    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
-
-    element.disabled = false;
-    await element.updateComplete;
-    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
-    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
-  });
-
   test('form reset hides visible floating inputs in range mode', async () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
@@ -988,19 +992,6 @@ suite('zui-slider range', () => {
     thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
   });
 
-  test('range floating input empty-string input does not trigger value update', async () => {
-    await element.updateComplete;
-    element.valueStart = '20';
-    element.valueEnd = '80';
-    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs[0].value = '';
-    floatInputs[0].dispatchEvent(new Event('input'));
-    floatInputs[1].value = '';
-    floatInputs[1].dispatchEvent(new Event('input'));
-    assert.equal(element.valueStart, '20');
-    assert.equal(element.valueEnd, '80');
-  });
-
   test('range floating inputs hide when disabled is set while visible', async () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
@@ -1014,14 +1005,6 @@ suite('zui-slider range', () => {
     thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
   });
 
-  test('range-wrapper gradient insets are transparent outside thumb-size bounds', async () => {
-    await element.updateComplete;
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    const bg = startInput.style.getPropertyValue('--zui-slider-track-bg');
-    assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
-    assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
-  });
-
   test('disconnectedCallback clears timers and resets thumb input visibility in range mode', async () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
@@ -1038,45 +1021,6 @@ suite('zui-slider range', () => {
     thumbInputs.forEach((ti) => assert.notInclude(ti.className, 'thumb-input--visible'));
   });
 
-  test('range-wrapper gradient updates when valueStart and valueEnd change', async () => {
-    element.valueStart = '25';
-    element.valueEnd = '75';
-    await element.updateComplete;
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    const bg25 = startInput.style.getPropertyValue('--zui-slider-track-bg');
-
-    element.valueStart = '10';
-    element.valueEnd = '90';
-    await element.updateComplete;
-    const bg10 = startInput.style.getPropertyValue('--zui-slider-track-bg');
-
-    assert.notEqual(bg25, bg10);
-  });
-
-  test('range start floating input updates valueStart after debounce delay but not immediately', async () => {
-    await element.updateComplete;
-    element.valueStart = '20';
-    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs[0].value = '40';
-    floatInputs[0].dispatchEvent(new Event('input'));
-    // Debounce is 500ms — valueStart must not update synchronously
-    assert.equal(element.valueStart, '20');
-    await new Promise<void>((r) => setTimeout(r, 600));
-    assert.equal(element.valueStart, '40');
-  });
-
-  test('range end floating input updates valueEnd after debounce delay but not immediately', async () => {
-    await element.updateComplete;
-    element.valueEnd = '80';
-    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs[1].value = '60';
-    floatInputs[1].dispatchEvent(new Event('input'));
-    // Debounce is 500ms — valueEnd must not update synchronously
-    assert.equal(element.valueEnd, '80');
-    await new Promise<void>((r) => setTimeout(r, 600));
-    assert.equal(element.valueEnd, '60');
-  });
-
   test('focused range start floating input stays visible after pointerleave', async () => {
     await element.updateComplete;
     const startRangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
@@ -1094,32 +1038,33 @@ suite('zui-slider range', () => {
     assert.isTrue(thumbInputDivs[0].classList.contains('thumb-input--visible'));
   });
 
-  test('range floating inputs clamp out-of-bounds values to min/max after debounce', async () => {
+  test('range floating inputs clamp out-of-bounds values to min/max on commit', async () => {
     await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs[0].value = '150';
-    floatInputs[0].dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
-    assert.equal(element.valueStart, '100');
 
-    element.min = 20;
-    floatInputs[1].value = '5';
-    floatInputs[1].dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
-    assert.equal(element.valueEnd, '20');
+    // Start thumb: type below min → clamped to min (0); 0 < endNum (80) → no nudge
+    floatInputs[0].value = '-50';
+    floatInputs[0].dispatchEvent(new Event('change'));
+    assert.equal(element.valueStart, '0');
+
+    // End thumb: type above max → clamped to max (100); 100 > startNum (0) → no nudge
+    floatInputs[1].value = '150';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    assert.equal(element.valueEnd, '100');
   });
 
-  test('range floating input snaps typed valueStart to nearest step after debounce', async () => {
+  test('range floating input snaps typed valueStart to nearest step on commit', async () => {
     await element.updateComplete;
     element.step = 10;
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
     floatInputs[0].value = '23';
-    floatInputs[0].dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
+    floatInputs[0].dispatchEvent(new Event('change'));
     assert.equal(element.valueStart, '20');
   });
 
-  test('range start floating input change flushes debounce and dispatches correct value immediately', async () => {
+  test('range start floating input change dispatches correct value', async () => {
     await element.updateComplete;
     let detail: { valueStart: string; valueEnd: string } | undefined;
     element.addEventListener('change', (e: Event) => {
@@ -1128,18 +1073,128 @@ suite('zui-slider range', () => {
 
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
     floatInputs[0].value = '30';
-    floatInputs[0].dispatchEvent(new Event('input'));
-    assert.equal(element.valueStart, '0'); // debounce not yet fired
-    floatInputs[0].dispatchEvent(new Event('change')); // commits immediately
+    floatInputs[0].dispatchEvent(new Event('change'));
     assert.equal(element.valueStart, '30');
     assert.deepEqual(detail, { valueStart: '30', valueEnd: '100' });
-    // Debounce timer was cleared — value must not update again after 500ms
-    await new Promise<void>((r) => setTimeout(r, 600));
+  });
+
+  test('pressing Enter in range floating inputs commits values and retains focus', async () => {
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    let startBlurred = false;
+    floatInputs[0].addEventListener('blur', () => (startBlurred = true));
+
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(element.valueStart, '30');
+    assert.isFalse(startBlurred);
+
+    floatInputs[1].value = '70';
+    floatInputs[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(element.valueEnd, '70');
+  });
+
+  test('range floating input change does not dispatch change event when value is unchanged', async () => {
+    await element.updateComplete;
+    element.valueStart = '30';
+    element.valueEnd = '70';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('change'));
+    floatInputs[1].value = '70';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    assert.equal(changeCount, 0);
+  });
+
+  test('range start floating input nudges to one step below end when typed value equals end', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '50';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '50';
+    floatInputs[0].dispatchEvent(new Event('change'));
+    // typed 50 = end 50; effectiveStep=1; nudge to 50-1=49 < 50 → committed as '49'
+    assert.equal(element.valueStart, '49');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('range end floating input nudges to one step above start when typed value equals start', async () => {
+    await element.updateComplete;
+    element.valueStart = '50';
+    element.valueEnd = '80';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[1].value = '50';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    // typed 50 = start 50; effectiveStep=1; nudge to 50+1=51 > 50 → committed as '51'
+    assert.equal(element.valueEnd, '51');
+    assert.equal(element.valueStart, '50');
+  });
+
+  test('range floating input nudge respects decimal step', async () => {
+    element.step = 0.1;
+    await element.updateComplete;
+    element.valueStart = '1';
+    element.valueEnd = '5';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[1].value = '1';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    // typed 1 = start 1; effectiveStep=0.1; nudge to 1+0.1=1.1 > 1 → committed as '1.1'
+    assert.equal(element.valueEnd, '1.1');
+    assert.equal(element.valueStart, '1');
+  });
+
+  test('blurring range floating input commits typed value', async () => {
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueStart, '30');
+
+    floatInputs[1].value = '70';
+    floatInputs[1].dispatchEvent(new Event('input'));
+    floatInputs[1].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueEnd, '70');
+  });
+
+  test('blurring range floating input after Enter does not dispatch second change event', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
     assert.equal(element.valueStart, '30');
+    assert.equal(changeCount, 1);
+  });
+
+  test('typing after Enter in range floating input re-enables blur commit', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(changeCount, 1);
+    floatInputs[0].value = '40';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueStart, '40');
+    assert.equal(changeCount, 2);
   });
 });
 
-// Dispatches a click at a given 0–1 fraction of the effective track, matching the
+// Dispatches a click at a given 0-1 fraction of the effective track, matching the
 // coordinate math in #onTrackClick so the component computes the same fraction back.
 function clickAtFraction(element: ZuiSlider, fraction: number): void {
   const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
@@ -1247,6 +1302,48 @@ suite('zui-slider range track click', () => {
     assert.equal(element.valueStart, '40');
     assert.equal(element.valueEnd, '50');
   });
+
+  test('drag-end synthesized click on range-start input does not move range-end', async () => {
+    // The browser synthesizes a click on the dragged input at mouseup; it must not reach #onTrackClick.
+    element.valueStart = '5';
+    element.valueEnd = '50';
+    await element.updateComplete;
+
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+
+    startInput.value = '80';
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '5');
+    assert.equal(element.valueEnd, '50');
+
+    const rect = wrapper.getBoundingClientRect();
+    const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
+    const effectiveWidth = rect.width - 2 * thumbRadius;
+    const clientX = rect.left + thumbRadius + 0.95 * effectiveWidth;
+    startInput.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+
+    assert.equal(element.valueStart, '5');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('clicking inside floating input does not move a thumb', async () => {
+    // The floating input is inside .range-wrapper; its click bubbles to the track handler.
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    const rect = wrapper.getBoundingClientRect();
+    const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
+    const effectiveWidth = rect.width - 2 * thumbRadius;
+    const clientX = rect.left + thumbRadius + 0.9 * effectiveWidth;
+    floatInput.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '60');
+  });
 });
 
 suite('zui-slider step dots', () => {
@@ -1268,13 +1365,10 @@ suite('zui-slider step dots', () => {
     assert.equal(dots.length, 5); // 0, 25, 50, 75, 100
   });
 
-  test('step dots not rendered when step is 0', async () => {
+  test('step dots not rendered when step is 0 or negative', async () => {
     element.step = 0;
     await element.updateComplete;
     assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
-  });
-
-  test('step dots not rendered when step is negative', async () => {
     element.step = -5;
     await element.updateComplete;
     assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
@@ -1294,15 +1388,6 @@ suite('zui-slider step dots', () => {
     assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
   });
 
-  test('step dot positions are correctly offset by thumb size', async () => {
-    await element.updateComplete;
-    const dots = element.shadowRoot!.querySelectorAll<HTMLElement>('.step-dot');
-    assert.equal(dots[0].style.left, 'var(--zui-slider-thumb-size)');
-    assert.equal(dots[dots.length - 1].style.left, 'calc(100% - var(--zui-slider-thumb-size))');
-    // pos=50: offset = 1.5 - (3*50)/100 = 0
-    assert.equal(dots[2].style.left, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
-  });
-
   test('step dots toggle when step is set to 0 then back', async () => {
     await element.updateComplete;
     assert.exists(element.shadowRoot!.querySelector('.step-dots'));
@@ -1351,6 +1436,7 @@ suite('zui-slider steps', () => {
   setup(() => {
     element = document.createElement('zui-slider') as ZuiSlider;
     form = buildForm({ enableSubmit: false, appendChildren: [element] });
+    element.steps = ['Small', 'Medium', 'Large'];
   });
 
   teardown(() => {
@@ -1358,20 +1444,17 @@ suite('zui-slider steps', () => {
   });
 
   test('initializes value to first step when current value is not a step label', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.value, 'Small');
   });
 
   test('value set to a valid step label is preserved', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     assert.equal(element.value, 'Medium');
   });
 
   test('native range input has index-based min, max, and step attributes', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     assert.equal(rangeInput.min, '0');
@@ -1380,7 +1463,6 @@ suite('zui-slider steps', () => {
   });
 
   test('native range input value reflects current step index', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
@@ -1388,7 +1470,6 @@ suite('zui-slider steps', () => {
   });
 
   test('dragging native range to index sets value to corresponding step label', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     rangeInput.value = '2';
@@ -1397,7 +1478,6 @@ suite('zui-slider steps', () => {
   });
 
   test('progress is computed by step index, not by numeric value', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Small';
     await element.updateComplete;
     assert.equal(element.progress, 0);
@@ -1408,14 +1488,12 @@ suite('zui-slider steps', () => {
   });
 
   test('floating input is type="text" in steps mode', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     assert.equal(floatInput.type, 'text');
   });
 
   test('floating input change to valid step label updates value immediately', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     floatInput.value = 'Large';
@@ -1423,8 +1501,20 @@ suite('zui-slider steps', () => {
     assert.equal(element.value, 'Large');
   });
 
+  test('steps floating input change does not dispatch change event when value is unchanged', async () => {
+    element.value = 'Medium';
+    await element.updateComplete;
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    floatInput.value = 'Medium';
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(changeCount, 0);
+    assert.equal(element.value, 'Medium');
+  });
+
   test('floating input change to invalid label reverts input to current value', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
@@ -1434,15 +1524,13 @@ suite('zui-slider steps', () => {
     assert.equal(element.value, 'Medium');
   });
 
-  test('floating input debounce resolves typed numeric alias to nearest step', async () => {
+  test('floating input resolves typed numeric alias to nearest step on commit', async () => {
     element.steps = [0, 25, 50, 75, 100];
     await element.updateComplete;
-    assert.equal(element.value, '50'); // '50' is a valid label — not snapped on init
+    assert.equal(element.value, '50'); // '50' is a valid label; not snapped on init
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     floatInput.value = '30';
-    floatInput.dispatchEvent(new Event('input'));
-    assert.equal(element.value, '50'); // debounce not fired yet
-    await new Promise<void>((r) => setTimeout(r, 600));
+    floatInput.dispatchEvent(new Event('change'));
     // |30-25|=5, |30-50|=20 → snaps to '25'
     assert.equal(element.value, '25');
   });
@@ -1460,13 +1548,11 @@ suite('zui-slider steps', () => {
   });
 
   test('step dots count equals steps.length', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3);
   });
 
   test('min-max labels show first and last step labels', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
     assert.equal(labels[0].textContent!.trim(), 'Small');
@@ -1486,7 +1572,6 @@ suite('zui-slider steps', () => {
   test('value is included in form submission as the step label', async () => {
     const name = randString();
     element.setAttribute('name', name);
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Large';
     await element.updateComplete;
     assert.equal(new FormData(form).get(name), 'Large');
@@ -1505,7 +1590,6 @@ suite('zui-slider steps', () => {
   });
 
   test('showStepLabels renders a label element for each step', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.showStepLabels = true;
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelectorAll('.step-dot-label');
@@ -1526,30 +1610,19 @@ suite('zui-slider steps', () => {
   });
 
   test('showStepLabels false renders no label elements', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.shadowRoot!.querySelectorAll('.step-dot-label').length, 0);
   });
 
-  test('clearing steps floating input cancels pending debounce so stale step is not committed', async () => {
-    element.steps = [0, 25, 50, 75, 100];
-    element.value = '50';
+  test('pressing Enter in steps floating input commits the step label', async () => {
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
-    // Start a debounce for '80' (would snap to '75')
-    floatInput.value = '80';
-    floatInput.dispatchEvent(new Event('input'));
-    assert.equal(element.value, '50'); // debounce not yet fired
-    // Clear the field before debounce fires
-    floatInput.value = '';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
-    // The debounce was cancelled; value must stay at '50'
-    assert.equal(element.value, '50');
+    floatInput.value = 'Large';
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(element.value, 'Large');
   });
 
   test('committing empty steps floating input reverts display to current step label', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
@@ -1699,6 +1772,30 @@ suite('zui-slider steps range', () => {
     assert.equal(element.valueStart, 'B');
     assert.equal(element.valueEnd, 'D');
   });
+
+  test('steps range end floating input nudges to next step when typed value matches start step', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    element.valueStart = 'C'; // idx=2
+    element.valueEnd = 'E'; // idx=4
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    floatInputs[1].value = 'C'; // typed = start ('C', idx=2); resolvedIdx(2) <= startIdx(2) → nudge to idx=3 ('D')
+    floatInputs[1].dispatchEvent(new Event('change'));
+    assert.equal(element.valueEnd, 'D');
+    assert.equal(element.valueStart, 'C');
+  });
+
+  test('steps range start floating input nudges to previous step when typed value matches end step', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    element.valueStart = 'A'; // idx=0
+    element.valueEnd = 'C'; // idx=2
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    floatInputs[0].value = 'C'; // typed = end ('C', idx=2); resolvedIdx(2) >= endIdx(2) → nudge to idx=1 ('B')
+    floatInputs[0].dispatchEvent(new Event('change'));
+    assert.equal(element.valueStart, 'B');
+    assert.equal(element.valueEnd, 'C');
+  });
 });
 
 suite('zui-slider stepParser', () => {
@@ -1727,7 +1824,7 @@ suite('zui-slider stepParser', () => {
     };
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
-    floatInput.value = '2k'; // exact step label — resolved before stepParser is consulted
+    floatInput.value = '2k'; // exact step label; resolved before stepParser is consulted
     floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '2k');
     assert.equal(callCount, 0);
@@ -1767,23 +1864,6 @@ suite('zui-slider stepParser', () => {
     assert.equal(element.value, '2k');
   });
 
-  test('null return from debounced stepParser does not update value', async () => {
-    element.steps = [
-      { value: 1000, label: '1k' },
-      { value: 2000, label: '2k' },
-      { value: 3000, label: '3k' },
-    ];
-    element.stepParser = () => null;
-    await element.updateComplete;
-    // Default '50' snapped to '1k' on init
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
-    floatInput.value = 'anything';
-    floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 600));
-    // null → debounce does not call the setter → value stays at '1k'
-    assert.equal(element.value, '1k');
-  });
-
   test('string return from stepParser is used directly as a step label', async () => {
     element.steps = [
       { value: 1000, label: '1k' },