@spectrum-web-components/slider 0.14.0 → 0.14.2

package/test/slider.test.js

@@ -1,8 +1,40 @@
-import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-components/slider/sp-slider-handle.js";import{tick as w}from"../stories/slider.stories.js";import{elementUpdated as l,expect as a,fixture as s,html as o,nextFrame as p,oneEvent as m,waitUntil as g}from"@open-wc/testing";import{sendKeys as h}from"@web/test-runner-commands";import{sendMouse as u}from"../../../test/plugins/browser.js";import{stub as v}from"sinon";import{testForLitDevWarnings as b}from"../../../test/testing-helpers.js";describe("Slider",()=>{b(async()=>await s(o`
+"use strict";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/slider/sp-slider-handle.js";
+import { tick } from "../stories/slider.stories.js";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { stub } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+describe("Slider", () => {
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-slider label="Slider"></sp-slider>
-                `)),it("loads",async()=>{const e=await s(o`
+                `
+    )
+  );
+  it("loads", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider label="Slider"></sp-slider>
-            `);await l(e),await a(e).to.be.accessible()}),it('loads - [variant="tick"]',async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it('loads - [variant="tick"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-slider
                     label="Ticked Slider"
                     min="-100"
@@ -11,80 +43,751 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                     tick-labels
                     variant="tick"
                 ></sp-slider>
-            `);await l(e),await a(e).to.be.accessible()}),it('loads - [variant="tick"] irregularly',async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it('loads - [variant="tick"] irregularly', async () => {
+    const el = await fixture(
+      html`
                 <sp-slider label="Slider"></sp-slider>
-            `);await l(e),await a(e).to.be.accessible()}),it("receives value from the outside",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("receives value from the outside", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider max="20"></sp-slider>
-            `);await l(e),a(e.value).to.equal(10),e.value=10,await l(e),a(e.value).to.equal(10),e.value=50,await l(e),a(e.value).to.equal(20)}),it("accepts keyboard events",async()=>{const e=await s(w({variant:"tick",tickStep:5}));await l(e),a(e.value).to.equal(10),a(e.highlight).to.be.false,e.focus(),await h({press:"ArrowDown"}),await l(e),a(e.value).to.equal(9),a(e.highlight).to.be.true,await h({press:"ArrowUp"}),await l(e),a(e.value).to.equal(10),a(e.highlight).to.be.true}),it("accepts pointer events",async()=>{let e=-1;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    el.value = 10;
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    el.value = 50;
+    await elementUpdated(el);
+    expect(el.value).to.equal(20);
+  });
+  it("accepts keyboard events", async () => {
+    const el = await fixture(
+      tick({
+        variant: "tick",
+        tickStep: 5
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    expect(el.highlight).to.be.false;
+    el.focus();
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal(9);
+    expect(el.highlight).to.be.true;
+    await sendKeys({
+      press: "ArrowUp"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    expect(el.highlight).to.be.true;
+  });
+  it("accepts pointer events", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(t),a(t.dragging).to.be.false,a(t.highlight).to.be.false,a(e).to.equal(-1);const i=t.shadowRoot.querySelector(".handle");t.track.setPointerCapture=n=>e=n,t.track.releasePointerCapture=n=>e=n,i.dispatchEvent(new PointerEvent("pointerdown",{button:1,pointerId:1,cancelable:!0,bubbles:!0,composed:!0})),await l(t),a(t.dragging).to.be.false,a(e,"1").to.equal(-1),i.dispatchEvent(new PointerEvent("pointerdown",{button:0,pointerId:1,cancelable:!0,bubbles:!0,composed:!0})),await l(t),a(t.dragging,"it is dragging 1").to.be.true,a(e,"2").to.equal(1),i.dispatchEvent(new PointerEvent("pointerup",{pointerId:2,cancelable:!0,bubbles:!0,composed:!0})),await l(t),a(t.dragging).to.be.false,a(t.highlight).to.be.false,a(e,"3").to.equal(2),i.dispatchEvent(new PointerEvent("pointerdown",{button:0,pointerId:1,cancelable:!0,bubbles:!0,composed:!0})),await l(t),a(t.dragging,"it is dragging 2").to.be.true,a(e,"4").to.equal(1),i.dispatchEvent(new PointerEvent("pointercancel",{pointerId:3,cancelable:!0,bubbles:!0,composed:!0})),await l(t),a(t.dragging).to.be.false,a(e,"5").to.equal(3)}),it("will `trackPointerDown` on `#controls`",async()=>{let e=-1;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(el.highlight).to.be.false;
+    expect(pointerId).to.equal(-1);
+    const handle = el.shadowRoot.querySelector(".handle");
+    el.track.setPointerCapture = (id) => pointerId = id;
+    el.track.releasePointerCapture = (id) => pointerId = id;
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId, "1").to.equal(-1);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging, "it is dragging 1").to.be.true;
+    expect(pointerId, "2").to.equal(1);
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        pointerId: 2,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(el.highlight).to.be.false;
+    expect(pointerId, "3").to.equal(2);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging, "it is dragging 2").to.be.true;
+    expect(pointerId, "4").to.equal(1);
+    handle.dispatchEvent(
+      new PointerEvent("pointercancel", {
+        pointerId: 3,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId, "5").to.equal(3);
+  });
+  it("will `trackPointerDown` on `#controls`", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-slider style="width: 500px" max="70"></sp-slider>
-            `);await l(t),a(t.value).to.equal(10);const i=t.shadowRoot.querySelector("#controls"),n=t.shadowRoot.querySelector(".handle");t.track.setPointerCapture=r=>e=r,t.track.releasePointerCapture=r=>e=r,i.dispatchEvent(new PointerEvent("pointerdown",{button:1,clientX:9,pointerId:4,bubbles:!0,cancelable:!0})),await l(t),a(e).to.equal(-1),a(t.value).to.equal(10),a(t.dragging,"handle is not yet being dragged").to.be.false,i.dispatchEvent(new PointerEvent("pointerdown",{button:0,clientX:9,pointerId:4,bubbles:!0,cancelable:!0})),await l(t),a(e).to.equal(4),a(t.value).to.equal(0),a(t.dragging,"handle is being dragged").to.be.true,n.dispatchEvent(new PointerEvent("pointermove",{button:0,clientX:508,pointerId:4,bubbles:!0,cancelable:!0})),await l(t),a(t.dragging,"handle is still being dragged").to.be.true,a(e).to.equal(4),a(t.value).to.equal(70),n.dispatchEvent(new PointerEvent("pointerup",{button:0,clientX:9,pointerId:4,bubbles:!0,cancelable:!0})),await l(t),a(e).to.equal(4),a(t.value).to.equal(70),a(t.dragging,"handle is no longer being dragged").to.be.false}),it("can be disabled",async()=>{let e=-1;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    const controls = el.shadowRoot.querySelector(
+      "#controls"
+    );
+    const handle = el.shadowRoot.querySelector(".handle");
+    el.track.setPointerCapture = (id) => pointerId = id;
+    el.track.releasePointerCapture = (id) => pointerId = id;
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(10);
+    expect(el.dragging, "handle is not yet being dragged").to.be.false;
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(0);
+    expect(el.dragging, "handle is being dragged").to.be.true;
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        button: 0,
+        clientX: 508,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging, "handle is still being dragged").to.be.true;
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(70);
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        button: 0,
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(70);
+    expect(el.dragging, "handle is no longer being dragged").to.be.false;
+  });
+  it("can be disabled", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-slider disabled></sp-slider>
-            `);await l(t),a(t.dragging).to.be.false,a(e).to.equal(-1),a(t.value).to.equal(10);const i=t.shadowRoot.querySelector(".handle");i.setPointerCapture=r=>e=r,i.dispatchEvent(new PointerEvent("pointerdown",{button:0,pointerId:1,cancelable:!0})),await l(t),a(t.dragging).to.be.false,a(e).to.equal(-1),t.shadowRoot.querySelector("#controls").dispatchEvent(new PointerEvent("pointerdown",{button:0,clientX:50,pointerId:1,cancelable:!0})),await l(t),a(e).to.equal(-1),a(t.value).to.equal(10)}),it("accepts pointermove events",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    handle.setPointerCapture = (id) => pointerId = id;
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId).to.equal(-1);
+    const controls = el.shadowRoot.querySelector(
+      "#controls"
+    );
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        clientX: 50,
+        pointerId: 1,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(10);
+  });
+  it("accepts pointermove events", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e),a(e.value).to.equal(10);const t=e.shadowRoot.querySelector(".handle");await u({steps:[{type:"move",position:[9,30]},{type:"down"}]}),await l(e),a(e.dragging,"is dragging").to.be.true,a(e.highlight,"not highlighted").to.be.false,t.dispatchEvent(new PointerEvent("pointermove",{clientX:0,cancelable:!0,bubbles:!0,composed:!0})),await l(e),a(e.value).to.equal(0)}),it("manages RTL when min != 0",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [9, 30]
+        },
+        {
+          type: "down"
+        }
+      ]
+    });
+    await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(0);
+  });
+  it("manages RTL when min != 0", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider min="1" max="11" dir="rtl"></sp-slider>
-            `);await l(e),a(e.value).to.equal(10);const t=e.shadowRoot.querySelector(".handle");await u({steps:[{type:"move",position:[9,30]},{type:"down"}]}),await l(e),a(e.dragging,"is dragging").to.be.true,a(e.highlight,"not highlighted").to.be.false,t.dispatchEvent(new PointerEvent("pointermove",{clientX:0,cancelable:!0,bubbles:!0,composed:!0})),await l(e),a(e.value).to.equal(11)}),it("goes [disabled] while dragging",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [9, 30]
+        },
+        {
+          type: "down"
+        }
+      ]
+    });
+    await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(11);
+  });
+  it("goes [disabled] while dragging", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e),a(e.value).to.equal(10);const i=e.shadowRoot.querySelector(".handle").getBoundingClientRect();await u({steps:[{type:"move",position:[i.x+i.width/2,i.y+i.height/2]},{type:"down"}]}),await l(e),a(e.dragging,"is dragging").to.be.true,a(e.highlight,"not highlighted").to.be.false,a(e.value).to.equal(10);const n=m(e,"input");await u({steps:[{type:"move",position:[i.x+i.width/2+100,i.y+i.height/2]}]}),await n,a(e.value).to.equal(13),e.disabled=!0,await l(e),a(e.dragging,"is dragging").to.be.false,a(e.highlight,"not highlighted").to.be.false,await u({steps:[{type:"move",position:[0,i.top+i.height/2]}]}),a(e.value).to.equal(13)}),it("accepts pointermove events in separate interactions",async()=>{let e=-1;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    const handleBoundingRect = handle.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            handleBoundingRect.x + handleBoundingRect.width / 2,
+            handleBoundingRect.y + handleBoundingRect.height / 2
+          ]
+        },
+        {
+          type: "down"
+        }
+      ]
+    });
+    await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+    expect(el.value).to.equal(10);
+    const inputEvent = oneEvent(el, "input");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            handleBoundingRect.x + handleBoundingRect.width / 2 + 100,
+            handleBoundingRect.y + handleBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    await inputEvent;
+    expect(el.value).to.equal(13);
+    el.disabled = true;
+    await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.false;
+    expect(el.highlight, "not highlighted").to.be.false;
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            0,
+            handleBoundingRect.top + handleBoundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    expect(el.value).to.equal(13);
+  });
+  it("accepts pointermove events in separate interactions", async () => {
+    let pointerId = -1;
+    const el = await fixture(
+      html`
                 <sp-slider style="width: 100px"></sp-slider>
-            `);await l(t),a(t.value,"initial").to.equal(10);const i=t.shadowRoot.querySelector(".handle");t.track.setPointerCapture=n=>e=n,t.track.releasePointerCapture=n=>e=n,i.dispatchEvent(new PointerEvent("pointerdown",{clientX:58,cancelable:!0,button:0,pointerId:100,composed:!0,bubbles:!0})),await l(t),i.dispatchEvent(new PointerEvent("pointermove",{clientX:58,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"first pointerdown").to.equal(50),a(t.dragging,"is dragging").to.be.true,a(t.classList.contains("handle-highlight"),"not highlighted").to.be.false,a(e).to.equal(100),i.dispatchEvent(new PointerEvent("pointermove",{clientX:0,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"first pointermove").to.equal(0),i.dispatchEvent(new PointerEvent("pointerup",{clientX:0,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"first pointerup").to.equal(0),a(t.dragging,"is dragging").to.be.false,i.dispatchEvent(new PointerEvent("pointerdown",{clientX:58,cancelable:!0,button:0,composed:!0,bubbles:!0})),await l(t),i.dispatchEvent(new PointerEvent("pointermove",{clientX:58,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"second pointerdown").to.equal(50),a(t.dragging,"is dragging").to.be.true,a(t.classList.contains("handle-highlight"),"not highlighted").to.be.false,i.dispatchEvent(new PointerEvent("pointermove",{clientX:0,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"second pointermove").to.equal(0),i.dispatchEvent(new PointerEvent("pointerup",{clientX:0,cancelable:!0,composed:!0,bubbles:!0})),await l(t),a(t.value,"second pointerup").to.equal(0),a(t.dragging,"is dragging").to.be.false}),it("accepts pointermove events - [step=0]",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value, "initial").to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    el.track.setPointerCapture = (id) => pointerId = id;
+    el.track.releasePointerCapture = (id) => pointerId = id;
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: 58,
+        cancelable: true,
+        button: 0,
+        pointerId: 100,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 58,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "first pointerdown").to.equal(50);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.classList.contains("handle-highlight"), "not highlighted").to.be.false;
+    expect(pointerId).to.equal(100);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "first pointermove").to.equal(0);
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "first pointerup").to.equal(0);
+    expect(el.dragging, "is dragging").to.be.false;
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: 58,
+        cancelable: true,
+        button: 0,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 58,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "second pointerdown").to.equal(50);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.classList.contains("handle-highlight"), "not highlighted").to.be.false;
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "second pointermove").to.equal(0);
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.value, "second pointerup").to.equal(0);
+    expect(el.dragging, "is dragging").to.be.false;
+  });
+  it("accepts pointermove events - [step=0]", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider step="0" max="20" style="width: 500px; float: left;">
                     Step = 0
                 </sp-slider>
-            `);await l(e),await p(),await p(),a(e.value).to.equal(10);const i=e.shadowRoot.querySelector(".handle").getBoundingClientRect(),n=[i.x+i.width/2,i.y+i.height/2];await u({steps:[{type:"move",position:n},{type:"down"}]}),await p(),a(e.highlight,"with no highlight").to.be.false,a(e.dragging,"dragging").to.be.true;let r=m(e,"input");await u({steps:[{type:"move",position:[200,i.y+i.height+100]}]}),await r,a(e.value).to.equal(8),r=m(e,"input"),await u({steps:[{type:"move",position:[125,n[1]]}]}),await r,a(e.value).to.equal(5)}),it("will not pointermove unless `pointerdown`",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle");
+    const handleBoundingRect = handle.getBoundingClientRect();
+    const position = [
+      handleBoundingRect.x + handleBoundingRect.width / 2,
+      handleBoundingRect.y + handleBoundingRect.height / 2
+    ];
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position
+        },
+        {
+          type: "down"
+        }
+      ]
+    });
+    await nextFrame();
+    expect(el.highlight, "with no highlight").to.be.false;
+    expect(el.dragging, "dragging").to.be.true;
+    let inputEvent = oneEvent(el, "input");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            200,
+            handleBoundingRect.y + handleBoundingRect.height + 100
+          ]
+        }
+      ]
+    });
+    await inputEvent;
+    expect(el.value).to.equal(8);
+    inputEvent = oneEvent(el, "input");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [125, position[1]]
+        }
+      ]
+    });
+    await inputEvent;
+    expect(el.value).to.equal(5);
+  });
+  it("will not pointermove unless `pointerdown`", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e),a(e.value).to.equal(10),a(e.dragging).to.be.false,e.shadowRoot.querySelector(".handle").dispatchEvent(new PointerEvent("pointermove",{clientX:0,cancelable:!0})),await p(),a(e.value).to.equal(10)}),it("responds to input events on the <input/> element",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    expect(el.dragging).to.be.false;
+    const handle = el.shadowRoot.querySelector(".handle");
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true
+      })
+    );
+    await nextFrame();
+    expect(el.value).to.equal(10);
+  });
+  it("responds to input events on the <input/> element", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e),a(e.value).to.equal(10);const t=e.shadowRoot.querySelector(".input");t.value="0",t.dispatchEvent(new Event("change")),a(e.value).to.equal(0)}),it("accepts variants",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    const input = el.shadowRoot.querySelector(".input");
+    input.value = "0";
+    input.dispatchEvent(new Event("change"));
+    expect(el.value).to.equal(0);
+  });
+  it("accepts variants", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider variant="tick"></sp-slider>
-            `);await l(e),a(e.variant).to.equal("tick"),a(e.getAttribute("variant")).to.equal("tick"),e.variant="ramp",await l(e),a(e.variant).to.equal("ramp"),a(e.getAttribute("variant")).to.equal("ramp"),e.setAttribute("variant","filled"),await l(e),a(e.variant).to.equal("filled"),a(e.getAttribute("variant")).to.equal("filled"),e.removeAttribute("variant"),await l(e),a(e.variant).to.equal(""),a(e.hasAttribute("variant")).to.be.false}),it("validates variants",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+    el.variant = "ramp";
+    await elementUpdated(el);
+    expect(el.variant).to.equal("ramp");
+    expect(el.getAttribute("variant")).to.equal("ramp");
+    el.setAttribute("variant", "filled");
+    await elementUpdated(el);
+    expect(el.variant).to.equal("filled");
+    expect(el.getAttribute("variant")).to.equal("filled");
+    el.removeAttribute("variant");
+    await elementUpdated(el);
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
+  });
+  it("validates variants", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider variant="other"></sp-slider>
-            `);await l(e),a(e.variant).to.equal(""),a(e.hasAttribute("variant")).to.be.false,e.variant="tick",await l(e),a(e.variant).to.equal("tick"),a(e.getAttribute("variant")).to.equal("tick"),e.variant="tick",await l(e),a(e.variant).to.equal("tick"),a(e.getAttribute("variant")).to.equal("tick")}),it("has a `focusElement`",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
+    el.variant = "tick";
+    await elementUpdated(el);
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+    el.variant = "tick";
+    await elementUpdated(el);
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+  });
+  it("has a `focusElement`", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e);const t=e.focusElement;a(t).to.not.be.undefined,a(t.type).to.equal("range")}),it("displays result of getAriaValueText",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    const input = el.focusElement;
+    expect(input).to.not.be.undefined;
+    expect(input.type).to.equal("range");
+  });
+  it("displays result of getAriaValueText", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider
                     value="50"
                     min="0"
                     max="100"
-                    .getAriaHandleText=${i=>`${i}%`}
+                    .getAriaHandleText=${(value) => `${value}%`}
                 ></sp-slider>
-            `);await l(e);const t=e.focusElement;a(t.getAttribute("aria-valuetext")).to.equal("50%"),e.value=100,await l(e),a(t.getAttribute("aria-valuetext")).to.equal("100%")}),it("displays Intl.formatNumber results",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    const input = el.focusElement;
+    expect(input.getAttribute("aria-valuetext")).to.equal("50%");
+    el.value = 100;
+    await elementUpdated(el);
+    expect(input.getAttribute("aria-valuetext")).to.equal("100%");
+  });
+  it("displays Intl.formatNumber results", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider
                     value=".5"
                     min="0"
                     max="1"
-                    .formatOptions=${{style:"percent"}}
+                    .formatOptions=${{ style: "percent" }}
                 ></sp-slider>
-            `);await l(e);const t=e.focusElement;a(t.getAttribute("aria-valuetext")).to.equal("50%"),e.value=100,await l(e),a(t.getAttribute("aria-valuetext")).to.equal("100%")}),it("obeys language property",async()=>{let e="de";const t=[],i=c=>{t.push(c.detail.callback),n()},n=()=>{t.forEach(c=>c(e))};let r=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    const input = el.focusElement;
+    expect(input.getAttribute("aria-valuetext")).to.equal("50%");
+    el.value = 100;
+    await elementUpdated(el);
+    expect(input.getAttribute("aria-valuetext")).to.equal("100%");
+  });
+  it("obeys language property", async () => {
+    let lang = "de";
+    const langResolvers = [];
+    const createLangResolver = (event) => {
+      langResolvers.push(event.detail.callback);
+      resolveLanguage();
+    };
+    const resolveLanguage = () => {
+      langResolvers.forEach((resolver) => resolver(lang));
+    };
+    let el = await fixture(
+      html`
                 <sp-slider
                     value="2.44"
                     min="0"
                     max="10"
                     step="0.01"
-                    @sp-language-context=${i}
-                    .formatOptions=${{maximumFractionDigits:2}}
+                    @sp-language-context=${createLangResolver}
+                    .formatOptions=${{ maximumFractionDigits: 2 }}
                 ></sp-slider>
-            `);await l(r);let d=r.focusElement;a(d.getAttribute("aria-valuetext"),"First German number").to.equal("2,44"),e="en",n(),await l(r),a(d.getAttribute("aria-valuetext"),"First English number").to.equal("2.44"),e="de",n(),r=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    let input = el.focusElement;
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "First German number"
+    ).to.equal("2,44");
+    lang = "en";
+    resolveLanguage();
+    await elementUpdated(el);
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "First English number"
+    ).to.equal("2.44");
+    lang = "de";
+    resolveLanguage();
+    el = await fixture(
+      html`
                 <sp-slider
                     min="0"
                     max="10"
-                    @sp-language-context=${i}
+                    @sp-language-context=${createLangResolver}
                 >
                     <sp-slider-handle
                         slot="handle"
                         step="0.01"
                         value="2.44"
-                        .formatOptions=${{maximumFractionDigits:2}}
-                        @sp-language-context=${i}
+                        .formatOptions=${{ maximumFractionDigits: 2 }}
+                        @sp-language-context=${createLangResolver}
                     ></sp-slider-handle>
                 </sp-slider>
-            `),await l(r),d=r.focusElement,a(d.getAttribute("aria-valuetext"),"Second German number").to.equal("2,44"),e="en",n(),await l(r),a(d.getAttribute("aria-valuetext"),"Second English number").to.equal("2.44")}),it("uses fallback ariaValueText",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    input = el.focusElement;
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "Second German number"
+    ).to.equal("2,44");
+    lang = "en";
+    resolveLanguage();
+    await elementUpdated(el);
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "Second English number"
+    ).to.equal("2.44");
+  });
+  it("uses fallback ariaValueText", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider value="50" min="0" max="100"></sp-slider>
-            `);await l(e),e.getAriaValueText=!1;const t=e.focusElement;await l(e),a(t.getAttribute("aria-valuetext")).to.equal("50")}),it("accepts min/max/value in the same timing",async()=>{const e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    el.getAriaValueText = false;
+    const input = el.focusElement;
+    await elementUpdated(el);
+    expect(input.getAttribute("aria-valuetext")).to.equal("50");
+  });
+  it("accepts min/max/value in the same timing", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);await l(e),a(e.value).to.equal(10),e.min=0,e.max=200,e.value=200,await l(e),a(e.value).to.equal(200),e.value=500,e.min=0,e.max=500,await l(e),a(e.value).to.equal(500),e.value=-100,e.min=-100,e.max=500,await l(e),a(e.value).to.equal(-100)}),it("returns values for handles",async()=>{let e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(10);
+    el.min = 0;
+    el.max = 200;
+    el.value = 200;
+    await elementUpdated(el);
+    expect(el.value).to.equal(200);
+    el.value = 500;
+    el.min = 0;
+    el.max = 500;
+    await elementUpdated(el);
+    expect(el.value).to.equal(500);
+    el.value = -100;
+    el.min = -100;
+    el.max = 500;
+    await elementUpdated(el);
+    expect(el.value).to.equal(-100);
+  });
+  it("returns values for handles", async () => {
+    let el = await fixture(
+      html`
                 <sp-slider>
                     <sp-slider-handle
                         slot="handle"
@@ -105,16 +808,35 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         max="100"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(e),a(e.values).to.deep.equal({a:10,b:20,c:30});const t=e.querySelector("#middle-handle");t.value=22,await l(e),a(e.values).to.deep.equal({a:10,b:22,c:30}),e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+    const middleHandle = el.querySelector("#middle-handle");
+    middleHandle.value = 22;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 22, c: 30 });
+    el = await fixture(
+      html`
                 <sp-slider value="10" min="0" max="100"></sp-slider>
-            `),a(e.values).to.deep.equal({value:10}),e=await s(o`
+            `
+    );
+    expect(el.values).to.deep.equal({ value: 10 });
+    el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         slot="handle"
                         value="10"
                     ></sp-slider-handle>
                 </sp-slider>
-            `),a(e.values).to.deep.equal({handle1:10})}),it("clamps values for multi-handle slider",async()=>{const e=await s(o`
+            `
+    );
+    expect(el.values).to.deep.equal({ handle1: 10 });
+  });
+  it("clamps values for multi-handle slider", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -139,7 +861,33 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(e),a(e.values).to.deep.equal({a:10,b:20,c:30});const t=e.querySelector("#first-handle"),i=e.querySelector("#middle-handle"),n=e.querySelector("#last-handle");t.value=25,await l(e),a(e.values).to.deep.equal({a:20,b:20,c:30}),t.value=10,await l(e),i.value=5,await l(e),a(e.values).to.deep.equal({a:10,b:10,c:30}),n.value=11,await l(e),a(e.values).to.deep.equal({a:10,b:10,c:11}),n.value=7,await l(e),a(e.values).to.deep.equal({a:10,b:10,c:10})}),it('warns in Dev Mode when `min="previous"` is leveraged on first handle',async()=>{const e=v(console,"warn");window.__swc.issuedWarnings=new Set;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+    const firstHandle = el.querySelector("#first-handle");
+    const middleHandle = el.querySelector("#middle-handle");
+    const lastHandle = el.querySelector("#last-handle");
+    firstHandle.value = 25;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 20, b: 20, c: 30 });
+    firstHandle.value = 10;
+    await elementUpdated(el);
+    middleHandle.value = 5;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 30 });
+    lastHandle.value = 11;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 11 });
+    lastHandle.value = 7;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 10 });
+  });
+  it('warns in Dev Mode when `min="previous"` is leveraged on first handle', async () => {
+    const consoleWarnStub = stub(console, "warn");
+    window.__swc.issuedWarnings = /* @__PURE__ */ new Set();
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -165,7 +913,29 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(t),a(e.called).to.be.true;const i=e.getCall(0);a(i.args.at(0).includes("previous"),'confirm "previous" in message').to.be.true,a(i.args.at(-1),"confirm `data` shape").to.deep.equal({data:{localName:"sp-slider",type:"api",level:"default"}}),e.restore()}),it('warns in Dev Mode when `max="next"` is leveraged on last handle',async()=>{const e=v(console,"warn");window.__swc.issuedWarnings=new Set;const t=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+    expect(
+      spyCall.args.at(0).includes("previous"),
+      'confirm "previous" in message'
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-slider",
+        type: "api",
+        level: "default"
+      }
+    });
+    consoleWarnStub.restore();
+  });
+  it('warns in Dev Mode when `max="next"` is leveraged on last handle', async () => {
+    const consoleWarnStub = stub(console, "warn");
+    window.__swc.issuedWarnings = /* @__PURE__ */ new Set();
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -191,14 +961,47 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(t),a(e.called).to.be.true;const i=e.getCall(0);a(i.args.at(0).includes("next"),'confirm "next" in message').to.be.true,a(i.args.at(-1),"confirm `data` shape").to.deep.equal({data:{localName:"sp-slider",type:"api",level:"default"}}),e.restore()}),it("builds both handles from a <template>",async()=>{var n;const e=document.createElement("template");e.innerHTML=`
+            `
+    );
+    await elementUpdated(el);
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+    expect(spyCall.args.at(0).includes("next"), 'confirm "next" in message').to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-slider",
+        type: "api",
+        level: "default"
+      }
+    });
+    consoleWarnStub.restore();
+  });
+  it("builds both handles from a <template>", async () => {
+    var _a;
+    const template = document.createElement("template");
+    template.innerHTML = `
             <sp-slider variant="range" step="1" id="price" name="price" label="Max Price" min="35425" max="86610">
                 <sp-slider-handle slot="handle" name="min" label="Minimum" max="next" value="35425"></sp-slider-handle>
                 <sp-slider-handle slot="handle" name="max" label="Maximum" min="previous" value="86610"></sp-slider-handle>
             </sp-slider>
-        `;const t=await s(o`
+        `;
+    const el = await fixture(
+      html`
                 <div></div>
-            `);t.appendChild(e.content.cloneNode(!0)),await g(()=>{var r;return((r=t.querySelector("sp-slider"))==null?void 0:r.shadowRoot)!=null}),await p();const i=((n=t.querySelector("sp-slider"))==null?void 0:n.shadowRoot.querySelectorAll(".handle"))||[];a(i).to.have.lengthOf(2)}),it("enforces next/previous max/min",async()=>{let e=await s(o`
+            `
+    );
+    el.appendChild(template.content.cloneNode(true));
+    await waitUntil(() => {
+      var _a2;
+      return ((_a2 = el.querySelector("sp-slider")) == null ? void 0 : _a2.shadowRoot) != null;
+    });
+    await nextFrame();
+    const createdHandles = ((_a = el.querySelector("sp-slider")) == null ? void 0 : _a.shadowRoot.querySelectorAll(".handle")) || [];
+    expect(createdHandles).to.have.lengthOf(2);
+  });
+  it("enforces next/previous max/min", async () => {
+    let el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -223,7 +1026,39 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(e),a(e.values).to.deep.equal({a:10,b:20,c:30});let t=e.querySelector("#first-handle"),i=e.querySelector("#last-handle"),n=e.shadowRoot.querySelector('.handle[name="a"] > input'),r=e.shadowRoot.querySelector('.handle[name="b"] > input'),d=e.shadowRoot.querySelector('.handle[name="c"] > input');a(n.min).to.equal("0"),a(n.max).to.equal("20"),a(r.min).to.equal("10"),a(r.max).to.equal("30"),a(d.min).to.equal("20"),a(d.max).to.equal("100"),t.value=15,i.value=85,await l(e),await l(e),a(n.min).to.equal("0"),a(n.max).to.equal("20"),a(r.min).to.equal("15"),a(r.max).to.equal("85"),a(d.min).to.equal("20"),a(d.max).to.equal("100"),e=await s(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+    let firstHandle = el.querySelector("#first-handle");
+    let lastHandle = el.querySelector("#last-handle");
+    let firstInput = el.shadowRoot.querySelector(
+      '.handle[name="a"] > input'
+    );
+    let middleInput = el.shadowRoot.querySelector(
+      '.handle[name="b"] > input'
+    );
+    let lastInput = el.shadowRoot.querySelector(
+      '.handle[name="c"] > input'
+    );
+    expect(firstInput.min).to.equal("0");
+    expect(firstInput.max).to.equal("20");
+    expect(middleInput.min).to.equal("10");
+    expect(middleInput.max).to.equal("30");
+    expect(lastInput.min).to.equal("20");
+    expect(lastInput.max).to.equal("100");
+    firstHandle.value = 15;
+    lastHandle.value = 85;
+    await elementUpdated(el);
+    await elementUpdated(el);
+    expect(firstInput.min).to.equal("0");
+    expect(firstInput.max).to.equal("20");
+    expect(middleInput.min).to.equal("15");
+    expect(middleInput.max).to.equal("85");
+    expect(lastInput.min).to.equal("20");
+    expect(lastInput.max).to.equal("100");
+    el = await fixture(
+      html`
                 <sp-slider>
                     <sp-slider-handle
                         id="first-handle"
@@ -250,7 +1085,37 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `),n=e.shadowRoot.querySelector('.handle[name="a"] > input'),r=e.shadowRoot.querySelector('.handle[name="b"] > input'),d=e.shadowRoot.querySelector('.handle[name="c"] > input'),a(n.min).to.equal("0"),a(n.max).to.equal("20"),a(r.min).to.equal("10"),a(r.max).to.equal("30"),a(d.min).to.equal("20"),a(d.max).to.equal("100"),t=e.querySelector("#first-handle"),i=e.querySelector("#last-handle"),t.min=5,i.max=95,await l(e),await l(e),a(n.min).to.equal("5"),a(n.max).to.equal("20"),a(d.min).to.equal("20"),a(d.max).to.equal("95")}),it("sends keyboard events to active handle",async()=>{const e=await s(o`
+            `
+    );
+    firstInput = el.shadowRoot.querySelector(
+      '.handle[name="a"] > input'
+    );
+    middleInput = el.shadowRoot.querySelector(
+      '.handle[name="b"] > input'
+    );
+    lastInput = el.shadowRoot.querySelector(
+      '.handle[name="c"] > input'
+    );
+    expect(firstInput.min).to.equal("0");
+    expect(firstInput.max).to.equal("20");
+    expect(middleInput.min).to.equal("10");
+    expect(middleInput.max).to.equal("30");
+    expect(lastInput.min).to.equal("20");
+    expect(lastInput.max).to.equal("100");
+    firstHandle = el.querySelector("#first-handle");
+    lastHandle = el.querySelector("#last-handle");
+    firstHandle.min = 5;
+    lastHandle.max = 95;
+    await elementUpdated(el);
+    await elementUpdated(el);
+    expect(firstInput.min).to.equal("5");
+    expect(firstInput.max).to.equal("20");
+    expect(lastInput.min).to.equal("20");
+    expect(lastInput.max).to.equal("95");
+  });
+  it("sends keyboard events to active handle", async () => {
+    const el = await fixture(
+      html`
                 <sp-slider step="1" min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -275,5 +1140,17 @@ import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-compon
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);await l(e),a(e.values).to.deep.equal({a:10,b:20,c:30}),e.querySelector("#last-handle").focus(),await h({press:"ArrowDown"}),await l(e),a(e.values).to.deep.equal({a:10,b:20,c:29})})});
+            `
+    );
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+    const lastHandle = el.querySelector("#last-handle");
+    lastHandle.focus();
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 29 });
+  });
+});
 //# sourceMappingURL=slider.test.js.map