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

package/test/zui-slider.test.ts

@@ -124,7 +124,7 @@ suite('zui-slider', () => {
   test('valueAsNumber reads the single-mode backing field regardless of range mode', () => {
     element.value = '35';
     element.range = true;
-    // valueAsNumber reads #value (the single-mode backing field) — range mode does not update it
+    // valueAsNumber reads #value (the single-mode backing field); range mode does not update it
     assert.equal(element.valueAsNumber, 35);
   });
 
@@ -218,7 +218,7 @@ suite('zui-slider', () => {
     input.value = '75';
     input.dispatchEvent(new Event('input'));
 
-    // Before that render fires, programmatically revert — this is the live() failure case
+    // Before that render fires, programmatically revert. This is the live() failure case.
     element.value = '50'; // Lit virtual is still '50' from the last render
 
     await element.updateComplete; // without live(), Lit sees virtual='50'==new='50' → skips DOM write
@@ -277,7 +277,7 @@ suite('zui-slider', () => {
   });
 
   test('connectedCallback with range property (not attribute) uses range branch', async () => {
-    // el.range = true without setAttribute — connectedCallback must check this.range too.
+    // el.range = true without setAttribute; connectedCallback must check this.range too.
     // Must await so the async connectedCallback reads native inputs and calls _setFormValue.
     const el = document.createElement('zui-slider') as ZuiSlider;
     el.range = true;
@@ -366,13 +366,57 @@ suite('zui-slider', () => {
     assert.equal(changeCount, 1);
   });
 
-  test('pressing Enter in floating input commits value without waiting for blur', async () => {
+  test('pressing Enter in floating input commits value and retains focus', async () => {
     await element.updateComplete;
     element.value = '50';
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    let blurred = false;
+    floatInput.addEventListener('blur', () => (blurred = true));
     floatInput.value = '75';
     floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     assert.equal(element.value, '75');
+    assert.isFalse(blurred);
+  });
+
+  test('blurring floating input commits typed value', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.value, '75');
+  });
+
+  test('blurring floating input after Enter does not dispatch second change event', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.value, '75');
+    assert.equal(changeCount, 1);
+  });
+
+  test('typing after Enter in floating input re-enables blur commit', async () => {
+    await element.updateComplete;
+    element.value = '50';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input[type="number"]')!;
+    floatInput.value = '75';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(changeCount, 1);
+    floatInput.value = '80';
+    floatInput.dispatchEvent(new Event('input'));
+    floatInput.dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.value, '80');
+    assert.equal(changeCount, 2);
   });
 
   test('focused floating input stays visible after pointerleave', async () => {
@@ -404,7 +448,7 @@ suite('zui-slider', () => {
     await element.updateComplete;
     assert.isTrue(thumbInputDiv.classList.contains('thumb-input--visible'));
 
-    // Blur without re-focusing — #blurFloatingInput clears focused and schedules hide.
+    // Blur without re-focusing; #blurFloatingInput clears focused and schedules hide.
     // #scheduleHideThumbInput uses a real 100ms setTimeout, so wait past it before asserting.
     floatInput.dispatchEvent(new Event('blur'));
     rangeInput.dispatchEvent(new Event('pointerleave'));
@@ -422,7 +466,7 @@ suite('zui-slider', () => {
     await element.updateComplete;
     assert.isTrue(element.shadowRoot!.querySelector('.thumb-input')!.classList.contains('thumb-input--visible'));
 
-    // Disconnect then reconnect — disconnectedCallback should clear state
+    // Disconnect then reconnect; disconnectedCallback should clear state
     document.body.removeChild(form);
     document.body.appendChild(form);
     await element.updateComplete;
@@ -506,7 +550,6 @@ suite('zui-slider min-max labels', () => {
   });
 
   test('min-max labels are hidden when showStepLabels is true', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.showStepLabels = true;
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelector<HTMLElement>('.min-max-labels');
@@ -548,7 +591,6 @@ suite('zui-slider min-max labels', () => {
   });
 
   test('show-step-labels attribute hides min-max labels', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.setAttribute('show-step-labels', '');
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelector<HTMLElement>('.min-max-labels');
@@ -773,61 +815,39 @@ suite('zui-slider range', () => {
     document.body.removeChild(f);
   });
 
-  test('input handler rejects start dragging past end', async () => {
+  test('input handler rejects start dragging to or past end', async () => {
     await element.updateComplete;
     element.valueStart = '20';
     element.valueEnd = '60';
-
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.value = '70';
-    startInput.dispatchEvent(new Event('input'));
 
+    startInput.value = '70'; // past end
+    startInput.dispatchEvent(new Event('input'));
     assert.equal(element.valueStart, '20');
     assert.equal(element.valueEnd, '60');
     assert.equal(startInput.value, '20');
-  });
-
-  test('input handler rejects start dragging to equal end', async () => {
-    await element.updateComplete;
-    element.valueStart = '20';
-    element.valueEnd = '60';
 
-    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
-    startInput.value = '60';
+    startInput.value = '60'; // equal to end
     startInput.dispatchEvent(new Event('input'));
-
-    // start >= end is rejected; input snaps back and state is unchanged
     assert.equal(element.valueStart, '20');
-    assert.equal(element.valueEnd, '60');
     assert.equal(startInput.value, '20');
   });
 
-  test('input handler rejects end dragging before start', async () => {
+  test('input handler rejects end dragging to or before start', async () => {
     await element.updateComplete;
     element.valueStart = '30';
     element.valueEnd = '70';
-
     const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    endInput.value = '20';
-    endInput.dispatchEvent(new Event('input'));
 
+    endInput.value = '20'; // before start
+    endInput.dispatchEvent(new Event('input'));
     assert.equal(element.valueEnd, '70');
     assert.equal(element.valueStart, '30');
     assert.equal(endInput.value, '70');
-  });
-
-  test('input handler rejects end dragging to equal start', async () => {
-    await element.updateComplete;
-    element.valueStart = '30';
-    element.valueEnd = '70';
 
-    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    endInput.value = '30';
+    endInput.value = '30'; // equal to start
     endInput.dispatchEvent(new Event('input'));
-
-    // end <= start is rejected; input snaps back and state is unchanged
     assert.equal(element.valueEnd, '70');
-    assert.equal(element.valueStart, '30');
     assert.equal(endInput.value, '70');
   });
 
@@ -868,63 +888,47 @@ suite('zui-slider range', () => {
     assert.include(thumbInputDivs[0].style.left, '30%');
   });
 
-  test('valueStart, range-start native input, and start floating input stay in sync after drag', async () => {
+  test('native range inputs and floating inputs stay in sync with component values after drag', async () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
 
     startInput.value = '30';
     startInput.dispatchEvent(new Event('input'));
+    endInput.value = '60';
+    endInput.dispatchEvent(new Event('input'));
     await element.updateComplete;
 
     assert.equal(element.valueStart, '30');
     assert.equal(startInput.value, '30');
     assert.equal(floatInputs[0].value, '30');
-  });
-
-  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 () => {
+  test('programmatic value resets after drag keep both native range inputs in sync via live()', async () => {
     element.valueStart = '20';
+    element.valueEnd = '80';
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
 
     startInput.value = '40';
     startInput.dispatchEvent(new Event('input'));
-    element.valueStart = '20'; // Lit virtual is still '20' 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('programmatic valueEnd reset after drag keeps range-end native input in sync', async () => {
-    element.valueEnd = '80';
-    await element.updateComplete;
-    const endInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-end')!;
-    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    element.valueStart = '20'; // Lit virtual is still '20'; live() must force the DOM write
 
     endInput.value = '60';
     endInput.dispatchEvent(new Event('input'));
-    element.valueEnd = '80'; // Lit virtual is still '80' from the last render
+    element.valueEnd = '80'; // same live() invariant for end thumb
 
-    await element.updateComplete; // live() ensures '80' is written despite virtual==='80'
+    await element.updateComplete;
 
+    assert.equal(element.valueStart, '20');
+    assert.equal(startInput.value, '20');
+    assert.equal(floatInputs[0].value, '20');
     assert.equal(element.valueEnd, '80');
     assert.equal(endInput.value, '80');
     assert.equal(floatInputs[1].value, '80');
@@ -1036,15 +1040,19 @@ suite('zui-slider range', () => {
 
   test('range floating inputs clamp out-of-bounds values to min/max on commit', async () => {
     await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
-    floatInputs[0].value = '150';
+
+    // Start thumb: type below min → clamped to min (0); 0 < endNum (80) → no nudge
+    floatInputs[0].value = '-50';
     floatInputs[0].dispatchEvent(new Event('change'));
-    assert.equal(element.valueStart, '100');
+    assert.equal(element.valueStart, '0');
 
-    element.min = 20;
-    floatInputs[1].value = '5';
+    // End thumb: type above max → clamped to max (100); 100 > startNum (0) → no nudge
+    floatInputs[1].value = '150';
     floatInputs[1].dispatchEvent(new Event('change'));
-    assert.equal(element.valueEnd, '20');
+    assert.equal(element.valueEnd, '100');
   });
 
   test('range floating input snaps typed valueStart to nearest step on commit', async () => {
@@ -1070,13 +1078,16 @@ suite('zui-slider range', () => {
     assert.deepEqual(detail, { valueStart: '30', valueEnd: '100' });
   });
 
-  test('pressing Enter in range floating inputs commits values', async () => {
+  test('pressing Enter in range floating inputs commits values and retains focus', async () => {
     await element.updateComplete;
     const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    let startBlurred = false;
+    floatInputs[0].addEventListener('blur', () => (startBlurred = true));
 
     floatInputs[0].value = '30';
     floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     assert.equal(element.valueStart, '30');
+    assert.isFalse(startBlurred);
 
     floatInputs[1].value = '70';
     floatInputs[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
@@ -1097,9 +1108,93 @@ suite('zui-slider range', () => {
     floatInputs[1].dispatchEvent(new Event('change'));
     assert.equal(changeCount, 0);
   });
+
+  test('range start floating input nudges to one step below end when typed value equals end', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '50';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '50';
+    floatInputs[0].dispatchEvent(new Event('change'));
+    // typed 50 = end 50; effectiveStep=1; nudge to 50-1=49 < 50 → committed as '49'
+    assert.equal(element.valueStart, '49');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('range end floating input nudges to one step above start when typed value equals start', async () => {
+    await element.updateComplete;
+    element.valueStart = '50';
+    element.valueEnd = '80';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[1].value = '50';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    // typed 50 = start 50; effectiveStep=1; nudge to 50+1=51 > 50 → committed as '51'
+    assert.equal(element.valueEnd, '51');
+    assert.equal(element.valueStart, '50');
+  });
+
+  test('range floating input nudge respects decimal step', async () => {
+    element.step = 0.1;
+    await element.updateComplete;
+    element.valueStart = '1';
+    element.valueEnd = '5';
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[1].value = '1';
+    floatInputs[1].dispatchEvent(new Event('change'));
+    // typed 1 = start 1; effectiveStep=0.1; nudge to 1+0.1=1.1 > 1 → committed as '1.1'
+    assert.equal(element.valueEnd, '1.1');
+    assert.equal(element.valueStart, '1');
+  });
+
+  test('blurring range floating input commits typed value', async () => {
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueStart, '30');
+
+    floatInputs[1].value = '70';
+    floatInputs[1].dispatchEvent(new Event('input'));
+    floatInputs[1].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueEnd, '70');
+  });
+
+  test('blurring range floating input after Enter does not dispatch second change event', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueStart, '30');
+    assert.equal(changeCount, 1);
+  });
+
+  test('typing after Enter in range floating input re-enables blur commit', async () => {
+    await element.updateComplete;
+    element.valueStart = '20';
+    element.valueEnd = '80';
+    let changeCount = 0;
+    element.addEventListener('change', () => changeCount++);
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input[type="number"]');
+    floatInputs[0].value = '30';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    assert.equal(changeCount, 1);
+    floatInputs[0].value = '40';
+    floatInputs[0].dispatchEvent(new Event('input'));
+    floatInputs[0].dispatchEvent(new FocusEvent('blur'));
+    assert.equal(element.valueStart, '40');
+    assert.equal(changeCount, 2);
+  });
 });
 
-// Dispatches a click at a given 0–1 fraction of the effective track, matching the
+// Dispatches a click at a given 0-1 fraction of the effective track, matching the
 // coordinate math in #onTrackClick so the component computes the same fraction back.
 function clickAtFraction(element: ZuiSlider, fraction: number): void {
   const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
@@ -1207,6 +1302,48 @@ suite('zui-slider range track click', () => {
     assert.equal(element.valueStart, '40');
     assert.equal(element.valueEnd, '50');
   });
+
+  test('drag-end synthesized click on range-start input does not move range-end', async () => {
+    // The browser synthesizes a click on the dragged input at mouseup; it must not reach #onTrackClick.
+    element.valueStart = '5';
+    element.valueEnd = '50';
+    await element.updateComplete;
+
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+
+    startInput.value = '80';
+    startInput.dispatchEvent(new Event('input'));
+    assert.equal(element.valueStart, '5');
+    assert.equal(element.valueEnd, '50');
+
+    const rect = wrapper.getBoundingClientRect();
+    const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
+    const effectiveWidth = rect.width - 2 * thumbRadius;
+    const clientX = rect.left + thumbRadius + 0.95 * effectiveWidth;
+    startInput.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+
+    assert.equal(element.valueStart, '5');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('clicking inside floating input does not move a thumb', async () => {
+    // The floating input is inside .range-wrapper; its click bubbles to the track handler.
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+
+    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+    const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
+    const rect = wrapper.getBoundingClientRect();
+    const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
+    const effectiveWidth = rect.width - 2 * thumbRadius;
+    const clientX = rect.left + thumbRadius + 0.9 * effectiveWidth;
+    floatInput.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '60');
+  });
 });
 
 suite('zui-slider step dots', () => {
@@ -1228,13 +1365,10 @@ suite('zui-slider step dots', () => {
     assert.equal(dots.length, 5); // 0, 25, 50, 75, 100
   });
 
-  test('step dots not rendered when step is 0', async () => {
+  test('step dots not rendered when step is 0 or negative', async () => {
     element.step = 0;
     await element.updateComplete;
     assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
-  });
-
-  test('step dots not rendered when step is negative', async () => {
     element.step = -5;
     await element.updateComplete;
     assert.notExists(element.shadowRoot!.querySelector('.step-dots'));
@@ -1302,6 +1436,7 @@ suite('zui-slider steps', () => {
   setup(() => {
     element = document.createElement('zui-slider') as ZuiSlider;
     form = buildForm({ enableSubmit: false, appendChildren: [element] });
+    element.steps = ['Small', 'Medium', 'Large'];
   });
 
   teardown(() => {
@@ -1309,20 +1444,17 @@ suite('zui-slider steps', () => {
   });
 
   test('initializes value to first step when current value is not a step label', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.value, 'Small');
   });
 
   test('value set to a valid step label is preserved', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     assert.equal(element.value, 'Medium');
   });
 
   test('native range input has index-based min, max, and step attributes', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     assert.equal(rangeInput.min, '0');
@@ -1331,7 +1463,6 @@ suite('zui-slider steps', () => {
   });
 
   test('native range input value reflects current step index', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Medium';
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
@@ -1339,7 +1470,6 @@ suite('zui-slider steps', () => {
   });
 
   test('dragging native range to index sets value to corresponding step label', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const rangeInput = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     rangeInput.value = '2';
@@ -1348,7 +1478,6 @@ suite('zui-slider steps', () => {
   });
 
   test('progress is computed by step index, not by numeric value', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Small';
     await element.updateComplete;
     assert.equal(element.progress, 0);
@@ -1359,14 +1488,12 @@ suite('zui-slider steps', () => {
   });
 
   test('floating input is type="text" in steps mode', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     assert.equal(floatInput.type, 'text');
   });
 
   test('floating input change to valid step label updates value immediately', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     floatInput.value = 'Large';
@@ -1375,7 +1502,6 @@ suite('zui-slider steps', () => {
   });
 
   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;
@@ -1389,7 +1515,6 @@ suite('zui-slider steps', () => {
   });
 
   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')!;
@@ -1402,7 +1527,7 @@ suite('zui-slider steps', () => {
   test('floating input resolves typed numeric alias to nearest step on commit', async () => {
     element.steps = [0, 25, 50, 75, 100];
     await element.updateComplete;
-    assert.equal(element.value, '50'); // '50' is a valid label — not snapped on init
+    assert.equal(element.value, '50'); // '50' is a valid label; not snapped on init
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
     floatInput.value = '30';
     floatInput.dispatchEvent(new Event('change'));
@@ -1423,13 +1548,11 @@ suite('zui-slider steps', () => {
   });
 
   test('step dots count equals steps.length', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.shadowRoot!.querySelectorAll('.step-dot').length, 3);
   });
 
   test('min-max labels show first and last step labels', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelectorAll('.min-max-label');
     assert.equal(labels[0].textContent!.trim(), 'Small');
@@ -1449,7 +1572,6 @@ suite('zui-slider steps', () => {
   test('value is included in form submission as the step label', async () => {
     const name = randString();
     element.setAttribute('name', name);
-    element.steps = ['Small', 'Medium', 'Large'];
     element.value = 'Large';
     await element.updateComplete;
     assert.equal(new FormData(form).get(name), 'Large');
@@ -1468,7 +1590,6 @@ suite('zui-slider steps', () => {
   });
 
   test('showStepLabels renders a label element for each step', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     element.showStepLabels = true;
     await element.updateComplete;
     const labels = element.shadowRoot!.querySelectorAll('.step-dot-label');
@@ -1489,13 +1610,11 @@ suite('zui-slider steps', () => {
   });
 
   test('showStepLabels false renders no label elements', async () => {
-    element.steps = ['Small', 'Medium', 'Large'];
     await element.updateComplete;
     assert.equal(element.shadowRoot!.querySelectorAll('.step-dot-label').length, 0);
   });
 
   test('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';
@@ -1504,7 +1623,6 @@ suite('zui-slider steps', () => {
   });
 
   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')!;
@@ -1654,6 +1772,30 @@ suite('zui-slider steps range', () => {
     assert.equal(element.valueStart, 'B');
     assert.equal(element.valueEnd, 'D');
   });
+
+  test('steps range end floating input nudges to next step when typed value matches start step', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    element.valueStart = 'C'; // idx=2
+    element.valueEnd = 'E'; // idx=4
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    floatInputs[1].value = 'C'; // typed = start ('C', idx=2); resolvedIdx(2) <= startIdx(2) → nudge to idx=3 ('D')
+    floatInputs[1].dispatchEvent(new Event('change'));
+    assert.equal(element.valueEnd, 'D');
+    assert.equal(element.valueStart, 'C');
+  });
+
+  test('steps range start floating input nudges to previous step when typed value matches end step', async () => {
+    element.steps = ['A', 'B', 'C', 'D', 'E'];
+    element.valueStart = 'A'; // idx=0
+    element.valueEnd = 'C'; // idx=2
+    await element.updateComplete;
+    const floatInputs = element.shadowRoot!.querySelectorAll<HTMLInputElement>('.thumb-input input');
+    floatInputs[0].value = 'C'; // typed = end ('C', idx=2); resolvedIdx(2) >= endIdx(2) → nudge to idx=1 ('B')
+    floatInputs[0].dispatchEvent(new Event('change'));
+    assert.equal(element.valueStart, 'B');
+    assert.equal(element.valueEnd, 'C');
+  });
 });
 
 suite('zui-slider stepParser', () => {
@@ -1682,7 +1824,7 @@ suite('zui-slider stepParser', () => {
     };
     await element.updateComplete;
     const floatInput = element.shadowRoot!.querySelector<HTMLInputElement>('.thumb-input input')!;
-    floatInput.value = '2k'; // exact step label — resolved before stepParser is consulted
+    floatInput.value = '2k'; // exact step label; resolved before stepParser is consulted
     floatInput.dispatchEvent(new Event('change'));
     assert.equal(element.value, '2k');
     assert.equal(callCount, 0);