@spectrum-web-components/slider 0.12.13 → 0.12.15-devmode.7

package/test/slider.test.js

@@ -1,30 +1,27 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import '../sp-slider.js';
-import '../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';
-describe('Slider', () => {
-    it('loads', async () => {
-        const el = await fixture(html `
+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";
+describe("Slider", () => {
+  it("loads", async () => {
+    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 `
+    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"
@@ -34,536 +31,528 @@ describe('Slider', () => {
                     variant="tick"
                 ></sp-slider>
             `);
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('loads - [variant="tick"] irregularly', async () => {
-        const el = await fixture(html `
+    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 elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('receives value from the outside', async () => {
-        const el = await fixture(html `
+    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 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);
+    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"
     });
-    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;
+    await elementUpdated(el);
+    expect(el.value).to.equal(9);
+    expect(el.highlight).to.be.true;
+    await sendKeys({
+      press: "ArrowUp"
     });
-    it('accepts pointer events', async () => {
-        let pointerId = -1;
-        const el = await fixture(html `
+    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 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 `
+    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 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,
-            // account for 8px <body> margin by default
-            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,
-            // account for 8px <body> margin by default
-            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,
-            // account for 8px <body> margin by default
-            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,
-            // account for 8px <body> margin by default
-            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 `
+    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 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 `
+    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 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);
+    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"
+        }
+      ]
     });
-    it('manages RTL when min != 0', async () => {
-        const el = await fixture(html `
+    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 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);
+    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"
+        }
+      ]
     });
-    it('goes [disabled] while dragging', async () => {
-        const el = await fixture(html `
+    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 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);
+    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"
+        }
+      ]
     });
-    it('accepts pointermove events in separate interactions', async () => {
-        let pointerId = -1;
-        const el = await fixture(html `
+    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 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 `
+    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 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);
+    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]]
+        }
+      ]
     });
-    it('will not pointermove unless `pointerdown`', async () => {
-        const el = await fixture(html `
+    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 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 `
+    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 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 `
+    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 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 `
+    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 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 `
+    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 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 `
+    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"
@@ -571,40 +560,40 @@ describe('Slider', () => {
                     .getAriaHandleText=${(value) => `${value}%`}
                 ></sp-slider>
             `);
-        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 `
+    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 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 `
+    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"
@@ -614,16 +603,16 @@ describe('Slider', () => {
                     .formatOptions=${{ maximumFractionDigits: 2 }}
                 ></sp-slider>
             `);
-        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 `
+    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"
@@ -638,48 +627,48 @@ describe('Slider', () => {
                     ></sp-slider-handle>
                 </sp-slider>
             `);
-        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 `
+    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 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 `
+    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 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 `
+    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"
@@ -701,17 +690,17 @@ describe('Slider', () => {
                     ></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 `
+    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>
             `);
-        expect(el.values).to.deep.equal({ value: 10 });
-        el = await fixture(html `
+    expect(el.values).to.deep.equal({ value: 10 });
+    el = await fixture(html`
                 <sp-slider min="0" max="100">
                     <sp-slider-handle
                         slot="handle"
@@ -719,10 +708,10 @@ describe('Slider', () => {
                     ></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 `
+    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"
@@ -748,51 +737,49 @@ describe('Slider', () => {
                     ></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');
-        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('builds both handles from a <template>', async () => {
-        var _a;
-        const template = document.createElement('template');
-        template.innerHTML = `
+    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("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 el = await fixture(html `
+    const el = await fixture(html`
                 <div></div>
             `);
-        el.appendChild(template.content.cloneNode(true));
-        await waitUntil(() => {
-            var _a;
-            return ((_a = el.querySelector('sp-slider')) === null || _a === void 0 ? void 0 : _a.shadowRoot) != null;
-        });
-        // Sliders take several frames to fully upgrade
-        await nextFrame();
-        const createdHandles = ((_a = el
-            .querySelector('sp-slider')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelectorAll('.handle')) || [];
-        expect(createdHandles).to.have.lengthOf(2);
+    el.appendChild(template.content.cloneNode(true));
+    await waitUntil(() => {
+      var _a2;
+      return ((_a2 = el.querySelector("sp-slider")) == null ? void 0 : _a2.shadowRoot) != null;
     });
-    it('enforces next/previous max/min', async () => {
-        let el = await fixture(html `
+    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"
@@ -818,30 +805,30 @@ describe('Slider', () => {
                     ></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');
-        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 `
+    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"
@@ -869,29 +856,28 @@ describe('Slider', () => {
                     ></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');
-        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 () => {
-        // let pointerId = -1;
-        const el = await fixture(html `
+    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"
@@ -917,15 +903,15 @@ describe('Slider', () => {
                     ></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');
-        lastHandle.focus();
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await elementUpdated(el);
-        expect(el.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
+//# sourceMappingURL=slider.test.js.map