@spectrum-web-components/color-area 0.5.0 → 0.5.2

package/test/color-area.test-vrt.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["color-area.test-vrt.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/color-area.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ColorAreaStories', stories);\n"],
-  "mappings": "AAYA,mDACA,8DAEA,EAAe,mBAAoB,CAAO",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/color-area.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('ColorAreaStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,oBAAoB,OAA+B;",
   "names": []
 }

package/test/color-area.test.js

@@ -1,63 +1,627 @@
-import{elementUpdated as r,expect as e,fixture as s,html as n,nextFrame as w,oneEvent as i}from"@open-wc/testing";import{TinyColor as h}from"@ctrl/tinycolor";import"@spectrum-web-components/color-area/sp-color-area.js";import{sendKeys as l}from"@web/test-runner-commands";import{spy as u}from"sinon";import{testForLitDevWarnings as q}from"../../../test/testing-helpers.js";describe("ColorArea",()=>{q(async()=>await s(n`
+"use strict";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent
+} from "@open-wc/testing";
+import { TinyColor } from "@ctrl/tinycolor";
+import "@spectrum-web-components/color-area/sp-color-area.js";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+describe("ColorArea", () => {
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-color-area></sp-color-area>
-                `)),it("loads default color-area accessibly",async()=>{const a=await s(n`
+                `
+    )
+  );
+  it("loads default color-area accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area></sp-color-area>
-            `);await r(a),await e(a).to.be.accessible()}),it("manages a single tab stop",async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("manages a single tab stop", async () => {
+    const test = await fixture(
+      html`
                 <div>
                     <input type="text" />
                     <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
                     <input type="text" />
                 </div>
-            `),o=a.querySelector("sp-color-area"),t=a.querySelector("input:nth-of-type(1)"),c=a.querySelector("input:nth-of-type(2)");await r(o),t.focus(),e(document.activeElement,"before input").to.equal(t),await l({press:"Tab"}),await r(o),e(document.activeElement,"element").to.equal(o);let p=o.value;await l({press:"ArrowRight"}),await r(o),e(o.value).to.not.equal(p),await l({press:"Tab"}),await r(o),e(document.activeElement,"after input").to.equal(c),await l({press:"Shift+Tab"}),await r(o),e(document.activeElement,"element again").to.equal(o),p=o.value,await l({press:"ArrowDown"}),e(o.value).to.not.equal(p),await l({press:"Shift+Tab"}),e(document.activeElement,"before input again").to.equal(t)}),it("provides separate aria-labels for X and Y inputs",async()=>{const a=await s(n`
+            `
+    );
+    const el = test.querySelector("sp-color-area");
+    const input1 = test.querySelector(
+      "input:nth-of-type(1)"
+    );
+    const input2 = test.querySelector(
+      "input:nth-of-type(2)"
+    );
+    await elementUpdated(el);
+    input1.focus();
+    expect(document.activeElement, "before input").to.equal(input1);
+    await sendKeys({
+      press: "Tab"
+    });
+    await elementUpdated(el);
+    expect(document.activeElement, "element").to.equal(el);
+    let value = el.value;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.not.equal(value);
+    await sendKeys({
+      press: "Tab"
+    });
+    await elementUpdated(el);
+    expect(document.activeElement, "after input").to.equal(input2);
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    await elementUpdated(el);
+    expect(document.activeElement, "element again").to.equal(el);
+    value = el.value;
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    expect(el.value).to.not.equal(value);
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement, "before input again").to.equal(input1);
+  });
+  it("provides separate aria-labels for X and Y inputs", async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
-            `),o=a.shadowRoot.querySelector('input[name="x"]'),t=a.shadowRoot.querySelector('input[name="y"]');e(o==null?void 0:o.getAttribute("aria-label")).to.equal("saturation"),e(t==null?void 0:t.getAttribute("aria-label")).to.equal("luminosity")}),it('overrides both X and Y labels with a provided "label" attribute',async()=>{const a=await s(n`
+            `
+    );
+    const inputX = el.shadowRoot.querySelector('input[name="x"]');
+    const inputY = el.shadowRoot.querySelector('input[name="y"]');
+    expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal("saturation");
+    expect(inputY == null ? void 0 : inputY.getAttribute("aria-label")).to.equal("luminosity");
+  });
+  it('overrides both X and Y labels with a provided "label" attribute', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area
                     color="hsl(100, 50%, 50%)"
                     label="something custom"
                 ></sp-color-area>
-            `),o=a.shadowRoot.querySelector('input[name="x"]'),t=a.shadowRoot.querySelector('input[name="y"]');e(o==null?void 0:o.getAttribute("aria-label")).to.equal("something custom"),e(t==null?void 0:t.getAttribute("aria-label")).to.equal("something custom")}),it('accepts "color" values as hsl',async()=>{const a=await s(n`
+            `
+    );
+    const inputX = el.shadowRoot.querySelector('input[name="x"]');
+    const inputY = el.shadowRoot.querySelector('input[name="y"]');
+    expect(inputX == null ? void 0 : inputX.getAttribute("aria-label")).to.equal("something custom");
+    expect(inputY == null ? void 0 : inputY.getAttribute("aria-label")).to.equal("something custom");
+  });
+  it("accepts `hue` values", async () => {
+    const el = await fixture(
+      html`
+                <sp-color-area></sp-color-area>
+            `
+    );
+    await elementUpdated(el);
+    const { handle } = el;
+    expect(handle.color).to.equal("hsl(0, 100%, 50%)");
+    el.hue = 125;
+    await elementUpdated(el);
+    expect(handle.color).to.equal("hsl(125, 100%, 50%)");
+  });
+  it('accepts "color" values as hsl', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
-            `);await r(a),e(a.hue,"hue").to.equal(100),e(a.x,"x").to.equal(.67),e(a.y,"y").to.equal(.25)}),it('accepts "color" values as hsla',async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue, "hue").to.equal(100);
+    expect(el.x, "x").to.equal(0.67);
+    expect(el.y, "y").to.equal(0.25);
+  });
+  it('accepts "color" values as hsla', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
-            `);await r(a),e(a.hue,"hugh").to.equal(100),e(a.x,"ex").to.equal(.67),e(a.y,"why").to.equal(.25),a.color="hsla(120, 100%, 0, 1)",await r(a),e(a.hue,"hue 2").to.equal(120),e(a.x,"x 2").to.equal(0),e(a.y,"y 2").to.equal(1)}),it('accepts "color" values as rgb',async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue, "hugh").to.equal(100);
+    expect(el.x, "ex").to.equal(0.67);
+    expect(el.y, "why").to.equal(0.25);
+    el.color = "hsla(120, 100%, 0, 1)";
+    await elementUpdated(el);
+    expect(el.hue, "hue 2").to.equal(120);
+    expect(el.x, "x 2").to.equal(0);
+    expect(el.y, "y 2").to.equal(1);
+  });
+  it('accepts "color" values as rgb', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="rgb(0,255,0)"></sp-color-area>
-            `);await r(a),e(a.hue).to.equal(120),e(a.x).to.equal(1),e(a.y).to.equal(0)}),it('accepts "color" values as hex',async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(120);
+    expect(el.x).to.equal(1);
+    expect(el.y).to.equal(0);
+  });
+  it('accepts "color" values as hex', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="#00ff00"></sp-color-area>
-            `);await r(a),e(a.hue).to.equal(120),e(a.x).to.equal(1),e(a.y).to.equal(0)}),it('accepts "Arrow*" keypresses',async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(120);
+    expect(el.x).to.equal(1);
+    expect(el.y).to.equal(0);
+  });
+  it('accepts "Arrow*" keypresses', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
-            `);e(a.hue,"hue").to.equal(100),e(a.x,"x").to.equal(.67),e(a.y,"y").to.equal(.25),a.inputX.focus(),await w();let o=i(a,"change");await l({press:"ArrowUp"}),await o,o=i(a,"change"),await l({press:"ArrowUp"}),await o,e(a.x).to.equal(.67),e(a.y).to.equal(.23),o=i(a,"change"),await l({press:"ArrowRight"}),await o,o=i(a,"change"),await l({press:"ArrowRight"}),await o,e(a.x).to.equal(.69),e(a.y).to.equal(.23),o=i(a,"change"),await l({press:"ArrowDown"}),await o,o=i(a,"change"),await l({press:"ArrowDown"}),await o,e(a.x).to.equal(.69),e(a.y).to.equal(.25),o=i(a,"change"),await l({press:"ArrowLeft"}),await o,o=i(a,"change"),await l({press:"ArrowLeft"}),await o,e(a.x).to.equal(.67),e(a.y).to.equal(.25)}),it('accepts "Arrow*" keypresses with alteration',async()=>{const a=await s(n`
+            `
+    );
+    expect(el.hue, "hue").to.equal(100);
+    expect(el.x, "x").to.equal(0.67);
+    expect(el.y, "y").to.equal(0.25);
+    el.inputX.focus();
+    await nextFrame();
+    let changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowUp"
+    });
+    await changeEvent;
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowUp"
+    });
+    await changeEvent;
+    expect(el.x).to.equal(0.67);
+    expect(el.y).to.equal(0.23);
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    await changeEvent;
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    await changeEvent;
+    expect(el.x).to.equal(0.69);
+    expect(el.y).to.equal(0.23);
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await changeEvent;
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await changeEvent;
+    expect(el.x).to.equal(0.69);
+    expect(el.y).to.equal(0.25);
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    await changeEvent;
+    changeEvent = oneEvent(el, "change");
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    await changeEvent;
+    expect(el.x).to.equal(0.67);
+    expect(el.y).to.equal(0.25);
+  });
+  it('accepts "Arrow*" keypresses with alteration', async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsla(100, 50%, 50%, 1)"></sp-color-area>
-            `);await r(a),a.focus(),e(a.hue,"hue").to.equal(100),e(a.x,"x").to.equal(.67),e(a.y,"y").to.equal(.25),await l({down:"Shift"}),await r(a),await l({press:"ArrowUp"}),await r(a),await l({press:"ArrowUp"}),await r(a),e(a.color).to.equal("hsl(100, 65%, 57%)"),e(a.x,"first").to.equal(.67),e(a.y).to.equal(.15),await l({press:"ArrowRight"}),await r(a),await l({press:"ArrowRight"}),await r(a),e(a.color).to.equal("hsl(100, 69%, 52%)"),e(a.x).to.equal(.77),e(a.y).to.equal(.15),await l({press:"ArrowDown"}),await r(a),await l({press:"ArrowDown"}),await r(a),e(a.color).to.equal("hsl(100, 63%, 46%)"),e(a.x).to.equal(.77),e(a.y).to.equal(.25),await l({press:"ArrowLeft"}),await r(a),await l({press:"ArrowLeft"}),await r(a),await l({up:"Shift"}),await r(a),e(a.color).to.equal("hsl(100, 50%, 50%)"),e(a.x,"last").to.equal(.67),e(a.y).to.equal(.25)}),it("accepts pointer events",async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    el.focus();
+    expect(el.hue, "hue").to.equal(100);
+    expect(el.x, "x").to.equal(0.67);
+    expect(el.y, "y").to.equal(0.25);
+    await sendKeys({
+      down: "Shift"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowUp"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowUp"
+    });
+    await elementUpdated(el);
+    expect(el.color).to.equal("hsl(100, 65%, 57%)");
+    expect(el.x, "first").to.equal(0.67);
+    expect(el.y).to.equal(0.15);
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    await elementUpdated(el);
+    expect(el.color).to.equal("hsl(100, 69%, 52%)");
+    expect(el.x).to.equal(0.77);
+    expect(el.y).to.equal(0.15);
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await elementUpdated(el);
+    expect(el.color).to.equal("hsl(100, 63%, 46%)");
+    expect(el.x).to.equal(0.77);
+    expect(el.y).to.equal(0.25);
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    await elementUpdated(el);
+    await sendKeys({
+      up: "Shift"
+    });
+    await elementUpdated(el);
+    expect(el.color).to.equal("hsl(100, 50%, 50%)");
+    expect(el.x, "last").to.equal(0.67);
+    expect(el.y).to.equal(0.25);
+  });
+  it("accepts pointer events", async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area
                     style="--spectrum-colorarea-default-width: 192px; --spectrum-colorarea-default-height: 192px;"
                 ></sp-color-area>
-            `);await r(a),await r(a);const{handle:o}=a;o.setPointerCapture=()=>{},o.releasePointerCapture=()=>{},e(a.hue).to.equal(0),e(a.x).to.equal(1),e(a.y).to.equal(0),o.dispatchEvent(new PointerEvent("pointerdown",{button:1,pointerId:1,clientX:100,clientY:100,bubbles:!0,composed:!0,cancelable:!0})),await r(a),e(a.hue).to.equal(0),e(a.x).to.equal(1),e(a.y).to.equal(0);const c=(a.shadowRoot?a.shadowRoot:a).querySelector(".gradient");c.dispatchEvent(new PointerEvent("pointerdown",{button:1,pointerId:1,clientX:100,clientY:100,bubbles:!0,composed:!0,cancelable:!0})),await r(a),e(a.hue).to.equal(0),e(a.x).to.equal(1),e(a.y).to.equal(0),c.dispatchEvent(new PointerEvent("pointerdown",{pointerId:1,clientX:100,clientY:100,bubbles:!0,composed:!0,cancelable:!0})),await r(a),e(a.hue).to.equal(0),e(a.x,"pointerdown x").to.equal(.48),e(a.y,"pointerdown y").to.equal(.48),o.dispatchEvent(new PointerEvent("pointermove",{pointerId:1,clientX:110,clientY:110,bubbles:!0,composed:!0,cancelable:!0})),o.dispatchEvent(new PointerEvent("pointerup",{pointerId:1,clientX:110,clientY:110,bubbles:!0,composed:!0,cancelable:!0})),await r(a),e(a.hue).to.equal(0),e(a.x).to.equal(.53),e(a.y).to.equal(.53)}),it("responds to events on the internal input element",async()=>{const a=u(),o=u(),t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    await elementUpdated(el);
+    const { handle } = el;
+    handle.setPointerCapture = () => {
+      return;
+    };
+    handle.releasePointerCapture = () => {
+      return;
+    };
+    expect(el.hue).to.equal(0);
+    expect(el.x).to.equal(1);
+    expect(el.y).to.equal(0);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        pointerId: 1,
+        clientX: 100,
+        clientY: 100,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(0);
+    expect(el.x).to.equal(1);
+    expect(el.y).to.equal(0);
+    const root = el.shadowRoot ? el.shadowRoot : el;
+    const gradient = root.querySelector(".gradient");
+    gradient.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        pointerId: 1,
+        clientX: 100,
+        clientY: 100,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(0);
+    expect(el.x).to.equal(1);
+    expect(el.y).to.equal(0);
+    gradient.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        pointerId: 1,
+        clientX: 100,
+        clientY: 100,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(0);
+    expect(el.x, "pointerdown x").to.equal(0.48);
+    expect(el.y, "pointerdown y").to.equal(0.48);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        pointerId: 1,
+        clientX: 110,
+        clientY: 110,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        pointerId: 1,
+        clientX: 110,
+        clientY: 110,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    await elementUpdated(el);
+    expect(el.hue).to.equal(0);
+    expect(el.x).to.equal(0.53);
+    expect(el.y).to.equal(0.53);
+  });
+  it("responds to events on the internal input element", async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const el = await fixture(
+      html`
                 <sp-color-area
                     color="hsla(100, 50%, 50%, 1)"
-                    @change=${()=>o()}
-                    @input=${()=>a()}
+                    @change=${() => changeSpy()}
+                    @input=${() => inputSpy()}
                 ></sp-color-area>
-            `);await r(t),t.inputX.focus(),t.inputX.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),t.inputX.dispatchEvent(new Event("change",{bubbles:!0,composed:!1})),e(a.callCount).to.equal(1),e(o.callCount).to.equal(1),t.inputY.focus(),t.inputY.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),t.inputY.dispatchEvent(new Event("change",{bubbles:!0,composed:!1})),e(a.callCount).to.equal(2),e(o.callCount).to.equal(2)}),it('dispatches input and change events in response to "Arrow*" keypresses',async()=>{const a=u(),o=u(),t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    el.inputX.focus();
+    el.inputX.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    el.inputX.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: false
+      })
+    );
+    expect(inputSpy.callCount).to.equal(1);
+    expect(changeSpy.callCount).to.equal(1);
+    el.inputY.focus();
+    el.inputY.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    el.inputY.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: false
+      })
+    );
+    expect(inputSpy.callCount).to.equal(2);
+    expect(changeSpy.callCount).to.equal(2);
+  });
+  it('dispatches input and change events in response to "Arrow*" keypresses', async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const el = await fixture(
+      html`
                 <sp-color-area
                     color="hsla(100, 50%, 50%, 1)"
-                    @change=${()=>o()}
-                    @input=${()=>a()}
+                    @change=${() => changeSpy()}
+                    @input=${() => inputSpy()}
                 ></sp-color-area>
-            `);await r(t),t.inputX.focus(),a.resetHistory(),o.resetHistory(),await l({press:"ArrowRight"}),await l({press:"ArrowRight"}),await r(t),e(a.callCount).to.equal(2),e(o.callCount).to.equal(2),t.inputY.focus(),a.resetHistory(),o.resetHistory(),await l({press:"ArrowUp"}),await l({press:"ArrowUp"}),await r(t),e(a.callCount).to.equal(2),e(o.callCount).to.equal(2),t.inputY.focus(),a.resetHistory(),o.resetHistory(),await l({press:"ArrowDown"}),await l({press:"ArrowDown"}),await r(t),e(a.callCount).to.equal(2),e(o.callCount).to.equal(2),t.inputX.focus(),a.resetHistory(),o.resetHistory(),await l({press:"ArrowLeft"}),await l({press:"ArrowLeft"}),await r(t),e(a.callCount).to.equal(2),e(o.callCount).to.equal(2)}),it("retains `hue` value when s = 0 in HSL string format",async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    el.inputX.focus();
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    await sendKeys({ press: "ArrowRight" });
+    await sendKeys({ press: "ArrowRight" });
+    await elementUpdated(el);
+    expect(inputSpy.callCount).to.equal(2);
+    expect(changeSpy.callCount).to.equal(2);
+    el.inputY.focus();
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    await sendKeys({ press: "ArrowUp" });
+    await sendKeys({ press: "ArrowUp" });
+    await elementUpdated(el);
+    expect(inputSpy.callCount).to.equal(2);
+    expect(changeSpy.callCount).to.equal(2);
+    el.inputY.focus();
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowDown" });
+    await elementUpdated(el);
+    expect(inputSpy.callCount).to.equal(2);
+    expect(changeSpy.callCount).to.equal(2);
+    el.inputX.focus();
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    await sendKeys({ press: "ArrowLeft" });
+    await sendKeys({ press: "ArrowLeft" });
+    await elementUpdated(el);
+    expect(inputSpy.callCount).to.equal(2);
+    expect(changeSpy.callCount).to.equal(2);
+  });
+  it("retains `hue` value when s = 0 in HSL string format", async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
-            `);await r(a),e(a.hue,"hue").to.equal(100),e(a.x,"x").to.equal(.67),e(a.y,"y").to.equal(.25),e(a.color).to.equal("hsl(100, 50%, 50%)"),a.color="hsl(100, 0%, 50%)",await r(a),e(a.hue,"new hue").to.equal(100),e(a.x,"new x").to.equal(0),e(a.y,"new y").to.equal(.5),e(a.color).to.equal("hsl(100, 0%, 50%)")}),it("retains `hue` value when s = 0 in HSL object format",async()=>{let a={h:100,s:.5,l:.5};const o=await s(n`
-                <sp-color-area .color=${a}></sp-color-area>
-            `);await r(o);let t=o.color;const c=5e-5;e(o.hue).to.equal(100),e(o.x,"x").to.equal(.67),e(o.y,"y").to.equal(.25),e(Math.abs(t.h-a.h)).to.be.lessThan(c),e(Math.abs(t.s-a.s)).to.be.lessThan(c),e(Math.abs(t.l-a.l)).to.be.lessThan(c),a={h:100,s:0,l:.5},o.color=a,await r(o),t=o.color,e(o.hue).to.equal(100),e(o.x,"x").to.equal(0),e(o.y,"y").to.equal(.5),e(Math.abs(t.h-a.h)).to.be.lessThan(c),e(Math.abs(t.s-a.s)).to.be.lessThan(c),e(Math.abs(t.l-a.l)).to.be.lessThan(c)}),it("retains `hue` value when s = 0 in HSV string format",async()=>{const a=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue, "hue").to.equal(100);
+    expect(el.x, "x").to.equal(0.67);
+    expect(el.y, "y").to.equal(0.25);
+    expect(el.color).to.equal("hsl(100, 50%, 50%)");
+    el.color = "hsl(100, 0%, 50%)";
+    await elementUpdated(el);
+    expect(el.hue, "new hue").to.equal(100);
+    expect(el.x, "new x").to.equal(0);
+    expect(el.y, "new y").to.equal(0.5);
+    expect(el.color).to.equal("hsl(100, 0%, 50%)");
+  });
+  it("retains `hue` value when s = 0 in HSL object format", async () => {
+    let inputColor = { h: 100, s: 0.5, l: 0.5 };
+    const el = await fixture(
+      html`
+                <sp-color-area .color=${inputColor}></sp-color-area>
+            `
+    );
+    await elementUpdated(el);
+    let outputColor = el.color;
+    const variance = 5e-5;
+    expect(el.hue).to.equal(100);
+    expect(el.x, "x").to.equal(0.67);
+    expect(el.y, "y").to.equal(0.25);
+    expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);
+    inputColor = { h: 100, s: 0, l: 0.5 };
+    el.color = inputColor;
+    await elementUpdated(el);
+    outputColor = el.color;
+    expect(el.hue).to.equal(100);
+    expect(el.x, "x").to.equal(0);
+    expect(el.y, "y").to.equal(0.5);
+    expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);
+  });
+  it("retains `hue` value when s = 0 in HSV string format", async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area color="hsv(100, 50%, 50%)"></sp-color-area>
-            `);await r(a),e(a.hue,"hue").to.equal(100),e(a.x,"x").to.equal(.5),e(a.y,"y").to.equal(.5),e(a.color).to.equal("hsv(100, 50%, 50%)"),a.color="hsv(100, 0%, 50%)",await r(a),e(a.hue,"new hue").to.equal(100),e(a.x,"new x").to.equal(0),e(a.y,"new y").to.equal(.5),e(a.color).to.equal("hsv(100, 0%, 50%)")}),it("retains `hue` value when s = 0 in HSV object format",async()=>{let a={h:100,s:.5,v:.5};const o=await s(n`
-                <sp-color-area .color=${a}></sp-color-area>
-            `);await r(o);let t=o.color;const c=5e-5;e(o.hue).to.equal(100),e(o.x,"x").to.equal(.5),e(o.y,"y").to.equal(.5),e(Math.abs(t.h-a.h)).to.be.lessThan(c),e(Math.abs(t.s-a.s)).to.be.lessThan(c),e(Math.abs(t.v-a.v)).to.be.lessThan(c),a={h:100,s:0,v:.5},o.color=a,await r(o),t=o.color,e(o.hue).to.equal(100),e(o.x,"x").to.equal(0),e(o.y,"y").to.equal(.5),e(Math.abs(t.h-a.h)).to.be.lessThan(c),e(Math.abs(t.s-a.s)).to.be.lessThan(c),e(Math.abs(t.v-a.v)).to.be.lessThan(c)}),[{name:"RGB String",color:"rgb(204, 51, 204)"},{name:"RGB",color:{r:204,g:51,b:204,a:1}},{name:"PRGB String",color:"rgb(80%, 20%, 80%)"},{name:"PRGB",color:{r:"80%",g:"20%",b:"80%",a:1}},{name:"Hex",color:"cc33cc"},{name:"Hex String",color:"#cc33cc"},{name:"Hex8",color:"cc33ccff"},{name:"Hex8 String",color:"#cc33ccff"},{name:"string",color:"red"},{name:"HSL String",color:"hsl(300, 60%, 50%)"},{name:"HSL",color:{h:300,s:.6000000000000001,l:.5,a:1}},{name:"HSV String",color:"hsv(300, 75%, 100%)"},{name:"HSV",color:{h:300,s:.75,v:1,a:1}}].map(a=>{it(`maintains \`color\` format as ${a.name}`,async()=>{const o=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hue, "hue").to.equal(100);
+    expect(el.x, "x").to.equal(0.5);
+    expect(el.y, "y").to.equal(0.5);
+    expect(el.color).to.equal("hsv(100, 50%, 50%)");
+    el.color = "hsv(100, 0%, 50%)";
+    await elementUpdated(el);
+    expect(el.hue, "new hue").to.equal(100);
+    expect(el.x, "new x").to.equal(0);
+    expect(el.y, "new y").to.equal(0.5);
+    expect(el.color).to.equal("hsv(100, 0%, 50%)");
+  });
+  it("retains `hue` value when s = 0 in HSV object format", async () => {
+    let inputColor = { h: 100, s: 0.5, v: 0.5 };
+    const el = await fixture(
+      html`
+                <sp-color-area .color=${inputColor}></sp-color-area>
+            `
+    );
+    await elementUpdated(el);
+    let outputColor = el.color;
+    const variance = 5e-5;
+    expect(el.hue).to.equal(100);
+    expect(el.x, "x").to.equal(0.5);
+    expect(el.y, "y").to.equal(0.5);
+    expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);
+    inputColor = { h: 100, s: 0, v: 0.5 };
+    el.color = inputColor;
+    await elementUpdated(el);
+    outputColor = el.color;
+    expect(el.hue).to.equal(100);
+    expect(el.x, "x").to.equal(0);
+    expect(el.y, "y").to.equal(0.5);
+    expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);
+    expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);
+  });
+  const colorFormats = [
+    { name: "RGB String", color: "rgb(204, 51, 204)" },
+    { name: "RGB", color: { r: 204, g: 51, b: 204, a: 1 } },
+    { name: "PRGB String", color: "rgb(80%, 20%, 80%)" },
+    { name: "PRGB", color: { r: "80%", g: "20%", b: "80%", a: 1 } },
+    { name: "Hex", color: "cc33cc" },
+    { name: "Hex String", color: "#cc33cc" },
+    { name: "Hex8", color: "cc33ccff" },
+    { name: "Hex8 String", color: "#cc33ccff" },
+    { name: "string", color: "red" },
+    { name: "HSL String", color: "hsl(300, 60%, 50%)" },
+    { name: "HSL", color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },
+    { name: "HSV String", color: "hsv(300, 75%, 100%)" },
+    { name: "HSV", color: { h: 300, s: 0.75, v: 1, a: 1 } }
+  ];
+  colorFormats.map((format) => {
+    it(`maintains \`color\` format as ${format.name}`, async () => {
+      const el = await fixture(
+        html`
                     <sp-color-area></sp-color-area>
-                `);o.color=a.color,a.name.startsWith("Hex")?e(o.color).to.equal(a.color):e(o.color).to.deep.equal(a.color)})}),it("maintains `color` format as TinyColor",async()=>{const a=await s(n`
+                `
+      );
+      el.color = format.color;
+      if (format.name.startsWith("Hex")) {
+        expect(el.color).to.equal(format.color);
+      } else
+        expect(el.color).to.deep.equal(format.color);
+    });
+  });
+  it(`maintains \`color\` format as TinyColor`, async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area></sp-color-area>
-            `),o=new h("rgb(204, 51, 204)");a.color=o,e(o.equals(a.color))}),it("resolves Hex3 format to Hex6 format",async()=>{const a=await s(n`
+            `
+    );
+    const color = new TinyColor("rgb(204, 51, 204)");
+    el.color = color;
+    expect(color.equals(el.color));
+  });
+  it(`resolves Hex3 format to Hex6 format`, async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area></sp-color-area>
-            `);a.color="0f0",e(a.color).to.equal("00ff00"),a.color="#1e0",e(a.color).to.equal("#11ee00")}),it("resolves Hex4 format to Hex8 format",async()=>{const a=await s(n`
+            `
+    );
+    el.color = "0f0";
+    expect(el.color).to.equal("00ff00");
+    el.color = "#1e0";
+    expect(el.color).to.equal("#11ee00");
+  });
+  it(`resolves Hex4 format to Hex8 format`, async () => {
+    const el = await fixture(
+      html`
                 <sp-color-area></sp-color-area>
-            `);a.color="f3af",e(a.color).to.equal("ff33aaff"),a.color="#f3af",e(a.color).to.equal("#ff33aaff")})});
+            `
+    );
+    el.color = "f3af";
+    expect(el.color).to.equal("ff33aaff");
+    el.color = "#f3af";
+    expect(el.color).to.equal("#ff33aaff");
+  });
+});
 //# sourceMappingURL=color-area.test.js.map