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

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 () => {
@@ -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 () => {
@@ -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,48 +322,56 @@ 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 without waiting for blur', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     assert.equal(element.value, '75');
   });
 
@@ -473,8 +440,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');
   });
 
@@ -892,62 +858,109 @@ 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('valueStart, range-start native input, and start floating input stay in sync after drag', async () => {
     await element.updateComplete;
-    let detail: { valueStart: string; valueEnd: string } | undefined;
-    element.addEventListener('change', (e: Event) => {
-      detail = (e as CustomEvent).detail;
-    });
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
 
-    element.valueStart = '10';
-    element.valueEnd = '40';
+    startInput.value = '30';
+    startInput.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+
+    assert.equal(element.valueStart, '30');
+    assert.equal(startInput.value, '30');
+    assert.equal(floatInputs[0].value, '30');
+  });
+
+  test('valueEnd, range-end native input, and end floating input stay in sync after drag', async () => {
+    await element.updateComplete;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+
+    endInput.value = '60';
+    endInput.dispatchEvent(new Event('input'));
+    await element.updateComplete;
+
+    assert.equal(element.valueEnd, '60');
+    assert.equal(endInput.value, '60');
+    assert.equal(floatInputs[1].value, '60');
+  });
 
+  test('programmatic valueStart reset after drag keeps range-start native input in sync', async () => {
+    element.valueStart = '20';
+    await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.dispatchEvent(new Event('change'));
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
 
-    assert.deepEqual(detail, { valueStart: '10', valueEnd: '40' });
+    startInput.value = '40';
+    startInput.dispatchEvent(new Event('input'));
+    element.valueStart = '20'; // Lit virtual is still '20' from the last render
+
+    await element.updateComplete; // live() ensures '20' is written despite virtual==='20'
+
+    assert.equal(element.valueStart, '20');
+    assert.equal(startInput.value, '20');
+    assert.equal(floatInputs[0].value, '20');
   });
 
-  test('range change event bubbles', async () => {
+  test('programmatic valueEnd reset after drag keeps range-end native input in sync', async () => {
+    element.valueEnd = '80';
     await element.updateComplete;
-    let bubbled = false;
-    document.body.addEventListener('change', () => (bubbled = true), { once: true });
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
 
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.dispatchEvent(new Event('change'));
+    endInput.value = '60';
+    endInput.dispatchEvent(new Event('input'));
+    element.valueEnd = '80'; // Lit virtual is still '80' from the last render
 
-    assert.isTrue(bubbled);
+    await element.updateComplete; // live() ensures '80' is written despite virtual==='80'
+
+    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 on range-end change', async () => {
+  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) => {
       detail = (e as CustomEvent).detail;
     });
 
+    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 () => {
+    await element.updateComplete;
+    let bubbled = false;
+    document.body.addEventListener('change', () => (bubbled = true), { once: true });
+
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.dispatchEvent(new Event('change'));
+
+    assert.isTrue(bubbled);
+  });
+
   test('floating input change fires component range change event', async () => {
     await element.updateComplete;
     let detail: { valueStart: string; valueEnd: string } | undefined;
@@ -962,19 +975,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 +988,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 +1001,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 +1017,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 +1034,29 @@ 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;
     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));
+    floatInputs[0].dispatchEvent(new Event('change'));
     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));
+    floatInputs[1].dispatchEvent(new Event('change'));
     assert.equal(element.valueEnd, '20');
   });
 
-  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,14 +1065,37 @@ 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', async () => {
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     assert.equal(element.valueStart, '30');
+
+    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);
   });
 });
 
@@ -1294,15 +1254,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'));
@@ -1423,6 +1374,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.steps = ['Small', 'Medium', 'Large'];
+    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';
@@ -1434,15 +1399,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
     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');
   });
@@ -1531,21 +1494,13 @@ suite('zui-slider steps', () => {
     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 () => {
+    element.steps = ['Small', 'Medium', 'Large'];
     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 () => {
@@ -1767,23 +1722,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' },