@spectrum-web-components/slider 0.13.1-devmode2.0 → 0.14.1

package/test/slider.test.js

@@ -1,3 +1,4 @@
+"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";
@@ -15,18 +16,25 @@ 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`
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-slider label="Slider"></sp-slider>
-                `));
+                `
+    )
+  );
   it("loads", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider label="Slider"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
   it('loads - [variant="tick"]', async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider
                     label="Ticked Slider"
                     min="-100"
@@ -35,21 +43,26 @@ describe("Slider", () => {
                     tick-labels
                     variant="tick"
                 ></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
   it('loads - [variant="tick"] irregularly', async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider label="Slider"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
   it("receives value from the outside", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider max="20"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     el.value = 10;
@@ -60,10 +73,12 @@ describe("Slider", () => {
     expect(el.value).to.equal(20);
   });
   it("accepts keyboard events", async () => {
-    const el = await fixture(tick({
-      variant: "tick",
-      tickStep: 5
-    }));
+    const el = await fixture(
+      tick({
+        variant: "tick",
+        tickStep: 5
+      })
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     expect(el.highlight).to.be.false;
@@ -83,9 +98,11 @@ describe("Slider", () => {
   });
   it("accepts pointer events", async () => {
     let pointerId = -1;
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.dragging).to.be.false;
     expect(el.highlight).to.be.false;
@@ -93,107 +110,129 @@ describe("Slider", () => {
     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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider style="width: 500px" max="70"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
-    const controls = el.shadowRoot.querySelector("#controls");
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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);
@@ -201,38 +240,48 @@ describe("Slider", () => {
   });
   it("can be disabled", async () => {
     let pointerId = -1;
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider disabled></sp-slider>
-            `);
+            `
+    );
     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
-    }));
+    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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     const handle = el.shadowRoot.querySelector(".handle");
@@ -250,19 +299,23 @@ describe("Slider", () => {
     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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider min="1" max="11" dir="rtl"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     const handle = el.shadowRoot.querySelector(".handle");
@@ -280,19 +333,23 @@ describe("Slider", () => {
     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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     const handle = el.shadowRoot.querySelector(".handle");
@@ -348,93 +405,113 @@ describe("Slider", () => {
   });
   it("accepts pointermove events in separate interactions", async () => {
     let pointerId = -1;
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider style="width: 100px"></sp-slider>
-            `);
+            `
+    );
     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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider step="0" max="20" style="width: 500px; float: left;">
                     Step = 0
                 </sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     await nextFrame();
     await nextFrame();
@@ -486,24 +563,30 @@ describe("Slider", () => {
     expect(el.value).to.equal(5);
   });
   it("will not pointermove unless `pointerdown`", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     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
-    }));
+    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`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     const input = el.shadowRoot.querySelector(".input");
@@ -512,9 +595,11 @@ describe("Slider", () => {
     expect(el.value).to.equal(0);
   });
   it("accepts variants", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider variant="tick"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.variant).to.equal("tick");
     expect(el.getAttribute("variant")).to.equal("tick");
@@ -532,9 +617,11 @@ describe("Slider", () => {
     expect(el.hasAttribute("variant")).to.be.false;
   });
   it("validates variants", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider variant="other"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.variant).to.equal("");
     expect(el.hasAttribute("variant")).to.be.false;
@@ -548,23 +635,27 @@ describe("Slider", () => {
     expect(el.getAttribute("variant")).to.equal("tick");
   });
   it("has a `focusElement`", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     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`
+    const el = await fixture(
+      html`
                 <sp-slider
                     value="50"
                     min="0"
                     max="100"
                     .getAriaHandleText=${(value) => `${value}%`}
                 ></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     const input = el.focusElement;
     expect(input.getAttribute("aria-valuetext")).to.equal("50%");
@@ -573,14 +664,16 @@ describe("Slider", () => {
     expect(input.getAttribute("aria-valuetext")).to.equal("100%");
   });
   it("displays Intl.formatNumber results", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider
                     value=".5"
                     min="0"
                     max="1"
                     .formatOptions=${{ style: "percent" }}
                 ></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     const input = el.focusElement;
     expect(input.getAttribute("aria-valuetext")).to.equal("50%");
@@ -598,7 +691,8 @@ describe("Slider", () => {
     const resolveLanguage = () => {
       langResolvers.forEach((resolver) => resolver(lang));
     };
-    let el = await fixture(html`
+    let el = await fixture(
+      html`
                 <sp-slider
                     value="2.44"
                     min="0"
@@ -607,17 +701,25 @@ describe("Slider", () => {
                     @sp-language-context=${createLangResolver}
                     .formatOptions=${{ maximumFractionDigits: 2 }}
                 ></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     let input = el.focusElement;
-    expect(input.getAttribute("aria-valuetext"), "First German number").to.equal("2,44");
+    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");
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "First English number"
+    ).to.equal("2.44");
     lang = "de";
     resolveLanguage();
-    el = await fixture(html`
+    el = await fixture(
+      html`
                 <sp-slider
                     min="0"
                     max="10"
@@ -631,19 +733,28 @@ describe("Slider", () => {
                         @sp-language-context=${createLangResolver}
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     input = el.focusElement;
-    expect(input.getAttribute("aria-valuetext"), "Second German number").to.equal("2,44");
+    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");
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "Second English number"
+    ).to.equal("2.44");
   });
   it("uses fallback ariaValueText", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider value="50" min="0" max="100"></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.getAriaValueText = false;
     const input = el.focusElement;
@@ -651,9 +762,11 @@ describe("Slider", () => {
     expect(input.getAttribute("aria-valuetext")).to.equal("50");
   });
   it("accepts min/max/value in the same timing", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider></sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(10);
     el.min = 0;
@@ -673,7 +786,8 @@ describe("Slider", () => {
     expect(el.value).to.equal(-100);
   });
   it("returns values for handles", async () => {
-    let el = await fixture(html`
+    let el = await fixture(
+      html`
                 <sp-slider>
                     <sp-slider-handle
                         slot="handle"
@@ -694,29 +808,35 @@ describe("Slider", () => {
                         max="100"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     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`
+    el = await fixture(
+      html`
                 <sp-slider value="10" min="0" max="100"></sp-slider>
-            `);
+            `
+    );
     expect(el.values).to.deep.equal({ value: 10 });
-    el = await fixture(html`
+    el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         slot="handle"
                         value="10"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     expect(el.values).to.deep.equal({ handle1: 10 });
   });
   it("clamps values for multi-handle slider", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -741,7 +861,8 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
     const firstHandle = el.querySelector("#first-handle");
@@ -765,7 +886,8 @@ describe("Slider", () => {
   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`
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -791,11 +913,15 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     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(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",
@@ -808,7 +934,8 @@ describe("Slider", () => {
   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`
+    const el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -834,7 +961,8 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(consoleWarnStub.called).to.be.true;
     const spyCall = consoleWarnStub.getCall(0);
@@ -857,9 +985,11 @@ describe("Slider", () => {
                 <sp-slider-handle slot="handle" name="max" label="Maximum" min="previous" value="86610"></sp-slider-handle>
             </sp-slider>
         `;
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <div></div>
-            `);
+            `
+    );
     el.appendChild(template.content.cloneNode(true));
     await waitUntil(() => {
       var _a2;
@@ -870,7 +1000,8 @@ describe("Slider", () => {
     expect(createdHandles).to.have.lengthOf(2);
   });
   it("enforces next/previous max/min", async () => {
-    let el = await fixture(html`
+    let el = await fixture(
+      html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -895,14 +1026,21 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     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');
+    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");
@@ -919,7 +1057,8 @@ describe("Slider", () => {
     expect(middleInput.max).to.equal("85");
     expect(lastInput.min).to.equal("20");
     expect(lastInput.max).to.equal("100");
-    el = await fixture(html`
+    el = await fixture(
+      html`
                 <sp-slider>
                     <sp-slider-handle
                         id="first-handle"
@@ -946,10 +1085,17 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
-    firstInput = el.shadowRoot.querySelector('.handle[name="a"] > input');
-    middleInput = el.shadowRoot.querySelector('.handle[name="b"] > input');
-    lastInput = el.shadowRoot.querySelector('.handle[name="c"] > input');
+            `
+    );
+    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");
@@ -968,7 +1114,8 @@ describe("Slider", () => {
     expect(lastInput.max).to.equal("95");
   });
   it("sends keyboard events to active handle", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-slider step="1" min="0" max="100">
                     <sp-slider-handle
                         id="first-handle"
@@ -993,7 +1140,8 @@ describe("Slider", () => {
                         value="30"
                     ></sp-slider-handle>
                 </sp-slider>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
     const lastHandle = el.querySelector("#last-handle");