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

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);
   });
 
@@ -197,38 +196,6 @@ 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;
-    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');
-  });
-
-  test('native inputs reflect min and max properties in DOM', async () => {
-    element.min = 10;
-    element.max = 90;
-    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"]')!;
@@ -251,29 +218,6 @@ suite('zui-slider', () => {
     assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
   });
 
-  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)'
-    );
-
-    // 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)'
-    );
-  });
-
   test('form reset hides visible floating input', async () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
@@ -365,9 +309,9 @@ suite('zui-slider', () => {
     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
+    // Debounce is 500ms — value must not update synchronously
     assert.equal(element.value, '50');
-    await new Promise<void>((r) => setTimeout(r, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.value, '75');
   });
 
@@ -378,7 +322,7 @@ suite('zui-slider', () => {
     floatInput.dispatchEvent(new Event('input'));
     // Debounce is pending — reset before it fires
     form.reset();
-    await new Promise<void>((r) => setTimeout(r, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     // Debounce timer must have been cancelled by formResetCallback
     assert.equal(element.value, '50');
   });
@@ -393,18 +337,44 @@ suite('zui-slider', () => {
     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';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '';
+    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 () => {
     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));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.value, '100');
 
     element.min = 20;
     floatInput.value = '5';
     floatInput.dispatchEvent(new Event('input'));
-    await new Promise<void>((r) => setTimeout(r, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.value, '20');
   });
 
@@ -414,7 +384,7 @@ suite('zui-slider', () => {
     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));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.value, '50');
   });
 
@@ -433,8 +403,8 @@ suite('zui-slider', () => {
     floatInput.dispatchEvent(new Event('change')); // commits immediately
     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));
+    // Debounce timer was cleared — value must not update again after 500ms
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.value, '75');
   });
 
@@ -552,7 +522,7 @@ suite('zui-slider', () => {
   });
 });
 
-suite('zui-slider showMinMax', () => {
+suite('zui-slider min-max labels', () => {
   let element: ZuiSlider;
 
   setup(() => {
@@ -564,26 +534,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.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;
-    assert.notExists(element.shadowRoot!.querySelector('.min-max-labels'));
+    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 +569,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 +580,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 +625,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', () => {
@@ -987,45 +962,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;
@@ -1123,9 +1059,9 @@ suite('zui-slider range', () => {
     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
+    // Debounce is 500ms — valueStart must not update synchronously
     assert.equal(element.valueStart, '20');
-    await new Promise<void>((r) => setTimeout(r, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.valueStart, '40');
   });
 
@@ -1135,9 +1071,9 @@ suite('zui-slider range', () => {
     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
+    // Debounce is 500ms — valueEnd must not update synchronously
     assert.equal(element.valueEnd, '80');
-    await new Promise<void>((r) => setTimeout(r, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.valueEnd, '60');
   });
 
@@ -1163,13 +1099,13 @@ suite('zui-slider range', () => {
     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));
+    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, 350));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.valueEnd, '20');
   });
 
@@ -1179,7 +1115,7 @@ suite('zui-slider range', () => {
     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));
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.valueStart, '20');
   });
 
@@ -1197,12 +1133,122 @@ suite('zui-slider range', () => {
     floatInputs[0].dispatchEvent(new Event('change')); // commits immediately
     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));
+    // Debounce timer was cleared — value must not update again after 500ms
+    await new Promise<void>((r) => setTimeout(r, 600));
     assert.equal(element.valueStart, '30');
   });
 });
 
+// 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')!;
+  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 + fraction * effectiveWidth;
+  wrapper.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+}
+
+suite('zui-slider range track click', () => {
+  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('moves start thumb when clicking left of both thumbs', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '25');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('moves end thumb when clicking right of both thumbs', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.75);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '75');
+  });
+
+  test('moves start thumb when closer to start than end', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+    clickAtFraction(element, 0.3);
+    assert.equal(element.valueStart, '30');
+    assert.equal(element.valueEnd, '60');
+  });
+
+  test('moves end thumb when closer to end than start', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+    clickAtFraction(element, 0.5);
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('prefers start thumb when equidistant from both', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.5);
+    assert.equal(element.valueStart, '50');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does nothing when disabled', async () => {
+    element.disabled = true;
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does nothing when readonly', async () => {
+    element.setAttribute('readonly', '');
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('fires change event with valueStart and valueEnd detail', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+    clickAtFraction(element, 0.25);
+    assert.deepEqual(detail, { valueStart: '25', valueEnd: '100' });
+  });
+
+  test('snaps clicked value to nearest step', async () => {
+    element.step = 10;
+    await element.updateComplete;
+    clickAtFraction(element, 0.23);
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does not move start thumb when snapped value would equal end', async () => {
+    element.valueStart = '40';
+    element.valueEnd = '50';
+    element.step = 10;
+    await element.updateComplete;
+    // 45% is equidistant (tie → start preferred), but snaps to 50 which is not < endNum=50 → no move
+    clickAtFraction(element, 0.45);
+    assert.equal(element.valueStart, '40');
+    assert.equal(element.valueEnd, '50');
+  });
+});
+
 suite('zui-slider step dots', () => {
   let element: ZuiSlider;
 
@@ -1297,3 +1343,497 @@ 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('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 debounce resolves typed numeric alias to nearest step', 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));
+    // |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('clearing steps floating input cancels pending debounce so stale step is not committed', async () => {
+    element.steps = [0, 25, 50, 75, 100];
+    element.value = '50';
+    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');
+  });
+
+  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('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' },
+      { 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');
+  });
+});