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

package/test/zui-slider.test.ts

@@ -30,7 +30,6 @@ suite('zui-slider', () => {
     assert.equal(element.max, 100);
     assert.equal(element.step, 0);
     assert.equal(element.disabled, false);
-    assert.isFalse(element.showMinMax);
     assert.isFalse(element.range);
   });
 
@@ -98,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 () => {
@@ -197,81 +193,38 @@ suite('zui-slider', () => {
     assert.equal(new FormData(form).get(name), '50');
   });
 
-  test('native inputs use step="1" when step is 0 or negative', async () => {
-    for (const s of [0, -5]) {
-      element.step = s;
-      await element.updateComplete;
-      const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-      const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-      assert.equal(input.step, '1');
-      assert.equal(floatInput.step, '1');
-    }
-  });
-
-  test('native inputs have correct step attribute when step is set', async () => {
-    element.step = 25;
+  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 floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    assert.equal(input.step, '25');
-    assert.equal(floatInput.step, '25');
-  });
+    const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
 
-  test('native inputs reflect min and max properties in DOM', async () => {
-    element.min = 10;
-    element.max = 90;
+    rangeInput.value = '75';
+    rangeInput.dispatchEvent(new Event('input'));
     await element.updateComplete;
-    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
-    assert.equal(input.min, '10');
-    assert.equal(input.max, '90');
-    assert.equal(floatInput.min, '10');
-    assert.equal(floatInput.max, '90');
-  });
 
-  test('single mode input has inline linear-gradient background with transparent insets', 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))');
+    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'));
 
-  test('single mode gradient progress stop shifts when value changes', async () => {
-    // At value=50 (progress=50): offset = 1.5 - (3*50)/100 = 0
-    element.value = '50';
-    await element.updateComplete;
-    const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(
-      input.style.getPropertyValue('--zui-slider-track-bg'),
-      'calc(50% + var(--zui-slider-thumb-size) * 0)'
-    );
+    // Before that render fires, programmatically revert — this is the live() failure case
+    element.value = '50'; // Lit virtual is still '50' from the last render
 
-    // At value=75 (progress=75): offset = 1.5 - (3*75)/100 = -0.75
-    element.value = '75';
-    await element.updateComplete;
-    assert.include(
-      input.style.getPropertyValue('--zui-slider-track-bg'),
-      'calc(75% + var(--zui-slider-thumb-size) * -0.75)'
-    );
-    assert.notInclude(
-      input.style.getPropertyValue('--zui-slider-track-bg'),
-      'calc(50% + var(--zui-slider-thumb-size) * 0)'
-    );
+    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 () => {
@@ -359,82 +312,66 @@ 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 300ms — value must not update synchronously
-    assert.equal(element.value, '50');
-    await new Promise<void>((r) => setTimeout(r, 350));
-    assert.equal(element.value, '75');
-  });
-
-  test('form reset cancels pending floating input debounce', async () => {
+  test('committing empty floating input reverts display to current value', 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, 350));
-    // 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';
+    element.value = '75';
     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');
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(element.value, '75');
+    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, 350));
+    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, 350));
+    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, 350));
+    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 300ms
-    await new Promise<void>((r) => setTimeout(r, 350));
+    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');
   });
 
@@ -503,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');
   });
 
@@ -552,7 +488,7 @@ suite('zui-slider', () => {
   });
 });
 
-suite('zui-slider showMinMax', () => {
+suite('zui-slider min-max labels', () => {
   let element: ZuiSlider;
 
   setup(() => {
@@ -564,26 +500,30 @@ suite('zui-slider showMinMax', () => {
     document.body.removeChild(element);
   });
 
-  test('min-max labels toggle with showMinMax and reflect correct values', async () => {
+  test('min-max labels are always rendered when showStepLabels is false', async () => {
     await element.updateComplete;
-    assert.notExists(element.shadowRoot!.querySelector('.min-max-labels'));
+    assert.exists(element.shadowRoot!.querySelector('.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');
+    assert.exists(labels);
+    assert.equal(labels!.style.visibility, 'hidden');
+  });
+
+  test('min-max labels reflect min and max values', async () => {
     element.min = 10;
     element.max = 90;
-    element.showMinMax = true;
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
-    assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
     assert.equal(labels[0].textContent!.trim(), '10');
     assert.equal(labels[1].textContent!.trim(), '90');
-
-    element.showMinMax = false;
-    await element.updateComplete;
-    assert.notExists(element.shadowRoot!.querySelector('.min-max-labels'));
   });
 
-  test('min-max labels update when min and max change after initial render', async () => {
-    element.showMinMax = true;
+  test('min-max labels update when min and max change', async () => {
     element.min = 10;
     element.max = 90;
     await element.updateComplete;
@@ -595,17 +535,10 @@ suite('zui-slider showMinMax', () => {
     assert.equal(labels[1].textContent!.trim(), '95');
   });
 
-  test('show-min-max HTML attribute enables min-max labels', async () => {
-    element.setAttribute('show-min-max', '');
-    await element.updateComplete;
-    assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
-  });
-
   test('min-max labels render in range mode', async () => {
     element.setAttribute('range', '');
     element.min = 5;
     element.max = 95;
-    element.showMinMax = true;
     await element.updateComplete;
     assert.exists(element.shadowRoot!.querySelector('.min-max-labels'));
     const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
@@ -613,6 +546,15 @@ suite('zui-slider showMinMax', () => {
     assert.equal(labels[0].textContent!.trim(), '5');
     assert.equal(labels[1].textContent!.trim(), '95');
   });
+
+  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');
+    assert.exists(labels);
+    assert.equal(labels!.style.visibility, 'hidden');
+  });
 });
 
 faceTests<ZuiSlider>('zui-slider', {
@@ -649,7 +591,6 @@ suite('zui-slider range', () => {
     assert.equal(element.max, 100);
     assert.equal(element.step, 0);
     assert.isFalse(element.disabled);
-    assert.isFalse(element.showMinMax);
   });
 
   test('accepts value-start and value-end attributes', () => {
@@ -917,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;
@@ -987,58 +975,6 @@ suite('zui-slider range', () => {
     assert.deepEqual(detail, { valueStart: '20', valueEnd: '100' });
   });
 
-  test('range inputs reflect min and max properties in DOM', async () => {
-    element.min = 10;
-    element.max = 90;
-    await element.updateComplete;
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    assert.equal(startInput.min, '10');
-    assert.equal(startInput.max, '90');
-    assert.equal(endInput.min, '10');
-    assert.equal(endInput.max, '90');
-    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs.forEach((fi) => {
-      assert.equal(fi.min, '10');
-      assert.equal(fi.max, '90');
-    });
-  });
-
-  test('all range inputs use step="1" when component step is 0', async () => {
-    element.step = 0;
-    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[type="number"]');
-    assert.equal(startInput.step, '1');
-    assert.equal(endInput.step, '1');
-    floatInputs.forEach((fi) => assert.equal(fi.step, '1'));
-  });
-
-  test('all range inputs have correct step attribute when step is set', async () => {
-    element.step = 10;
-    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[type="number"]');
-    assert.equal(startInput.step, '10');
-    assert.equal(endInput.step, '10');
-    floatInputs.forEach((fi) => assert.equal(fi.step, '10'));
-  });
-
-  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')!;
@@ -1052,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')!;
@@ -1078,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')!;
@@ -1102,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 300ms — valueStart must not update synchronously
-    assert.equal(element.valueStart, '20');
-    await new Promise<void>((r) => setTimeout(r, 350));
-    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 300ms — valueEnd must not update synchronously
-    assert.equal(element.valueEnd, '80');
-    await new Promise<void>((r) => setTimeout(r, 350));
-    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')!;
@@ -1158,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, 350));
+    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, 350));
+    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, 350));
+    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) => {
@@ -1192,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 300ms
-    await new Promise<void>((r) => setTimeout(r, 350));
+  });
+
+  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);
   });
 });
 
@@ -1358,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'));
@@ -1407,3 +1294,484 @@ suite('zui-slider step dots', () => {
     assert.equal(wrapper.querySelectorAll('.step-dot').length, 5); // 0, 25, 50, 75, 100
   });
 });
+
+suite('zui-slider steps', () => {
+  let element: ZuiSlider;
+  let form: HTMLFormElement;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    form = buildForm({ enableSubmit: false, appendChildren: [element] });
+  });
+
+  teardown(() => {
+    document.body.removeChild(form);
+  });
+
+  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');
+    assert.equal(rangeInput.max, '2');
+    assert.equal(rangeInput.step, '1');
+  });
+
+  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"]')!;
+    assert.equal(rangeInput.value, '1');
+  });
+
+  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';
+    rangeInput.dispatchEvent(new Event('input'));
+    assert.equal(element.value, 'Large');
+  });
+
+  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);
+    element.value = 'Medium';
+    assert.equal(element.progress, 50);
+    element.value = 'Large';
+    assert.equal(element.progress, 100);
+  });
+
+  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';
+    floatInput.dispatchEvent(new Event('change'));
+    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';
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    floatInput.value = 'ExtraLarge';
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(floatInput.value, 'Medium');
+    assert.equal(element.value, 'Medium');
+  });
+
+  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('change'));
+    // |30-25|=5, |30-50|=20 → snaps to '25'
+    assert.equal(element.value, '25');
+  });
+
+  test('overflow step is preferred when value exceeds last finite step', async () => {
+    element.steps = [
+      { value: 0, label: '0' },
+      { value: 100, label: '100' },
+      { value: Infinity, label: '100+' },
+    ];
+    await element.updateComplete;
+    // 150 > lastFiniteValue=100 → overflow step wins
+    element.value = '150';
+    assert.equal(element.value, '100+');
+  });
+
+  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');
+    assert.equal(labels[1].textContent!.trim(), 'Large');
+  });
+
+  test('updating steps snaps current value to first step when no longer a valid label', async () => {
+    element.steps = ['A', 'B', 'C'];
+    element.value = 'B';
+    await element.updateComplete;
+    element.steps = ['X', 'Y', 'Z'];
+    await element.updateComplete;
+    // 'B' not in new steps → snaps to first step
+    assert.equal(element.value, 'X');
+  });
+
+  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');
+  });
+
+  test('object form steps expose label as public value and use numeric value for snapping', async () => {
+    element.steps = [
+      { value: 0, label: 'None' },
+      { value: 500, label: 'Half' },
+      { value: 1000, label: 'Full' },
+    ];
+    // |400-0|=400, |400-500|=100, |400-1000|=600 → snaps to 'Half'
+    element.value = '400';
+    await element.updateComplete;
+    assert.equal(element.value, 'Half');
+  });
+
+  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');
+    assert.equal(labels.length, 3);
+    assert.equal(labels[0].textContent!.trim(), 'Small');
+    assert.equal(labels[1].textContent!.trim(), 'Medium');
+    assert.equal(labels[2].textContent!.trim(), 'Large');
+  });
+
+  test('showStepLabels uses label when provided, value otherwise', async () => {
+    element.steps = [{ value: 0, label: 'None' }, { value: 500 }, { value: 1000, label: 'Full' }];
+    element.showStepLabels = true;
+    await element.updateComplete;
+    const labels = element.shadowRoot!.querySelectorAll('.step-dot-label');
+    assert.equal(labels[0].textContent!.trim(), 'None');
+    assert.equal(labels[1].textContent!.trim(), '500');
+    assert.equal(labels[2].textContent!.trim(), 'Full');
+  });
+
+  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('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')!;
+    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')!;
+    floatInput.value = '';
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(element.value, 'Medium');
+    assert.equal(floatInput.value, 'Medium');
+  });
+
+  test('steps attribute is parsed from comma-separated string', async () => {
+    element.setAttribute('steps', 'Small,Medium,Large');
+    await element.updateComplete;
+    assert.equal(element.value, 'Small');
+    assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3);
+  });
+
+  test('form reset restores initial step label', async () => {
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    const name = randString();
+    el.setAttribute('name', name);
+    el.steps = ['Small', 'Medium', 'Large'];
+    el.value = 'Medium';
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    el.value = 'Large';
+    f.reset();
+
+    assert.equal(el.value, 'Medium');
+    assert.equal(new FormData(f).get(name), 'Medium');
+    document.body.removeChild(f);
+  });
+});
+
+suite('zui-slider steps range', () => {
+  let element: ZuiSlider;
+  let form: HTMLFormElement;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    element.setAttribute('range', '');
+    form = buildForm({ enableSubmit: false, appendChildren: [element] });
+  });
+
+  teardown(() => {
+    document.body.removeChild(form);
+  });
+
+  test('invalid default valueStart and valueEnd snap to first and last step', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+    assert.equal(element.valueStart, 'A');
+    assert.equal(element.valueEnd, 'E');
+  });
+
+  test('valid step labels for valueStart and valueEnd are preserved', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    element.valueStart = 'B';
+    element.valueEnd = 'D';
+    await element.updateComplete;
+    assert.equal(element.valueStart, 'B');
+    assert.equal(element.valueEnd, 'D');
+  });
+
+  test('dragging start thumb to index equal to endIdx is rejected', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+    // valueStart='A'(idx=0), valueEnd='E'(idx=4)
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '4'; // equal to endIdx → rejected
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, 'A');
+    assert.equal(startInput.value, '0');
+  });
+
+  test('dragging start thumb to valid index advances valueStart', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    startInput.value = '2'; // index of 'C', less than endIdx=4 → accepted
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, 'C');
+  });
+
+  test('progressStart and progressEnd are computed by step index', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+    assert.equal(element.progressStart, 0); // 'A' at idx 0/4 = 0%
+    assert.equal(element.progressEnd, 100); // 'E' at idx 4/4 = 100%
+    element.valueStart = 'B'; // idx 1/4 = 25%
+    element.valueEnd = 'D'; // idx 3/4 = 75%
+    assert.equal(element.progressStart, 25);
+    assert.equal(element.progressEnd, 75);
+  });
+
+  test('form value is step labels joined as "start,end"', async () => {
+    const name = randString();
+    element.setAttribute('name', name);
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+    assert.equal(new FormData(form).get(name), 'A,E');
+  });
+
+  test('dynamic steps change snaps both invalid values to first and last step', async () => {
+    element.steps = ['A', 'B', 'C'];
+    element.valueStart = 'A';
+    element.valueEnd = 'C';
+    await element.updateComplete;
+    element.steps = ['X', 'Y', 'Z'];
+    await element.updateComplete;
+    // 'A' and 'C' not in new steps → snap to first and last
+    assert.equal(element.valueStart, 'X');
+    assert.equal(element.valueEnd, 'Z');
+  });
+
+  test('form reset restores initial step labels in range mode', async () => {
+    const el = document.createElement('zui-slider') as ZuiSlider;
+    el.setAttribute('range', '');
+    const name = randString();
+    el.setAttribute('name', name);
+    el.steps = ['A', 'B', 'C', 'D', 'E'];
+    el.valueStart = 'B';
+    el.valueEnd = 'D';
+    const f = buildForm({ enableSubmit: false, appendChildren: [el] });
+    await el.updateComplete;
+
+    el.valueStart = 'A';
+    el.valueEnd = 'E';
+    f.reset();
+
+    assert.equal(el.valueStart, 'B');
+    assert.equal(el.valueEnd, 'D');
+    assert.equal(new FormData(f).get(name), 'B,D');
+    document.body.removeChild(f);
+  });
+
+  test('track click moves nearer thumb in steps mode', async () => {
+    // 5 steps → indices 0-4 (total=4); fraction 0.25 → idx 1 ('B'), fraction 0.75 → idx 3 ('D')
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    await element.updateComplete;
+
+    clickAtFraction(element, 0.25); // closer to start (idx=0 'A') than end (idx=4 'E') → moves start
+    assert.equal(element.valueStart, 'B');
+    assert.equal(element.valueEnd, 'E');
+
+    clickAtFraction(element, 0.75); // closer to end (idx=4 'E') than start (idx=1 'B') → moves end
+    assert.equal(element.valueStart, 'B');
+    assert.equal(element.valueEnd, 'D');
+  });
+});
+
+suite('zui-slider stepParser', () => {
+  let element: ZuiSlider;
+  let form: HTMLFormElement;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    form = buildForm({ enableSubmit: false, appendChildren: [element] });
+  });
+
+  teardown(() => {
+    document.body.removeChild(form);
+  });
+
+  test('exact step label match does not invoke stepParser', async () => {
+    let callCount = 0;
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => {
+      callCount++;
+      return parseFloat(input) * 1000;
+    };
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    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);
+  });
+
+  test('number return from stepParser snaps to nearest step by numeric value', async () => {
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => {
+      const m = input.match(/^([\d.]+)k$/);
+      return m ? parseFloat(m[1]) * 1000 : null;
+    };
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    floatInput.value = '1.5k'; // stepParser returns 1500; |1500-1000|=|1500-2000|=500 → tie → first ('1k') wins
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(element.value, '1k');
+  });
+
+  test('null return from stepParser reverts floating input to current value', async () => {
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => (input === 'bad' ? null : parseFloat(input) * 1000);
+    element.value = '2k';
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    floatInput.value = 'bad';
+    floatInput.dispatchEvent(new Event('change'));
+    // null → rejected; floating input reverts to the current step value
+    assert.equal(floatInput.value, '2k');
+    assert.equal(element.value, '2k');
+  });
+
+  test('string return from stepParser is used directly as a step label', async () => {
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => (input.startsWith('3') ? '3k' : null);
+    await element.updateComplete;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    floatInput.value = '3000'; // stepParser returns '3k', an exact step label
+    floatInput.dispatchEvent(new Event('change'));
+    assert.equal(element.value, '3k');
+  });
+
+  test('programmatic value set uses stepParser for non-label strings via #clampToRange', async () => {
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => {
+      const m = input.match(/^([\d.]+)k$/);
+      return m ? parseFloat(m[1]) * 1000 : null;
+    };
+    await element.updateComplete;
+    // '2.5k' → stepParser returns 2500; |2500-2000|=|2500-3000|=500 → tie → '2k' wins
+    element.value = '2.5k';
+    assert.equal(element.value, '2k');
+  });
+
+  test('stepParser resolves typed aliases in range mode floating inputs', async () => {
+    element.setAttribute('range', '');
+    element.steps = [
+      { value: 1000, label: '1k' },
+      { value: 2000, label: '2k' },
+      { value: 3000, label: '3k' },
+    ];
+    element.stepParser = (input) => {
+      const m = input.match(/^([\d.]+)k$/);
+      return m ? parseFloat(m[1]) * 1000 : null;
+    };
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    // '1.5k' → stepParser returns 1500; tie at 500 from both '1k' and '2k' → first ('1k') wins
+    floatInputs[0].value = '1.5k';
+    floatInputs[0].dispatchEvent(new Event('change'));
+    assert.equal(element.valueStart, '1k');
+    // '2.5k' → stepParser returns 2500; tie → first ('2k') wins
+    floatInputs[1].value = '2.5k';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    assert.equal(element.valueEnd, '2k');
+  });
+});