@spectrum-web-components/number-field 1.0.0 → 1.0.2

package/test/number-field.test.js

@@ -1,1739 +0,0 @@
-"use strict";
-import { html } from "@spectrum-web-components/base";
-import {
-  aTimeout,
-  elementUpdated,
-  expect,
-  nextFrame,
-  oneEvent
-} from "@open-wc/testing";
-import { shouldPolyfill } from "@formatjs/intl-numberformat/should-polyfill.js";
-import {
-  currency,
-  decimals,
-  Default,
-  germanDecimals,
-  indeterminate,
-  percents,
-  pixels,
-  units
-} from "../stories/number-field.stories.js";
-import "@spectrum-web-components/number-field/sp-number-field.js";
-import {
-  CHANGE_DEBOUNCE_MS,
-  FRAMES_PER_CHANGE,
-  indeterminatePlaceholder
-} from "@spectrum-web-components/number-field";
-import {
-  a11ySnapshot,
-  findAccessibilityNode,
-  sendKeys,
-  setUserAgent
-} from "@web/test-runner-commands";
-import { spy } from "sinon";
-import { clickBySelector, getElFrom } from "./helpers.js";
-import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-import {
-  fixture,
-  testForLitDevWarnings
-} from "../../../test/testing-helpers.js";
-import { isMac } from "@spectrum-web-components/shared/src/platform.js";
-describe("NumberField", () => {
-  before(async () => {
-    const shouldPolyfillEn = shouldPolyfill("en");
-    const shouldPolyfillFr = shouldPolyfill("fr");
-    if (shouldPolyfillEn || shouldPolyfillFr) {
-      await import("@formatjs/intl-numberformat/polyfill-force.js");
-    }
-    if (shouldPolyfillEn) {
-      await import("@formatjs/intl-numberformat/locale-data/en.js");
-    }
-    if (shouldPolyfillFr) {
-      await import("@formatjs/intl-numberformat/locale-data/fr.js");
-    }
-  });
-  testForLitDevWarnings(async () => await getElFrom(Default({})));
-  it("loads default number-field accessibly", async () => {
-    const el = await getElFrom(Default({}));
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  describe("receives input", () => {
-    it("without language context", async () => {
-      const el = await getElFrom(Default({ value: 1337 }));
-      el.size = "s";
-      expect(el.formattedValue).to.equal("1,337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-      expect(el.focusElement.value).to.equal("1,337");
-      el.focus();
-      await sendKeys({ type: "7331" });
-      await elementUpdated(el);
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("13,377,331");
-      expect(el.valueAsString).to.equal("13377331");
-      expect(el.value).to.equal(13377331);
-      expect(el.focusElement.value).to.equal("13,377,331");
-    });
-    it("with language context", async () => {
-      const [languageContext] = createLanguageContext("fr");
-      const el = await getElFrom(html`
-                <div @sp-language-context=${languageContext}>
-                    ${Default({ value: 1337 })}
-                </div>
-            `);
-      el.size = "l";
-      expect(el.formattedValue).to.equal("1\u202F337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-      expect(el.focusElement.value).to.equal("1\u202F337");
-      el.focus();
-      await sendKeys({ type: "7331" });
-      await elementUpdated(el);
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("13\u202F377\u202F331");
-      expect(el.valueAsString).to.equal("13377331");
-      expect(el.value).to.equal(13377331);
-      expect(el.focusElement.value).to.equal("13\u202F377\u202F331");
-    });
-  });
-  xit("correctly interprets decimal point on iPhone", async () => {
-    await setUserAgent(
-      "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
-    );
-    const el = await getElFrom(decimals({ value: 1234 }));
-    expect(el.formattedValue).to.equal("1,234");
-    el.focus();
-    await sendKeys({ press: "Backspace" });
-    el.blur();
-    expect(el.formattedValue).to.equal("123");
-    el.focus();
-    await sendKeys({ type: "45" });
-    el.blur();
-    expect(el.formattedValue).to.equal("12,345");
-    el.focus();
-    await sendKeys({ type: ",6" });
-    el.blur();
-    expect(el.formattedValue).to.equal("12,345.6");
-    el.focus();
-    await sendKeys({ type: ",7" });
-    el.blur();
-    expect(el.formattedValue).to.equal("123,456.7");
-    el.focus();
-    await sendKeys({ press: "Backspace" });
-    await sendKeys({ press: "Backspace" });
-    el.blur();
-    expect(el.formattedValue).to.equal("123,456");
-  });
-  describe("Step", () => {
-    it("can be 0", async () => {
-      const el = await getElFrom(
-        Default({
-          step: 0,
-          min: 0,
-          max: 10,
-          value: 5
-        })
-      );
-      el.size = "xl";
-      expect(el.value).to.equal(5);
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.focusElement.value).to.equal("5");
-    });
-    it("respects other locales", async () => {
-      const el = await getElFrom(
-        germanDecimals({
-          step: 0.01
-        })
-      );
-      el.value = 2.42;
-      await elementUpdated(el);
-      el.size = "xl";
-      expect(el.value).to.equal(2.42);
-      expect(el.formattedValue).to.equal("+2,42");
-      expect(el.focusElement.value).to.equal("+2,42");
-      await clickBySelector(el, ".step-up");
-      expect(el.value).to.equal(2.43);
-      expect(el.formattedValue).to.equal("+2,43");
-      expect(el.focusElement.value).to.equal("+2,43");
-    });
-    it("supports both positive and negative decimal values", async () => {
-      const el = await getElFrom(
-        Default({
-          step: 1e-3,
-          min: -10,
-          max: 10,
-          value: -2.4
-        })
-      );
-      el.size = "xl";
-      expect(el.value).to.equal(-2.4);
-      expect(el.valueAsString).to.equal("-2.4");
-      expect(el.focusElement.value).to.equal("-2.4");
-    });
-    it("correctly handles max values greater than 1000 with step=1", async () => {
-      const el = await getElFrom(
-        Default({
-          step: 1,
-          min: 0,
-          max: 2e5,
-          value: 999
-        })
-      );
-      await clickBySelector(el, ".step-up");
-      expect(el.value).to.equal(1e3);
-      expect(el.valueAsString).to.equal("1000");
-      expect(el.formattedValue).to.equal("1,000");
-      expect(el.focusElement.value).to.equal("1,000");
-      el.value = 15e3;
-      await elementUpdated(el);
-      expect(el.value).to.equal(15e3);
-      expect(el.valueAsString).to.equal("15000");
-      expect(el.formattedValue).to.equal("15,000");
-      expect(el.focusElement.value).to.equal("15,000");
-    });
-  });
-  describe("Increments", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({}));
-      expect(el.value).to.be.NaN;
-      expect(el.formattedValue).to.equal("");
-      expect(el.valueAsString).to.equal("NaN");
-      expect(el.focusElement.value).to.equal("");
-    });
-    it('via pointer, only "left" button', async () => {
-      await clickBySelector(el, ".step-up", { button: "middle" });
-      expect(el.formattedValue).to.equal("");
-      expect(el.valueAsString).to.equal("NaN");
-      expect(el.value).to.be.NaN;
-      expect(el.focusElement.value).to.equal("");
-    });
-    it("via pointer", async () => {
-      await clickBySelector(el, ".step-up");
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await clickBySelector(el, ".step-up");
-      expect(el.formattedValue).to.equal("1");
-      expect(el.valueAsString).to.equal("1");
-      expect(el.value).to.equal(1);
-      expect(el.focusElement.value).to.equal("1");
-    });
-    it("via arrow up", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("1");
-      expect(el.valueAsString).to.equal("1");
-      expect(el.value).to.equal(1);
-      expect(el.focusElement.value).to.equal("1");
-    });
-    it("via arrow up (shift modified)", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "Shift+ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-      expect(el.focusElement.value).to.equal("10");
-    });
-    it("via arrow up (custom shift modified value)", async () => {
-      el.focus();
-      el.stepModifier = 5;
-      el.step = 3;
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "Shift+ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("15");
-      expect(el.valueAsString).to.equal("15");
-      expect(el.value).to.equal(15);
-      expect(el.focusElement.value).to.equal("15");
-    });
-    it("via scroll", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("1");
-      expect(el.valueAsString).to.equal("1");
-      expect(el.value).to.equal(1);
-      expect(el.focusElement.value).to.equal("1");
-    });
-    it("via scroll (shift modified)", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.dispatchEvent(
-        new WheelEvent("wheel", {
-          deltaX: 1,
-          shiftKey: true
-        })
-      );
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      el.dispatchEvent(
-        new WheelEvent("wheel", {
-          deltaX: 100,
-          shiftKey: true
-        })
-      );
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-      expect(el.focusElement.value).to.equal("10");
-    });
-  });
-  describe("Decrements", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({}));
-      expect(el.value).to.be.NaN;
-      expect(el.formattedValue).to.equal("");
-      expect(el.valueAsString).to.equal("NaN");
-      expect(el.focusElement.value).to.equal("");
-    });
-    it('via pointer, only "left" button', async () => {
-      await clickBySelector(el, ".step-down", { button: "middle" });
-      expect(el.formattedValue).to.equal("");
-      expect(el.valueAsString).to.equal("NaN");
-      expect(el.value).to.be.NaN;
-      expect(el.focusElement.value).to.equal("");
-    });
-    it("via pointer", async () => {
-      await clickBySelector(el, ".step-down");
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await clickBySelector(el, ".step-down");
-      expect(el.formattedValue).to.equal("-1");
-      expect(el.valueAsString).to.equal("-1");
-      expect(el.value).to.equal(-1);
-      expect(el.focusElement.value).to.equal("-1");
-    });
-    it("via arrow down", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("-1");
-      expect(el.valueAsString).to.equal("-1");
-      expect(el.value).to.equal(-1);
-      expect(el.focusElement.value).to.equal("-1");
-    });
-    it("via arrow down (shift modified)", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "Shift+ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("-10");
-      expect(el.valueAsString).to.equal("-10");
-      expect(el.value).to.equal(-10);
-      expect(el.focusElement.value).to.equal("-10");
-    });
-    it("via arrow up (custom shift modified value)", async () => {
-      el.focus();
-      el.stepModifier = 5;
-      el.step = 3;
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      await sendKeys({ press: "Shift+ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("-15");
-      expect(el.valueAsString).to.equal("-15");
-      expect(el.value).to.equal(-15);
-      expect(el.focusElement.value).to.equal("-15");
-    });
-    it("via scroll", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -100 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("-1");
-      expect(el.valueAsString).to.equal("-1");
-      expect(el.value).to.equal(-1);
-      expect(el.focusElement.value).to.equal("-1");
-    });
-    it("via scroll (shift modified)", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.dispatchEvent(
-        new WheelEvent("wheel", {
-          deltaX: -1,
-          shiftKey: true
-        })
-      );
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      expect(el.focusElement.value).to.equal("0");
-      el.dispatchEvent(
-        new WheelEvent("wheel", {
-          deltaX: -100,
-          shiftKey: true
-        })
-      );
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("-10");
-      expect(el.valueAsString).to.equal("-10");
-      expect(el.value).to.equal(-10);
-      expect(el.focusElement.value).to.equal("-10");
-    });
-  });
-  describe("dispatched events", () => {
-    const inputSpy = spy();
-    const changeSpy = spy();
-    let el;
-    beforeEach(async () => {
-      inputSpy.resetHistory();
-      changeSpy.resetHistory();
-      el = await getElFrom(Default({ value: 50 }));
-      el.addEventListener("input", (event) => {
-        var _a;
-        inputSpy((_a = event.target) == null ? void 0 : _a.value);
-      });
-      el.addEventListener("change", (event) => {
-        var _a;
-        changeSpy((_a = event.target) == null ? void 0 : _a.value);
-      });
-    });
-    it("except when changing `value` from the outside", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.value = 51;
-      expect(changeSpy.callCount).to.equal(0);
-      await elementUpdated(el);
-      el.value = 52;
-      expect(changeSpy.callCount).to.equal(0);
-    });
-    it("handles IME input correctly and dispatches change event", async () => {
-      el.focus();
-      el.dispatchEvent(new CompositionEvent("compositionstart"));
-      await sendKeys({ type: "\uFF11\uFF12\uFF13" });
-      await elementUpdated(el);
-      el.dispatchEvent(new CompositionEvent("compositionend"));
-      await elementUpdated(el);
-      await sendKeys({ press: "Enter" });
-      expect(el.value).to.equal(50123);
-      expect(changeSpy.callCount).to.equal(1);
-    });
-    it("via scroll", async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("51");
-      expect(el.valueAsString).to.equal("51");
-      expect(el.value).to.equal(51);
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(0);
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("52");
-      expect(el.valueAsString).to.equal("52");
-      expect(el.value).to.equal(52);
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(0);
-      await aTimeout(CHANGE_DEBOUNCE_MS + 10);
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(1);
-    });
-    it("has a useful `value`", async () => {
-      el.focus();
-      await sendKeys({ type: "7" });
-      await sendKeys({ press: "Enter" });
-      expect(inputSpy.calledWith(507), "input").to.be.true;
-      expect(changeSpy.calledWith(507), "change").to.be.true;
-      await sendKeys({ type: ",00" });
-      await sendKeys({ press: "Enter" });
-      expect(inputSpy.calledWith(5070), "input").to.be.true;
-      expect(inputSpy.calledWith(50700), "input").to.be.true;
-      expect(changeSpy.calledWith(50700), "change").to.be.true;
-    });
-    it("has a useful `value` - percent", async () => {
-      el.formatOptions = { style: "percent" };
-      el.value = 0.45;
-      expect(el.value).to.equal(0.45);
-      el.focus();
-      await sendKeys({ type: "7" });
-      expect(inputSpy.calledWith(4.57), "first input").to.be.true;
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Enter" });
-      expect(el.value).to.equal(0.04);
-      expect(inputSpy.calledWith(0.45), "second input").to.be.true;
-      expect(inputSpy.calledWith(0.04), "third input").to.be.true;
-      expect(changeSpy.calledWith(0.04), "change").to.be.true;
-    });
-    it("has a useful `value` - currency", async () => {
-      el.formatOptions = {
-        style: "currency",
-        currency: "EUR",
-        currencyDisplay: "code",
-        currencySign: "accounting"
-      };
-      await elementUpdated(el);
-      el.value = 45;
-      expect(el.value).to.equal(45);
-      el.focus();
-      await sendKeys({ type: "7" });
-      expect(el.value).to.equal(45.007);
-      expect(inputSpy.calledWith(el.value), "first input").to.be.true;
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ type: "1" });
-      await sendKeys({ press: "Enter" });
-      expect(el.value).to.equal(145.007);
-      expect(inputSpy.calledWith(145.007), "second input").to.be.true;
-      expect(changeSpy.calledWith(145.007), "change").to.be.true;
-    });
-    it("one input/one change for each Arrow*", async () => {
-      el.focus();
-      await sendKeys({ press: "ArrowUp" });
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(1);
-      expect(el.value).to.equal(51);
-      await sendKeys({ press: "ArrowDown" });
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(2);
-      expect(el.value).to.equal(50);
-    });
-    it("one input/one change for each click", async () => {
-      await clickBySelector(el, ".step-up");
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(1);
-      expect(el.value).to.equal(51);
-      await clickBySelector(el, ".step-down");
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(2);
-      expect(el.value).to.equal(50);
-    });
-    it("click with modifier key", async () => {
-      let target = el.shadowRoot.querySelector(".step-up");
-      const stepUpRect = target.getBoundingClientRect();
-      const options = {
-        bubbles: true,
-        composed: true,
-        shiftKey: true,
-        clientX: stepUpRect.x + 1,
-        clientY: stepUpRect.y + 1
-      };
-      el.buttons.setPointerCapture = () => {
-        return;
-      };
-      el.buttons.releasePointerCapture = () => {
-        return;
-      };
-      let input = oneEvent(el, "input");
-      target.dispatchEvent(new PointerEvent("pointerdown", options));
-      await input;
-      target.dispatchEvent(new PointerEvent("pointerup", options));
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(1);
-      expect(el.value).to.equal(60);
-      target = el.shadowRoot.querySelector(".step-down");
-      const stepDownRect = target.getBoundingClientRect();
-      options.clientX = stepDownRect.x + 1;
-      options.clientY = stepDownRect.y + 1;
-      input = oneEvent(el, "input");
-      target.dispatchEvent(new PointerEvent("pointerdown", options));
-      await input;
-      target.dispatchEvent(new PointerEvent("pointerup", options));
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(2);
-      expect(el.value).to.equal(50);
-    });
-    it("many input, but one change", async () => {
-      const buttonUp = el.shadowRoot.querySelector(
-        ".step-up"
-      );
-      const buttonUpRect = buttonUp.getBoundingClientRect();
-      const buttonUpPosition = [
-        buttonUpRect.x + buttonUpRect.width / 2,
-        buttonUpRect.y + buttonUpRect.height / 2
-      ];
-      const buttonDown = el.shadowRoot.querySelector(
-        ".step-down"
-      );
-      const buttonDownRect = buttonDown.getBoundingClientRect();
-      const buttonDownPosition = [
-        buttonDownRect.x + buttonDownRect.width / 2,
-        buttonDownRect.y + buttonDownRect.height / 2
-      ];
-      sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonUpPosition
-          },
-          {
-            type: "down"
-          }
-        ]
-      });
-      await oneEvent(el, "input");
-      expect(el.value).to.equal(51);
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(0);
-      await oneEvent(el, "input");
-      expect(el.value).to.equal(52);
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(0);
-      await oneEvent(el, "input");
-      expect(el.value).to.equal(53);
-      expect(inputSpy.callCount).to.equal(3);
-      expect(changeSpy.callCount).to.equal(0);
-      sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonDownPosition
-          }
-        ]
-      });
-      let framesToWait = FRAMES_PER_CHANGE * 2;
-      while (framesToWait) {
-        framesToWait -= 1;
-        await nextFrame();
-      }
-      expect(inputSpy.callCount).to.equal(5);
-      expect(changeSpy.callCount).to.equal(0);
-      await sendMouse({
-        steps: [
-          {
-            type: "up"
-          }
-        ]
-      });
-      expect(inputSpy.callCount).to.equal(5);
-      expect(changeSpy.callCount).to.equal(1);
-    });
-    it("no change in committed value - using buttons", async () => {
-      const buttonUp = el.shadowRoot.querySelector(
-        ".step-up"
-      );
-      const buttonUpRect = buttonUp.getBoundingClientRect();
-      const buttonUpPosition = [
-        buttonUpRect.x + buttonUpRect.width / 2,
-        buttonUpRect.y + buttonUpRect.height / 2
-      ];
-      const buttonDown = el.shadowRoot.querySelector(
-        ".step-down"
-      );
-      const buttonDownRect = buttonDown.getBoundingClientRect();
-      const buttonDownPosition = [
-        buttonDownRect.x + buttonDownRect.width / 2,
-        buttonDownRect.y + buttonDownRect.height / 2
-      ];
-      sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonUpPosition
-          },
-          {
-            type: "down"
-          }
-        ]
-      });
-      await oneEvent(el, "input");
-      expect(el.value).to.equal(51);
-      expect(inputSpy.callCount).to.equal(1);
-      expect(changeSpy.callCount).to.equal(0);
-      await oneEvent(el, "input");
-      expect(el.value).to.equal(52);
-      expect(inputSpy.callCount).to.equal(2);
-      expect(changeSpy.callCount).to.equal(0);
-      sendMouse({
-        steps: [
-          {
-            type: "move",
-            position: buttonDownPosition
-          }
-        ]
-      });
-      let framesToWait = FRAMES_PER_CHANGE * 2;
-      while (framesToWait) {
-        framesToWait -= 1;
-        await nextFrame();
-      }
-      expect(inputSpy.callCount).to.equal(4);
-      expect(changeSpy.callCount).to.equal(0);
-      await sendMouse({
-        steps: [
-          {
-            type: "up"
-          }
-        ]
-      });
-      expect(inputSpy.callCount).to.equal(4);
-      expect(
-        changeSpy.callCount,
-        'value does not change from initial value so no "change" event is dispatched'
-      ).to.equal(0);
-    });
-  });
-  it("accepts pointer interactions with the stepper UI", async () => {
-    const inputSpy = spy();
-    const el = await getElFrom(Default({ value: 50 }));
-    el.addEventListener("input", () => inputSpy());
-    expect(el.formattedValue).to.equal("50");
-    expect(el.valueAsString).to.equal("50");
-    expect(el.value).to.equal(50);
-    const buttonUp = el.shadowRoot.querySelector(".step-up");
-    const buttonUpRect = buttonUp.getBoundingClientRect();
-    const buttonUpPosition = [
-      buttonUpRect.x + buttonUpRect.width / 2,
-      buttonUpRect.y + buttonUpRect.height / 2
-    ];
-    const buttonDown = el.shadowRoot.querySelector(
-      ".step-down"
-    );
-    const buttonDownRect = buttonDown.getBoundingClientRect();
-    const buttonDownPosition = [
-      buttonDownRect.x + buttonDownRect.width / 2,
-      buttonDownRect.y + buttonDownRect.height / 2
-    ];
-    const outsidePosition = [
-      buttonDownRect.x + buttonDownRect.width + 5,
-      buttonDownRect.y + buttonDownRect.height + 5
-    ];
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: buttonUpPosition
-        },
-        {
-          type: "down"
-        }
-      ]
-    });
-    await oneEvent(el, "input");
-    let value = 50 + inputSpy.callCount;
-    expect(el.formattedValue).to.equal(String(value));
-    expect(el.valueAsString).to.equal(String(value));
-    expect(el.value).to.equal(value);
-    inputSpy.resetHistory();
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: buttonDownPosition
-        }
-      ]
-    });
-    value = value - inputSpy.callCount;
-    expect(el.formattedValue).to.equal(String(value));
-    expect(el.valueAsString).to.equal(String(value));
-    expect(el.value).to.equal(value);
-    inputSpy.resetHistory();
-    await sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: outsidePosition
-        }
-      ]
-    });
-    value = value - inputSpy.callCount;
-    expect(el.formattedValue).to.equal(String(value));
-    expect(el.valueAsString).to.equal(String(value));
-    expect(el.value).to.equal(value);
-    inputSpy.resetHistory();
-    await oneEvent(el, "input");
-    value = value - inputSpy.callCount;
-    expect(el.formattedValue).to.equal(String(value));
-    expect(el.valueAsString).to.equal(String(value));
-    expect(el.value).to.equal(value);
-    inputSpy.resetHistory();
-    await sendMouse({
-      steps: [
-        {
-          type: "up"
-        }
-      ]
-    });
-    let framesToWait = FRAMES_PER_CHANGE;
-    while (framesToWait) {
-      framesToWait -= 1;
-      await nextFrame();
-    }
-    await elementUpdated(el);
-    value = value - inputSpy.callCount;
-    expect(el.formattedValue).to.equal(String(value));
-    expect(el.valueAsString).to.equal(String(value));
-    expect(el.value).to.equal(value);
-  });
-  it("surfaces `valueAsNumber`", async () => {
-    const el = await getElFrom(Default({}));
-    el.value = 1e3;
-    await elementUpdated(el);
-    expect(el.formattedValue).to.equal("1,000");
-    expect(el.valueAsString).to.equal("1000");
-    expect(el.value).to.equal(1e3);
-    el.valueAsString = "2222";
-    await elementUpdated(el);
-    expect(el.formattedValue).to.equal("2,222");
-    expect(el.valueAsString).to.equal("2222");
-    expect(el.value).to.equal(2222);
-  });
-  describe("manages `value` with `formatOptions`", () => {
-    it("manages decimals", async () => {
-      const el = await getElFrom(decimals({ value: 1.333333 }));
-      expect(el.value).to.equal(1.33);
-      expect(el.formattedValue).to.equal("+1.33");
-      expect(el.valueAsString).to.equal("1.33");
-    });
-    it("manages precents", async () => {
-      const el = await getElFrom(percents({ value: 0.45 }));
-      expect(el.formattedValue).to.equal("45%");
-      expect(el.valueAsString).to.equal("0.45");
-      expect(el.value).to.equal(0.45);
-      await clickBySelector(el, ".step-down");
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("44%");
-      expect(el.valueAsString).to.equal("0.44");
-      expect(el.value).to.equal(0.44);
-      await clickBySelector(el, ".step-up");
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("45%");
-      expect(el.valueAsString).to.equal("0.45");
-      expect(el.value).to.equal(0.45);
-      el.focus();
-      el.value = 0;
-      await sendKeys({ type: "54" });
-      await sendKeys({ press: "Enter" });
-      expect(el.formattedValue).to.equal("54%");
-      expect(el.valueAsString).to.equal("0.54");
-      expect(el.value).to.equal(0.54);
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("54%");
-      expect(el.valueAsString).to.equal("0.54");
-      expect(el.value).to.equal(0.54);
-    });
-    it("manages currency", async () => {
-      const el = await getElFrom(currency({ value: 234.21 }));
-      expect(el.formattedValue).to.equal("EUR\xA0234.21");
-      expect(el.valueAsString).to.equal("234.21");
-      expect(el.value).to.equal(234.21);
-    });
-    it("manages units", async () => {
-      const el = await getElFrom(units({ value: 17 }));
-      expect(el.formattedValue).to.equal("17 inches");
-      expect(el.valueAsString).to.equal("17");
-      expect(el.value).to.equal(17);
-    });
-    it("does not select all on click based `focus`", async function() {
-      this.retries(0);
-      const modifier = isMac() ? "Meta" : "Control";
-      const el = await getElFrom(units({ value: 17 }));
-      expect(el.value).to.equal(17);
-      const rect = el.focusElement.getBoundingClientRect();
-      await sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              rect.left + rect.width / 8,
-              rect.top + rect.height / 2
-            ]
-          }
-        ]
-      });
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      await sendKeys({
-        press: `${modifier}+KeyC`
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      await sendKeys({
-        press: "ArrowRight"
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      await sendKeys({
-        press: `${modifier}+KeyV`
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      expect(el.value, "copy/paste changed the value").to.equal(17);
-    });
-    it("selects all on `Tab` based `focus`", async function() {
-      this.retries(0);
-      const modifier = isMac() ? "Meta" : "Control";
-      const el = await getElFrom(units({ value: 17 }));
-      const input = document.createElement("input");
-      el.insertAdjacentElement("beforebegin", input);
-      input.focus();
-      await sendKeys({
-        press: "Tab"
-      });
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      expect(el.focused).to.be.true;
-      await sendKeys({
-        press: `${modifier}+KeyC`
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      await sendKeys({
-        press: "ArrowRight"
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      await sendKeys({
-        press: `${modifier}+KeyV`
-      });
-      await nextFrame();
-      await nextFrame();
-      await elementUpdated(el);
-      expect(el.value, "copy/paste did not change the value").to.equal(
-        1717
-      );
-    });
-    it("manages units not supported by the browser", async () => {
-      const el = await getElFrom(pixels({ value: 17 }));
-      expect(el.formattedValue).to.equal("17px");
-      expect(el.valueAsString).to.equal("17");
-      expect(el.value).to.equal(17);
-    });
-  });
-  describe("max", () => {
-    let el;
-    let lastInputValue = 0;
-    let lastChangeValue = 0;
-    const inputSpy = spy();
-    const changeSpy = spy();
-    beforeEach(async () => {
-      inputSpy.resetHistory();
-      changeSpy.resetHistory();
-      el = await getElFrom(
-        Default({
-          max: 10,
-          value: 10,
-          onInput: (value) => {
-            inputSpy(value);
-            lastInputValue = value;
-          },
-          onChange: (value) => {
-            changeSpy(value);
-            lastChangeValue = value;
-          }
-        })
-      );
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("constrains input", async () => {
-      el.focus();
-      await sendKeys({ type: "15" });
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(lastInputValue, "last input value").to.equal(10);
-      expect(lastChangeValue, "last change value").to.equal(
-        0,
-        'value does not change from initial value so no "change" event is dispatched'
-      );
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("constrains `value`", async () => {
-      el.value = 20;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("constrains ArrowUp usage", async () => {
-      expect(el.value).to.equal(10);
-      el.focus();
-      await sendKeys({ press: "ArrowUp" });
-      expect(el.focusElement.value).to.equal("10");
-      await sendKeys({ press: "Shift+ArrowUp" });
-      expect(el.focusElement.value).to.equal("10");
-    });
-    it("constrains pointer usage", async () => {
-      expect(el.value).to.equal(10);
-      const buttonUp = el.shadowRoot.querySelector(
-        ".step-up"
-      );
-      const buttonUpRect = buttonUp.getBoundingClientRect();
-      const buttonUpPosition = [
-        buttonUpRect.x + buttonUpRect.width / 2,
-        buttonUpRect.y + buttonUpRect.height / 2
-      ];
-      await sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: buttonUpPosition
-          }
-        ]
-      });
-      expect(el.value).to.equal(10);
-    });
-    it("validates on commit", async () => {
-      el.focus();
-      await sendKeys({ type: "15" });
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("disabled `stepUp` button", async () => {
-      await clickBySelector(el, ".step-up");
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("validates late", async () => {
-      el.max = 5;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.value).to.equal(5);
-    });
-    it("dispatches onchange on setting max value", async () => {
-      el.value = 5;
-      await elementUpdated(el);
-      expect(changeSpy.callCount).to.equal(0);
-      expect(el.value).to.equal(5);
-      el.focus();
-      await sendKeys({
-        press: "Backspace"
-      });
-      await sendKeys({
-        press: "1"
-      });
-      await sendKeys({
-        press: "5"
-      });
-      await sendKeys({
-        press: "Enter"
-      });
-      await elementUpdated(el);
-      expect(el.value).to.equal(10);
-      expect(inputSpy.callCount).to.equal(3);
-      expect(changeSpy.callCount).to.equal(1);
-      expect(lastChangeValue, "last change value").to.equal(10);
-    });
-  });
-  describe("min", () => {
-    let el;
-    let lastInputValue = 0;
-    let lastChangeValue = 0;
-    const inputSpy = spy();
-    const changeSpy = spy();
-    beforeEach(async () => {
-      inputSpy.resetHistory();
-      changeSpy.resetHistory();
-      el = await getElFrom(
-        Default({
-          min: 10,
-          value: 10,
-          onInput: (value) => {
-            inputSpy(value);
-            lastInputValue = value;
-          },
-          onChange: (value) => {
-            changeSpy(value);
-            lastChangeValue = value;
-          }
-        })
-      );
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("constrains input", async () => {
-      el.focus();
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ type: "5" });
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(lastInputValue, "last input value").to.equal(10);
-      expect(lastChangeValue, "last change value").to.equal(
-        0,
-        'value does not change from initial value so no "change" event is dispatched'
-      );
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-      el.focus();
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ type: "-2000" });
-      await sendKeys({ press: "Enter" });
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("dispatches onchange on setting min value", async () => {
-      el.value = 15;
-      await elementUpdated(el);
-      expect(changeSpy.callCount).to.equal(0);
-      expect(el.value).to.equal(15);
-      el.focus();
-      await sendKeys({
-        press: "Backspace"
-      });
-      await sendKeys({
-        press: "Backspace"
-      });
-      await sendKeys({
-        press: "5"
-      });
-      await sendKeys({
-        press: "Enter"
-      });
-      await elementUpdated(el);
-      expect(el.value).to.equal(10);
-      expect(inputSpy.callCount).to.equal(3);
-      expect(changeSpy.callCount).to.equal(1);
-      expect(lastChangeValue, "last change value").to.equal(10);
-    });
-    xit("manages `inputMode` in iPad", async () => {
-      await setUserAgent(
-        "Mozilla/5.0 (iPad; CPU OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile15E148 Safari/604.1"
-      );
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.min = -10;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.min = void 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.formatOptions = {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2
-      };
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("decimal");
-    });
-    xit("manages `inputMode` in iPhone", async () => {
-      await setUserAgent(
-        "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
-      );
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.min = -10;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("text");
-      el.min = void 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("text");
-      el.formatOptions = {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2
-      };
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("decimal");
-    });
-    xit("manages `inputMode` in Android", async () => {
-      await setUserAgent(
-        "Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36"
-      );
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.min = -10;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.min = void 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-      el.formatOptions = {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2
-      };
-      el.min = 0;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("decimal");
-      el.formatOptions = {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2
-      };
-      el.min = -10;
-      await elementUpdated(el);
-      expect(el.focusElement.inputMode).to.equal("numeric");
-    });
-    it("constrains `value`", async () => {
-      el.value = 0;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("constrains ArrowDown usage", async () => {
-      el.min = 0;
-      el.value = 0;
-      expect(el.value).to.equal(0);
-      el.focus();
-      await sendKeys({ press: "ArrowDown" });
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      await sendKeys({ press: "Shift+ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-    });
-    it("constrains pointer usage", async () => {
-      el.min = 0;
-      el.value = 0;
-      await elementUpdated(el);
-      expect(el.value).to.equal(0);
-      const buttonDown = el.shadowRoot.querySelector(
-        ".step-down"
-      );
-      const buttonDownRect = buttonDown.getBoundingClientRect();
-      const buttonDownPosition = [
-        buttonDownRect.x + buttonDownRect.width / 2,
-        buttonDownRect.y + buttonDownRect.height / 2
-      ];
-      await sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: buttonDownPosition
-          }
-        ]
-      });
-      await elementUpdated(el);
-      expect(el.value).to.equal(0);
-    });
-    it("validates on commit", async () => {
-      el.focus();
-      await sendKeys({ press: "0" });
-      await sendKeys({ press: "Enter" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-    });
-    it("disabled `stepDown` button", async () => {
-      await clickBySelector(el, ".step-down");
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("validates late", async () => {
-      el.min = 15;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("15");
-      expect(el.valueAsString).to.equal("15");
-      expect(el.value).to.equal(15);
-    });
-  });
-  describe("step", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({ value: 10, step: 5 }));
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("via arrow up", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("15");
-      expect(el.valueAsString).to.equal("15");
-      expect(el.value).to.equal(15);
-    });
-    it("via arrow down", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.value).to.equal(5);
-    });
-    it("step up via pointer", async () => {
-      await clickBySelector(el, ".step-up");
-      expect(el.formattedValue).to.equal("15");
-      expect(el.valueAsString).to.equal("15");
-      expect(el.value).to.equal(15);
-    });
-    it("step down via pointer", async () => {
-      await clickBySelector(el, ".step-down");
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.value).to.equal(5);
-    });
-  });
-  describe("step + constraints", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({ step: 5 }));
-      expect(el.formattedValue).to.equal("");
-      expect(el.valueAsString).to.equal("NaN");
-      expect(el.value).to.be.NaN;
-    });
-    it("steps", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("0");
-      expect(el.valueAsString).to.equal("0");
-      expect(el.value).to.equal(0);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.value).to.equal(5);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-    });
-    it("steps from min", async () => {
-      el.min = 5;
-      await elementUpdated(el);
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("5");
-      expect(el.valueAsString).to.equal("5");
-      expect(el.value).to.equal(5);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("10");
-      expect(el.valueAsString).to.equal("10");
-      expect(el.value).to.equal(10);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("15");
-      expect(el.valueAsString).to.equal("15");
-      expect(el.value).to.equal(15);
-    });
-    it("steps from mismatched min", async () => {
-      el.min = 2;
-      await elementUpdated(el);
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("2");
-      expect(el.valueAsString).to.equal("2");
-      expect(el.value).to.equal(2);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("7");
-      expect(el.valueAsString).to.equal("7");
-      expect(el.value).to.equal(7);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("12");
-      expect(el.valueAsString).to.equal("12");
-      expect(el.value).to.equal(12);
-    });
-    it("steps to mismatched max", async () => {
-      el.min = 2;
-      el.max = 10;
-      await elementUpdated(el);
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("2");
-      expect(el.valueAsString).to.equal("2");
-      expect(el.value).to.equal(2);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("7");
-      expect(el.valueAsString).to.equal("7");
-      expect(el.value).to.equal(7);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("7");
-      expect(el.valueAsString).to.equal("7");
-      expect(el.value).to.equal(7);
-    });
-    it("validates max + step", async () => {
-      el.value = 2;
-      el.min = 2;
-      el.max = 10;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("2");
-      expect(el.valueAsString).to.equal("2");
-      expect(el.value).to.equal(2);
-      el.value = 11;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("7");
-      expect(el.valueAsString).to.equal("7");
-      expect(el.value).to.equal(7);
-      el.value = 27;
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("7");
-      expect(el.valueAsString).to.equal("7");
-      expect(el.value).to.equal(7);
-    });
-  });
-  describe("indeterminate", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(indeterminate(indeterminate.args));
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal(indeterminatePlaceholder);
-    });
-    it('remove "-" on focus', async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal("");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal(indeterminatePlaceholder);
-    });
-    it('return to "-" after suplied value is removed', async () => {
-      el.focus();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal("");
-      await sendKeys({ type: "50" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("50");
-      expect(el.valueAsString).to.equal("50");
-      expect(el.value).to.equal(50);
-      expect(
-        el.displayValue
-      ).to.equal("50");
-      await sendKeys({ press: "Backspace" });
-      await sendKeys({ press: "Backspace" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal("");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("100");
-      expect(el.valueAsString).to.equal("100");
-      expect(el.value).to.equal(100);
-      expect(
-        el.displayValue
-      ).to.equal(indeterminatePlaceholder);
-    });
-    it('starts from `value` on "ArrowUp" keypresses', async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowUp" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("101");
-      expect(el.valueAsString).to.equal("101");
-      expect(el.value).to.equal(101);
-      expect(
-        el.displayValue
-      ).to.equal("101");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("101");
-      expect(el.valueAsString).to.equal("101");
-      expect(el.value).to.equal(101);
-      expect(
-        el.displayValue
-      ).to.equal("101");
-    });
-    it("starts from `value` on click `.step-up`", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await clickBySelector(el, ".step-up");
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("101");
-      expect(el.valueAsString).to.equal("101");
-      expect(el.value).to.equal(101);
-      expect(
-        el.displayValue
-      ).to.equal("101");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("101");
-      expect(el.valueAsString).to.equal("101");
-      expect(el.value).to.equal(101);
-      expect(
-        el.displayValue
-      ).to.equal("101");
-    });
-    it('starts from `value` on "ArrowDown" keypresses', async () => {
-      el.focus();
-      await elementUpdated(el);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("99");
-      expect(el.valueAsString).to.equal("99");
-      expect(el.value).to.equal(99);
-      expect(
-        el.displayValue
-      ).to.equal("99");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("99");
-      expect(el.valueAsString).to.equal("99");
-      expect(el.value).to.equal(99);
-      expect(
-        el.displayValue
-      ).to.equal("99");
-    });
-    it("starts from `value` on click `.step-down`", async () => {
-      el.focus();
-      await elementUpdated(el);
-      await clickBySelector(el, ".step-down");
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("99");
-      expect(el.valueAsString).to.equal("99");
-      expect(el.value).to.equal(99);
-      expect(
-        el.displayValue
-      ).to.equal("99");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("99");
-      expect(el.valueAsString).to.equal("99");
-      expect(el.value).to.equal(99);
-      expect(
-        el.displayValue
-      ).to.equal("99");
-    });
-  });
-  it("removes the stepper UI with [hide-stepper]", async () => {
-    const el = await getElFrom(Default({ hideStepper: true }));
-    const stepUp = el.shadowRoot.querySelector(".step-up");
-    const stepDown = el.shadowRoot.querySelector(".step-down");
-    expect(stepUp).to.be.null;
-    expect(stepDown).to.be.null;
-  });
-  describe("Disabled", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({ disabled: true, value: 1337 }));
-      expect(el.formattedValue).to.equal("1,337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-      el.focus();
-      await elementUpdated(el);
-    });
-    afterEach(async () => {
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("1,337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-    });
-    it("presents as `disabled`", async () => {
-      await sendKeys({ type: "12345" });
-      await elementUpdated(el);
-      await sendKeys({ press: "Enter" });
-    });
-    it("prevents increment via keyboard", async () => {
-      await sendKeys({ press: "ArrowUp" });
-    });
-    it("prevents decrement via keyboard", async () => {
-      await sendKeys({ press: "ArrowDown" });
-    });
-    it("prevents increment via scroll", async () => {
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-    });
-    it("prevents decrement via scroll", async () => {
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-    });
-    it("prevents increment via stepper button", async () => {
-      await clickBySelector(el, ".step-up");
-    });
-    it("prevents decrement via stepper button", async () => {
-      await clickBySelector(el, ".step-down");
-    });
-  });
-  describe("Readonly", () => {
-    let el;
-    beforeEach(async () => {
-      el = await getElFrom(Default({ readonly: true, value: 1337 }));
-      expect(el.formattedValue).to.equal("1,337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-      el.focus();
-      await elementUpdated(el);
-    });
-    afterEach(async () => {
-      await elementUpdated(el);
-      expect(el.formattedValue).to.equal("1,337");
-      expect(el.valueAsString).to.equal("1337");
-      expect(el.value).to.equal(1337);
-    });
-    it("presents as `readonly`", async () => {
-      await sendKeys({ type: "12345" });
-      await elementUpdated(el);
-      await sendKeys({ press: "Enter" });
-    });
-    it("prevents increment via keyboard", async () => {
-      await sendKeys({ press: "ArrowUp" });
-    });
-    it("prevents decrement via keyboard", async () => {
-      await sendKeys({ press: "ArrowDown" });
-    });
-    it("prevents increment via scroll", async () => {
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-    });
-    it("prevents decrement via scroll", async () => {
-      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-    });
-    it("prevents increment via stepper button", async () => {
-      await clickBySelector(el, ".step-up");
-    });
-    it("prevents decrement via stepper button", async () => {
-      await clickBySelector(el, ".step-down");
-    });
-  });
-  describe("accessibility model", () => {
-    it("buttons have proper label", async () => {
-      await fixture(html`
-                <div>
-                    ${Default({
-        onChange: () => {
-          return;
-        }
-      })}
-                </div>
-            `);
-      const snapshot = await a11ySnapshot(
-        {}
-      );
-      expect(
-        findAccessibilityNode(
-          snapshot,
-          (node) => node.name === "Increase Enter a number"
-        ),
-        "`name` is the label text"
-      ).to.not.be.null;
-      expect(
-        findAccessibilityNode(
-          snapshot,
-          (node) => node.name === "Decrease Enter a number"
-        ),
-        "`name` is the label text"
-      ).to.not.be.null;
-    });
-  });
-});
-//# sourceMappingURL=number-field.test.js.map