@spectrum-web-components/color-area 1.0.0-rc.9 → 1.0.1-color-testing

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/color-area",
-    "version": "1.0.0-rc.9",
+    "version": "1.0.1-color-testing",
     "publishConfig": {
         "access": "public"
     },
@@ -62,12 +62,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@ctrl/tinycolor": "^4.0.3",
-        "@spectrum-web-components/base": "^1.0.0-rc.9",
-        "@spectrum-web-components/color-handle": "^1.0.0-rc.9",
-        "@spectrum-web-components/opacity-checkerboard": "^1.0.0-rc.9",
-        "@spectrum-web-components/reactive-controllers": "^1.0.0-rc.9",
-        "@spectrum-web-components/shared": "^1.0.0-rc.9"
+        "@spectrum-web-components/base": "^1.0.1-color-testing",
+        "@spectrum-web-components/color-handle": "^1.0.1-color-testing",
+        "@spectrum-web-components/opacity-checkerboard": "^1.0.1-color-testing",
+        "@spectrum-web-components/reactive-controllers": "^1.0.1-color-testing",
+        "@spectrum-web-components/shared": "^1.0.1-color-testing"
     },
     "devDependencies": {
         "@spectrum-css/colorarea": "^6.0.0-s2-foundations.15"
@@ -78,5 +77,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "e6c08c203010712c7b7b54bfa1f3bc83e96566b0"
+    "gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
 }

package/src/ColorArea.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/color-handle/sp-color-handle.js';
-import { ColorValue } from '@spectrum-web-components/reactive-controllers/src/Color.js';
+import { ColorTypes } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
 /**
  * @element sp-color-area
  * @slot gradient - a custom gradient visually outlining the available color values
@@ -16,19 +16,45 @@ export declare class ColorArea extends SpectrumElement {
     labelY: string;
     private handle;
     private languageResolver;
+    /**
+     * A controller for managing color interactions within the ColorArea component.
+     *
+     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`
+     * because the ColorArea component is designed to manipulate the saturation (`s`)
+     * and value (`v`) components of the HSV color model along the x and y axes,
+     * respectively. In the HSV color model:
+     *
+     * - The `hue` (h) represents the color type and is typically controlled by a separate input.
+     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
+     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
+     *
+     * In the ColorArea component:
+     *
+     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
+     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
+     *
+     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
+     * as the user interacts with the ColorArea component.
+     *
+     * @private
+     * @type {ColorController}
+     * @memberof ColorArea
+     *
+     * @property {ColorArea} this - The instance of the ColorArea component.
+     * @property {Object} options - Configuration options for the ColorController.
+     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
+     */
     private colorController;
     get hue(): number;
     set hue(value: number);
-    get value(): ColorValue;
-    get color(): ColorValue;
-    set color(color: ColorValue);
+    get value(): ColorTypes;
+    get color(): ColorTypes;
+    set color(color: ColorTypes);
     private activeAxis;
     get x(): number;
     set x(x: number);
-    private _x;
     get y(): number;
     set y(y: number);
-    private _y;
     step: number;
     inputX: HTMLInputElement;
     inputY: HTMLInputElement;
@@ -58,6 +84,18 @@ export declare class ColorArea extends SpectrumElement {
     private handleAreaPointerdown;
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Overrides the `updated` method to handle changes in property values.
+     *
+     * @param changed - A map of changed properties with their previous values.
+     *
+     * This method performs the following actions:
+     * - Updates the saturation (`s`) of the color if `x` has changed.
+     * - Updates the value (`v`) of the color if `y` has changed.
+     * - If the `focused` property has changed and is now true, it lazily binds
+     *   the `input[type="range"]` elements in shadow roots to prevent multiple
+     *   tab stops within the Color Area for certain browser settings (e.g., Webkit).
+     */
     protected updated(changed: PropertyValues): void;
     private observer?;
     connectedCallback(): void;

package/src/ColorArea.dev.js

@@ -25,7 +25,7 @@ import { streamingListener } from "@spectrum-web-components/base/src/streaming-l
 import "@spectrum-web-components/color-handle/sp-color-handle.js";
 import {
   ColorController
-} from "@spectrum-web-components/reactive-controllers/src/Color.js";
+} from "@spectrum-web-components/reactive-controllers/src/ColorController.js";
 import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
 import {
   isAndroid,
@@ -40,21 +40,36 @@ export class ColorArea extends SpectrumElement {
     this.labelX = "saturation";
     this.labelY = "luminosity";
     this.languageResolver = new LanguageResolutionController(this);
-    this.colorController = new ColorController(this, {
-      extractColorFromState: () => ({
-        h: this.hue,
-        s: this.x,
-        v: this.y
-      }),
-      applyColorToState: ({ s, v }) => {
-        this._x = s;
-        this._y = v;
-        this.requestUpdate();
-      }
-    });
+    /**
+     * A controller for managing color interactions within the ColorArea component.
+     *
+     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`
+     * because the ColorArea component is designed to manipulate the saturation (`s`)
+     * and value (`v`) components of the HSV color model along the x and y axes,
+     * respectively. In the HSV color model:
+     *
+     * - The `hue` (h) represents the color type and is typically controlled by a separate input.
+     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
+     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
+     *
+     * In the ColorArea component:
+     *
+     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
+     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
+     *
+     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
+     * as the user interacts with the ColorArea component.
+     *
+     * @private
+     * @type {ColorController}
+     * @memberof ColorArea
+     *
+     * @property {ColorArea} this - The instance of the ColorArea component.
+     * @property {Object} options - Configuration options for the ColorController.
+     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
+     */
+    this.colorController = new ColorController(this, { manageAs: "hsv" });
     this.activeAxis = "x";
-    this._x = 1;
-    this._y = 1;
     this.step = 0.01;
     this.altered = 0;
     this.activeKeys = /* @__PURE__ */ new Set();
@@ -71,45 +86,49 @@ export class ColorArea extends SpectrumElement {
     this.colorController.hue = value;
   }
   get value() {
-    return this.colorController.color;
+    return this.colorController.colorValue;
   }
   get color() {
-    return this.colorController.color;
+    return this.colorController.colorValue;
   }
   set color(color) {
     this.colorController.color = color;
   }
   get x() {
-    return this._x;
+    return this.colorController.color.hsv.s / 100;
   }
   set x(x) {
     if (x === this.x) {
       return;
     }
     const oldValue = this.x;
-    this._x = x;
     if (this.inputX) {
       this.inputX.value = x.toString();
-      this._x = this.inputX.valueAsNumber;
+      this.colorController.color.set(
+        "s",
+        this.inputX.valueAsNumber * 100
+      );
+    } else {
+      this.colorController.color.set("s", x * 100);
     }
     this.requestUpdate("x", oldValue);
-    this.colorController.applyColorFromState();
   }
   get y() {
-    return this._y;
+    return this.colorController.color.hsv.v / 100;
   }
   set y(y) {
     if (y === this.y) {
       return;
     }
     const oldValue = this.y;
-    this._y = y;
     if (this.inputY) {
       this.inputY.value = y.toString();
-      this._y = this.inputY.valueAsNumber;
+      this.colorController.color.set(
+        "v",
+        this.inputY.valueAsNumber * 100
+      );
     }
     this.requestUpdate("y", oldValue);
-    this.colorController.applyColorFromState();
   }
   focus(focusOptions = {}) {
     super.focus(focusOptions);
@@ -192,7 +211,6 @@ export class ColorArea extends SpectrumElement {
     this.x = Math.min(1, Math.max(this.x + deltaX, 0));
     this.y = Math.min(1, Math.max(this.y + deltaY, 0));
     this.colorController.savePreviousColor();
-    this.colorController.applyColorFromState();
     if (deltaX != 0 || deltaY != 0) {
       this._valueChanged = true;
       this.dispatchEvent(
@@ -221,7 +239,6 @@ export class ColorArea extends SpectrumElement {
   handleInput(event) {
     const { valueAsNumber, name } = event.target;
     this[name] = valueAsNumber;
-    this.colorController.applyColorFromState();
   }
   handleChange(event) {
     this.handleInput(event);
@@ -250,8 +267,7 @@ export class ColorArea extends SpectrumElement {
     const [x, y] = this.calculateHandlePosition(event);
     this._valueChanged = false;
     this.x = x;
-    this.y = 1 - y;
-    this.colorController.applyColorFromState();
+    this.y = y;
     this.dispatchEvent(
       new Event("input", {
         bubbles: true,
@@ -303,7 +319,7 @@ export class ColorArea extends SpectrumElement {
       0,
       Math.min(1, (offsetY - minOffsetY) / height)
     );
-    return [this.isLTR ? percentX : 1 - percentX, percentY];
+    return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
   }
   handleAreaPointerdown(event) {
     if (event.button !== 0) {
@@ -420,13 +436,31 @@ export class ColorArea extends SpectrumElement {
     this.addEventListener("keyup", this.handleKeyup);
     this.addEventListener("keydown", this.handleKeydown);
   }
+  /**
+   * Overrides the `updated` method to handle changes in property values.
+   *
+   * @param changed - A map of changed properties with their previous values.
+   *
+   * This method performs the following actions:
+   * - Updates the saturation (`s`) of the color if `x` has changed.
+   * - Updates the value (`v`) of the color if `y` has changed.
+   * - If the `focused` property has changed and is now true, it lazily binds
+   *   the `input[type="range"]` elements in shadow roots to prevent multiple
+   *   tab stops within the Color Area for certain browser settings (e.g., Webkit).
+   */
   updated(changed) {
     super.updated(changed);
     if (this.x !== this.inputX.valueAsNumber) {
-      this._x = this.inputX.valueAsNumber;
+      this.colorController.color.set(
+        "s",
+        this.inputX.valueAsNumber * 100
+      );
     }
     if (this.y !== this.inputY.valueAsNumber) {
-      this._y = this.inputY.valueAsNumber;
+      this.colorController.color.set(
+        "v",
+        (1 - this.inputY.valueAsNumber) * 100
+      );
     }
     if (changed.has("focused") && this.focused) {
       const parentX = this.inputX.parentElement;

package/src/ColorArea.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["ColorArea.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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n    ColorController,\n    ColorValue,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n    isAndroid,\n    isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, attribute: 'label-x' })\n    public labelX = 'saturation';\n\n    @property({ type: String, attribute: 'label-y' })\n    public labelY = 'luminosity';\n\n    @query('.handle')\n    private handle!: ColorHandle;\n\n    private languageResolver = new LanguageResolutionController(this);\n\n    private colorController = new ColorController(this, {\n        extractColorFromState: () => ({\n            h: this.hue,\n            s: this.x,\n            v: this.y,\n        }),\n        applyColorToState: ({ s, v }) => {\n            this._x = s;\n            this._y = v;\n            this.requestUpdate();\n        },\n    });\n\n    @property({ type: Number })\n    public get hue(): number {\n        return this.colorController.hue;\n    }\n\n    public set hue(value: number) {\n        this.colorController.hue = value;\n    }\n\n    @property({ type: String })\n    public get value(): ColorValue {\n        return this.colorController.color;\n    }\n\n    @property({ type: String })\n    public get color(): ColorValue {\n        return this.colorController.color;\n    }\n\n    public set color(color: ColorValue) {\n        this.colorController.color = color;\n    }\n\n    @property({ attribute: false })\n    private activeAxis = 'x';\n\n    @property({ type: Number })\n    public get x(): number {\n        return this._x;\n    }\n\n    public set x(x: number) {\n        if (x === this.x) {\n            return;\n        }\n        const oldValue = this.x;\n        this._x = x;\n        if (this.inputX) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputX.value = x.toString();\n            this._x = this.inputX.valueAsNumber;\n        }\n        this.requestUpdate('x', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _x = 1;\n\n    @property({ type: Number })\n    public get y(): number {\n        return this._y;\n    }\n\n    public set y(y: number) {\n        if (y === this.y) {\n            return;\n        }\n        const oldValue = this.y;\n        this._y = y;\n        if (this.inputY) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputY.value = y.toString();\n            this._y = this.inputY.valueAsNumber;\n        }\n        this.requestUpdate('y', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _y = 1;\n\n    @property({ type: Number })\n    public step = 0.01;\n\n    @query('[name=\"x\"]')\n    public inputX!: HTMLInputElement;\n\n    @query('[name=\"y\"]')\n    public inputY!: HTMLInputElement;\n\n    private altered = 0;\n\n    private activeKeys = new Set();\n\n    private _valueChanged = false;\n\n    public override focus(focusOptions: FocusOptions = {}): void {\n        super.focus(focusOptions);\n        this.forwardFocus();\n    }\n\n    private forwardFocus(): void {\n        this.focused = this.hasVisibleFocusInTree();\n        if (this.activeAxis === 'x') {\n            this.inputX.focus();\n        } else {\n            this.inputY.focus();\n        }\n    }\n\n    private handleFocus(): void {\n        this.focused = true;\n        this._valueChanged = false;\n    }\n\n    public handleBlur(): void {\n        if (this._pointerDown) {\n            return;\n        }\n        this.altered = 0;\n        this.focused = false;\n        this._valueChanged = false;\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        this.focused = true;\n        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n            (key) => !!key\n        ).length;\n        const isArrowKey =\n            code.search('Arrow') === 0 ||\n            code.search('Page') === 0 ||\n            code.search('Home') === 0 ||\n            code.search('End') === 0;\n        if (isArrowKey) {\n            event.preventDefault();\n            this.activeKeys.add(code);\n            this.handleKeypress();\n        }\n    }\n\n    private handleKeypress(): void {\n        let deltaX = 0;\n        let deltaY = 0;\n        const step = Math.max(this.step, this.altered * 5 * this.step);\n        this.activeKeys.forEach((code) => {\n            switch (code) {\n                case 'ArrowUp':\n                    deltaY = step;\n                    break;\n                case 'ArrowDown':\n                    deltaY = step * -1;\n                    break;\n                case 'ArrowLeft':\n                    deltaX = this.step * (this.isLTR ? -1 : 1);\n                    break;\n                case 'ArrowRight':\n                    deltaX = this.step * (this.isLTR ? 1 : -1);\n                    break;\n                case 'PageUp':\n                    deltaY = step * 10;\n                    break;\n                case 'PageDown':\n                    deltaY = step * -10;\n                    break;\n                case 'Home':\n                    deltaX = step * (this.isLTR ? -10 : 10);\n                    break;\n                case 'End':\n                    deltaX = step * (this.isLTR ? 10 : -10);\n                    break;\n                /* c8 ignore next 2 */\n                default:\n                    break;\n            }\n        });\n        if (deltaX != 0) {\n            this.activeAxis = 'x';\n            this.inputX.focus();\n        } else if (deltaY != 0) {\n            this.activeAxis = 'y';\n            this.inputY.focus();\n        }\n        this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n        this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n        this.colorController.savePreviousColor();\n        this.colorController.applyColorFromState();\n\n        if (deltaX != 0 || deltaY != 0) {\n            this._valueChanged = true;\n            this.dispatchEvent(\n                new Event('input', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    bubbles: true,\n                    composed: true,\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.colorController.restorePreviousColor();\n            }\n        }\n    }\n\n    private handleKeyup(event: KeyboardEvent): void {\n        event.preventDefault();\n        const { code } = event;\n        this.activeKeys.delete(code);\n    }\n\n    private handleInput(event: Event & { target: HTMLInputElement }): void {\n        const { valueAsNumber, name } = event.target;\n\n        this[name as 'x' | 'y'] = valueAsNumber;\n        this.colorController.applyColorFromState();\n    }\n\n    private handleChange(event: Event & { target: HTMLInputElement }): void {\n        this.handleInput(event);\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private boundingClientRect!: DOMRect;\n    public _pointerDown = false;\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this._pointerDown = true;\n        this.colorController.savePreviousColor();\n        this.boundingClientRect = this.getBoundingClientRect();\n        (event.target as HTMLElement).setPointerCapture(event.pointerId);\n        if (event.pointerType === 'mouse') {\n            this.focused = true;\n        }\n    }\n\n    private handlePointermove(event: PointerEvent): void {\n        const [x, y] = this.calculateHandlePosition(event);\n\n        this._valueChanged = false;\n\n        this.x = x;\n        this.y = 1 - y;\n        this.colorController.applyColorFromState();\n        this.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private handlePointerup(event: PointerEvent): void {\n        event.preventDefault();\n        this._pointerDown = false;\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        this.inputX.focus();\n        if (event.pointerType === 'mouse') {\n            this.focused = false;\n        }\n        if (!applyDefault) {\n            this.colorController.restorePreviousColor();\n        }\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(event: PointerEvent): [number, number] {\n        /* c8 ignore next 3 */\n        if (!this.boundingClientRect) {\n            return [this.x, this.y];\n        }\n        const rect = this.boundingClientRect;\n        const minOffsetX = rect.left;\n        const minOffsetY = rect.top;\n        const offsetX = event.clientX;\n        const offsetY = event.clientY;\n        const width = rect.width;\n        const height = rect.height;\n\n        const percentX = Math.max(\n            0,\n            Math.min(1, (offsetX - minOffsetX) / width)\n        );\n        const percentY = Math.max(\n            0,\n            Math.min(1, (offsetY - minOffsetY) / height)\n        );\n\n        return [this.isLTR ? percentX : 1 - percentX, percentY];\n    }\n\n    private handleAreaPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n        this.handlePointermove(event);\n    }\n\n    protected override render(): TemplateResult {\n        const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n        const isMobile = isAndroid() || isIOS();\n        const defaultAriaLabel = 'Color Picker';\n        const ariaLabel = defaultAriaLabel;\n        const ariaRoleDescription = ifDefined(\n            isMobile ? undefined : '2d slider'\n        );\n\n        const ariaLabelX = this.labelX;\n        const ariaLabelY = this.labelY;\n        const ariaValueX = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.x);\n        const ariaValueY = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.y);\n\n        const style = {\n            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,\n        };\n\n        return html`\n            <div\n                @pointerdown=${this.handleAreaPointerdown}\n                class=\"gradient\"\n                style=${styleMap(style)}\n            >\n                <slot name=\"gradient\"></slot>\n            </div>\n\n            <sp-color-handle\n                tabindex=${ifDefined(this.focused ? undefined : '0')}\n                @focus=${this.forwardFocus}\n                ?focused=${this.focused}\n                class=\"handle\"\n                color=${this.colorController.getHslString()}\n                ?disabled=${this.disabled}\n                style=${`transform: translate(${\n                    (this.isLTR ? this.x : 1 - this.x) * width\n                }px, ${height - this.y * height}px);`}\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                })}\n            ></sp-color-handle>\n\n            <fieldset\n                class=\"fieldset\"\n                aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n            >\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"x\"\n                        aria-label=${isMobile\n                            ? ariaLabelX\n                            : `${ariaLabelX} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueX\n                            : `${ariaValueX}, ${ariaLabelX}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueY}, ${ariaLabelY}`\n                              }`}\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.x)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"y\"\n                        aria-label=${isMobile\n                            ? ariaLabelY\n                            : `${ariaLabelY} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"vertical\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueY\n                            : `${ariaValueY}, ${ariaLabelY}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueX}, ${ariaLabelX}`\n                              }`}\n                        orient=\"vertical\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.y)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n            </fieldset>\n        `;\n    }\n\n    protected override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n        this.boundingClientRect = this.getBoundingClientRect();\n\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n        this.addEventListener('keyup', this.handleKeyup);\n        this.addEventListener('keydown', this.handleKeydown);\n    }\n\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n        if (this.x !== this.inputX.valueAsNumber) {\n            this._x = this.inputX.valueAsNumber;\n        }\n        if (this.y !== this.inputY.valueAsNumber) {\n            this._y = this.inputY.valueAsNumber;\n        }\n        if (changed.has('focused') && this.focused) {\n            // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n            // so that browsers with certain settings (Webkit) aren't allowed\n            // multiple tab stops within the Color Area.\n            const parentX = this.inputX.parentElement as HTMLDivElement;\n            const parentY = this.inputY.parentElement as HTMLDivElement;\n            if (!parentX.shadowRoot && !parentY.shadowRoot) {\n                parentX.attachShadow({ mode: 'open' });\n                parentY.attachShadow({ mode: 'open' });\n                const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n                (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n                (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n            }\n        }\n    }\n\n    private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (\n            !this.observer &&\n            (window as unknown as WithSWCResizeObserver).ResizeObserver\n        ) {\n            this.observer = new (\n                window as unknown as WithSWCResizeObserver\n            ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n                for (const entry of entries) {\n                    this.boundingClientRect = entry.contentRect;\n                }\n                this.requestUpdate();\n            });\n        }\n        this.observer?.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.observer?.unobserve(this);\n        super.disconnectedCallback();\n    }\n}\n"],
-  "mappings": "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",
+  "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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\n\nimport {\n    ColorController,\n    ColorTypes,\n} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n    isAndroid,\n    isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, attribute: 'label-x' })\n    public labelX = 'saturation';\n\n    @property({ type: String, attribute: 'label-y' })\n    public labelY = 'luminosity';\n\n    @query('.handle')\n    private handle!: ColorHandle;\n\n    private languageResolver = new LanguageResolutionController(this);\n\n    /**\n     * A controller for managing color interactions within the ColorArea component.\n     *\n     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`\n     * because the ColorArea component is designed to manipulate the saturation (`s`)\n     * and value (`v`) components of the HSV color model along the x and y axes,\n     * respectively. In the HSV color model:\n     *\n     * - The `hue` (h) represents the color type and is typically controlled by a separate input.\n     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).\n     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).\n     *\n     * In the ColorArea component:\n     *\n     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.\n     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.\n     *\n     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value\n     * as the user interacts with the ColorArea component.\n     *\n     * @private\n     * @type {ColorController}\n     * @memberof ColorArea\n     *\n     * @property {ColorArea} this - The instance of the ColorArea component.\n     * @property {Object} options - Configuration options for the ColorController.\n     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.\n     */\n    private colorController = new ColorController(this, { manageAs: 'hsv' });\n\n    @property({ type: Number })\n    public get hue(): number {\n        return this.colorController.hue;\n    }\n\n    public set hue(value: number) {\n        this.colorController.hue = value;\n    }\n\n    @property({ type: String })\n    public get value(): ColorTypes {\n        return this.colorController.colorValue;\n    }\n\n    @property({ type: String })\n    public get color(): ColorTypes {\n        return this.colorController.colorValue;\n    }\n\n    public set color(color: ColorTypes) {\n        this.colorController.color = color;\n    }\n\n    @property({ attribute: false })\n    private activeAxis = 'x';\n\n    @property({ type: Number })\n    public get x(): number {\n        return this.colorController.color.hsv.s / 100;\n    }\n\n    public set x(x: number) {\n        if (x === this.x) {\n            return;\n        }\n        const oldValue = this.x;\n        if (this.inputX) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputX.value = x.toString();\n            this.colorController.color.set(\n                's',\n                this.inputX.valueAsNumber * 100\n            );\n        } else {\n            this.colorController.color.set('s', x * 100);\n        }\n        this.requestUpdate('x', oldValue);\n    }\n\n    @property({ type: Number })\n    public get y(): number {\n        return this.colorController.color.hsv.v / 100;\n    }\n\n    public set y(y: number) {\n        if (y === this.y) {\n            return;\n        }\n        const oldValue = this.y;\n        if (this.inputY) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputY.value = y.toString();\n            this.colorController.color.set(\n                'v',\n                this.inputY.valueAsNumber * 100\n            );\n        }\n        this.requestUpdate('y', oldValue);\n    }\n\n    @property({ type: Number })\n    public step = 0.01;\n\n    @query('[name=\"x\"]')\n    public inputX!: HTMLInputElement;\n\n    @query('[name=\"y\"]')\n    public inputY!: HTMLInputElement;\n\n    private altered = 0;\n\n    private activeKeys = new Set();\n\n    private _valueChanged = false;\n\n    public override focus(focusOptions: FocusOptions = {}): void {\n        super.focus(focusOptions);\n        this.forwardFocus();\n    }\n\n    private forwardFocus(): void {\n        this.focused = this.hasVisibleFocusInTree();\n        if (this.activeAxis === 'x') {\n            this.inputX.focus();\n        } else {\n            this.inputY.focus();\n        }\n    }\n\n    private handleFocus(): void {\n        this.focused = true;\n        this._valueChanged = false;\n    }\n\n    public handleBlur(): void {\n        if (this._pointerDown) {\n            return;\n        }\n        this.altered = 0;\n        this.focused = false;\n        this._valueChanged = false;\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        this.focused = true;\n\n        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n            (key) => !!key\n        ).length;\n        const isArrowKey =\n            code.search('Arrow') === 0 ||\n            code.search('Page') === 0 ||\n            code.search('Home') === 0 ||\n            code.search('End') === 0;\n        if (isArrowKey) {\n            event.preventDefault();\n            this.activeKeys.add(code);\n            this.handleKeypress();\n        }\n    }\n\n    private handleKeypress(): void {\n        let deltaX = 0;\n        let deltaY = 0;\n        const step = Math.max(this.step, this.altered * 5 * this.step);\n        this.activeKeys.forEach((code) => {\n            switch (code) {\n                case 'ArrowUp':\n                    deltaY = step;\n                    break;\n                case 'ArrowDown':\n                    deltaY = step * -1;\n                    break;\n                case 'ArrowLeft':\n                    deltaX = this.step * (this.isLTR ? -1 : 1);\n                    break;\n                case 'ArrowRight':\n                    deltaX = this.step * (this.isLTR ? 1 : -1);\n                    break;\n                case 'PageUp':\n                    deltaY = step * 10;\n                    break;\n                case 'PageDown':\n                    deltaY = step * -10;\n                    break;\n                case 'Home':\n                    deltaX = step * (this.isLTR ? -10 : 10);\n                    break;\n                case 'End':\n                    deltaX = step * (this.isLTR ? 10 : -10);\n                    break;\n                /* c8 ignore next 2 */\n                default:\n                    break;\n            }\n        });\n        if (deltaX != 0) {\n            this.activeAxis = 'x';\n            this.inputX.focus();\n        } else if (deltaY != 0) {\n            this.activeAxis = 'y';\n            this.inputY.focus();\n        }\n        this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n        this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n        this.colorController.savePreviousColor();\n\n        if (deltaX != 0 || deltaY != 0) {\n            this._valueChanged = true;\n            this.dispatchEvent(\n                new Event('input', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    bubbles: true,\n                    composed: true,\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.colorController.restorePreviousColor();\n            }\n        }\n    }\n\n    private handleKeyup(event: KeyboardEvent): void {\n        event.preventDefault();\n        const { code } = event;\n        this.activeKeys.delete(code);\n    }\n\n    private handleInput(event: Event & { target: HTMLInputElement }): void {\n        const { valueAsNumber, name } = event.target;\n\n        this[name as 'x' | 'y'] = valueAsNumber;\n    }\n\n    private handleChange(event: Event & { target: HTMLInputElement }): void {\n        this.handleInput(event);\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private boundingClientRect!: DOMRect;\n    public _pointerDown = false;\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this._pointerDown = true;\n        this.colorController.savePreviousColor();\n        this.boundingClientRect = this.getBoundingClientRect();\n        (event.target as HTMLElement).setPointerCapture(event.pointerId);\n        if (event.pointerType === 'mouse') {\n            this.focused = true;\n        }\n    }\n\n    private handlePointermove(event: PointerEvent): void {\n        const [x, y] = this.calculateHandlePosition(event);\n\n        this._valueChanged = false;\n\n        this.x = x;\n        this.y = y;\n\n        this.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private handlePointerup(event: PointerEvent): void {\n        event.preventDefault();\n        this._pointerDown = false;\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        this.inputX.focus();\n        if (event.pointerType === 'mouse') {\n            this.focused = false;\n        }\n        if (!applyDefault) {\n            this.colorController.restorePreviousColor();\n        }\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(event: PointerEvent): [number, number] {\n        /* c8 ignore next 3 */\n        if (!this.boundingClientRect) {\n            return [this.x, this.y];\n        }\n        const rect = this.boundingClientRect;\n        const minOffsetX = rect.left;\n        const minOffsetY = rect.top;\n        const offsetX = event.clientX;\n        const offsetY = event.clientY;\n        const width = rect.width;\n        const height = rect.height;\n\n        const percentX = Math.max(\n            0,\n            Math.min(1, (offsetX - minOffsetX) / width)\n        );\n        const percentY = Math.max(\n            0,\n            Math.min(1, (offsetY - minOffsetY) / height)\n        );\n\n        return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];\n    }\n\n    private handleAreaPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n        this.handlePointermove(event);\n    }\n\n    protected override render(): TemplateResult {\n        const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n        const isMobile = isAndroid() || isIOS();\n        const defaultAriaLabel = 'Color Picker';\n        const ariaLabel = defaultAriaLabel;\n        const ariaRoleDescription = ifDefined(\n            isMobile ? undefined : '2d slider'\n        );\n\n        const ariaLabelX = this.labelX;\n        const ariaLabelY = this.labelY;\n        const ariaValueX = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.x);\n        const ariaValueY = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.y);\n\n        const style = {\n            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,\n        };\n\n        return html`\n            <div\n                @pointerdown=${this.handleAreaPointerdown}\n                class=\"gradient\"\n                style=${styleMap(style)}\n            >\n                <slot name=\"gradient\"></slot>\n            </div>\n\n            <sp-color-handle\n                tabindex=${ifDefined(this.focused ? undefined : '0')}\n                @focus=${this.forwardFocus}\n                ?focused=${this.focused}\n                class=\"handle\"\n                color=${this.colorController.getHslString()}\n                ?disabled=${this.disabled}\n                style=${`transform: translate(${\n                    (this.isLTR ? this.x : 1 - this.x) * width\n                }px, ${height - this.y * height}px);`}\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                })}\n            ></sp-color-handle>\n\n            <fieldset\n                class=\"fieldset\"\n                aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n            >\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"x\"\n                        aria-label=${isMobile\n                            ? ariaLabelX\n                            : `${ariaLabelX} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueX\n                            : `${ariaValueX}, ${ariaLabelX}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueY}, ${ariaLabelY}`\n                              }`}\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.x)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"y\"\n                        aria-label=${isMobile\n                            ? ariaLabelY\n                            : `${ariaLabelY} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"vertical\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueY\n                            : `${ariaValueY}, ${ariaLabelY}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueX}, ${ariaLabelX}`\n                              }`}\n                        orient=\"vertical\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.y)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n            </fieldset>\n        `;\n    }\n\n    protected override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n        this.boundingClientRect = this.getBoundingClientRect();\n\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n        this.addEventListener('keyup', this.handleKeyup);\n        this.addEventListener('keydown', this.handleKeydown);\n    }\n\n    /**\n     * Overrides the `updated` method to handle changes in property values.\n     *\n     * @param changed - A map of changed properties with their previous values.\n     *\n     * This method performs the following actions:\n     * - Updates the saturation (`s`) of the color if `x` has changed.\n     * - Updates the value (`v`) of the color if `y` has changed.\n     * - If the `focused` property has changed and is now true, it lazily binds\n     *   the `input[type=\"range\"]` elements in shadow roots to prevent multiple\n     *   tab stops within the Color Area for certain browser settings (e.g., Webkit).\n     */\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n        if (this.x !== this.inputX.valueAsNumber) {\n            this.colorController.color.set(\n                's',\n                this.inputX.valueAsNumber * 100\n            );\n        }\n        if (this.y !== this.inputY.valueAsNumber) {\n            this.colorController.color.set(\n                'v',\n                (1 - this.inputY.valueAsNumber) * 100\n            );\n        }\n        if (changed.has('focused') && this.focused) {\n            // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n            // so that browsers with certain settings (Webkit) aren't allowed\n            // multiple tab stops within the Color Area.\n            const parentX = this.inputX.parentElement as HTMLDivElement;\n            const parentY = this.inputY.parentElement as HTMLDivElement;\n            if (!parentX.shadowRoot && !parentY.shadowRoot) {\n                parentX.attachShadow({ mode: 'open' });\n                parentY.attachShadow({ mode: 'open' });\n                const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n                (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n                (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n            }\n        }\n    }\n\n    private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (\n            !this.observer &&\n            (window as unknown as WithSWCResizeObserver).ResizeObserver\n        ) {\n            this.observer = new (\n                window as unknown as WithSWCResizeObserver\n            ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n                for (const entry of entries) {\n                    this.boundingClientRect = entry.contentRect;\n                }\n                this.requestUpdate();\n            });\n        }\n        this.observer?.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.observer?.unobserve(this);\n        super.disconnectedCallback();\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/src/ColorArea.js

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var s=(c,u,e,t)=>{for(var i=t>1?void 0:t?y(u,e):u,r=c.length-1,n;r>=0;r--)(n=c[r])&&(i=(t?n(u,e,i):n(i))||i);return t&&i&&m(u,e,i),i};import{html as g,SpectrumElement as w}from"@spectrum-web-components/base";import{ifDefined as b,styleMap as C}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as v}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as x}from"@spectrum-web-components/base/src/streaming-listener.js";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{ColorController as $}from"@spectrum-web-components/reactive-controllers/src/Color.js";import{LanguageResolutionController as R}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{isAndroid as E,isIOS as S}from"@spectrum-web-components/shared/src/platform.js";import P from"./color-area.css.js";export class ColorArea extends w{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.labelX="saturation";this.labelY="luminosity";this.languageResolver=new R(this);this.colorController=new $(this,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this._x=e,this._y=t,this.requestUpdate()}});this.activeAxis="x";this._x=1;this._y=1;this.step=.01;this.altered=0;this.activeKeys=new Set;this._valueChanged=!1;this._pointerDown=!1}static get styles(){return[P]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this._x=e,this.inputX&&(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber),this.requestUpdate("x",t),this.colorController.applyColorFromState()}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this._y=e,this.inputY&&(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber),this.requestUpdate("y",t),this.colorController.applyColorFromState()}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(r=>!!r).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const i=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case"ArrowUp":t=i;break;case"ArrowDown":t=i*-1;break;case"ArrowLeft":e=this.step*(this.isLTR?-1:1);break;case"ArrowRight":e=this.step*(this.isLTR?1:-1);break;case"PageUp":t=i*10;break;case"PageDown":t=i*-10;break;case"Home":e=i*(this.isLTR?-10:10);break;case"End":e=i*(this.isLTR?10:-10);break;default:break}}),e!=0?(this.activeAxis="x",this.inputX.focus()):t!=0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),this.colorController.applyColorFromState(),(e!=0||t!=0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:i}=e.target;this[i]=t,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,i]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=1-i,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,i=t.left,r=t.top,n=e.clientX,d=e.clientY,a=t.width,l=t.height,h=Math.max(0,Math.min(1,(n-i)/a)),p=Math.max(0,Math.min(1,(d-r)/l));return[this.isLTR?h:1-h,p]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},i=E()||S(),n="Color Picker",d=b(i?void 0:"2d slider"),a=this.labelX,l=this.labelY,h=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),p=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),f={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return g`
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var s=(p,u,e,t)=>{for(var i=t>1?void 0:t?y(u,e):u,r=p.length-1,n;r>=0;r--)(n=p[r])&&(i=(t?n(u,e,i):n(i))||i);return t&&i&&m(u,e,i),i};import{html as g,SpectrumElement as w}from"@spectrum-web-components/base";import{ifDefined as v,styleMap as C}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as b}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as $}from"@spectrum-web-components/base/src/streaming-listener.js";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{ColorController as R}from"@spectrum-web-components/reactive-controllers/src/ColorController.js";import{LanguageResolutionController as x}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{isAndroid as E,isIOS as P}from"@spectrum-web-components/shared/src/platform.js";import L from"./color-area.css.js";export class ColorArea extends w{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.labelX="saturation";this.labelY="luminosity";this.languageResolver=new x(this);this.colorController=new R(this,{manageAs:"hsv"});this.activeAxis="x";this.step=.01;this.altered=0;this.activeKeys=new Set;this._valueChanged=!1;this._pointerDown=!1}static get styles(){return[L]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.colorValue}get color(){return this.colorController.colorValue}set color(e){this.colorController.color=e}get x(){return this.colorController.color.hsv.s/100}set x(e){if(e===this.x)return;const t=this.x;this.inputX?(this.inputX.value=e.toString(),this.colorController.color.set("s",this.inputX.valueAsNumber*100)):this.colorController.color.set("s",e*100),this.requestUpdate("x",t)}get y(){return this.colorController.color.hsv.v/100}set y(e){if(e===this.y)return;const t=this.y;this.inputY&&(this.inputY.value=e.toString(),this.colorController.color.set("v",this.inputY.valueAsNumber*100)),this.requestUpdate("y",t)}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(r=>!!r).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const i=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case"ArrowUp":t=i;break;case"ArrowDown":t=i*-1;break;case"ArrowLeft":e=this.step*(this.isLTR?-1:1);break;case"ArrowRight":e=this.step*(this.isLTR?1:-1);break;case"PageUp":t=i*10;break;case"PageDown":t=i*-10;break;case"Home":e=i*(this.isLTR?-10:10);break;case"End":e=i*(this.isLTR?10:-10);break;default:break}}),e!=0?(this.activeAxis="x",this.inputX.focus()):t!=0&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),(e!=0||t!=0)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:i}=e.target;this[i]=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,i]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=i,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,i=t.left,r=t.top,n=e.clientX,d=e.clientY,a=t.width,l=t.height,h=Math.max(0,Math.min(1,(n-i)/a)),c=Math.max(0,Math.min(1,(d-r)/l));return[this.isLTR?h:1-h,1-c]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},i=E()||P(),n="Color Picker",d=v(i?void 0:"2d slider"),a=this.labelX,l=this.labelY,h=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),c=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),f={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return g`
             <div
                 @pointerdown=${this.handleAreaPointerdown}
                 class="gradient"
@@ -8,19 +8,19 @@
             </div>
 
             <sp-color-handle
-                tabindex=${b(this.focused?void 0:"0")}
+                tabindex=${v(this.focused?void 0:"0")}
                 @focus=${this.forwardFocus}
                 ?focused=${this.focused}
                 class="handle"
                 color=${this.colorController.getHslString()}
                 ?disabled=${this.disabled}
                 style=${`transform: translate(${(this.isLTR?this.x:1-this.x)*e}px, ${t-this.y*t}px);`}
-                ${x({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
+                ${$({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
             ></sp-color-handle>
 
             <fieldset
                 class="fieldset"
-                aria-label=${b(i?n:void 0)}
+                aria-label=${v(i?n:void 0)}
             >
                 <div role="presentation">
                     <input
@@ -30,7 +30,7 @@
                         aria-label=${i?a:`${a} ${n}`}
                         aria-roledescription=${d}
                         aria-orientation="horizontal"
-                        aria-valuetext=${i?h:`${h}, ${a}${this._valueChanged?"":`, ${p}, ${l}`}`}
+                        aria-valuetext=${i?h:`${h}, ${a}${this._valueChanged?"":`, ${c}, ${l}`}`}
                         min="0"
                         max="1"
                         step=${this.step}
@@ -48,7 +48,7 @@
                         aria-label=${i?l:`${l} ${n}`}
                         aria-roledescription=${d}
                         aria-orientation="vertical"
-                        aria-valuetext=${i?p:`${p}, ${l}${this._valueChanged?"":`, ${h}, ${a}`}`}
+                        aria-valuetext=${i?c:`${c}, ${l}${this._valueChanged?"":`, ${h}, ${a}`}`}
                         orient="vertical"
                         min="0"
                         max="1"
@@ -60,5 +60,5 @@
                     />
                 </div>
             </fieldset>
-        `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),e.has("focused")&&this.focused){const t=this.inputX.parentElement,i=this.inputY.parentElement;if(!t.shadowRoot&&!i.shadowRoot){t.attachShadow({mode:"open"}),i.attachShadow({mode:"open"});const r='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=r,i.shadowRoot.innerHTML=r}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const i of t)this.boundingClientRect=i.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}s([o({type:String,reflect:!0})],ColorArea.prototype,"dir",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"disabled",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"focused",2),s([o({type:String,attribute:"label-x"})],ColorArea.prototype,"labelX",2),s([o({type:String,attribute:"label-y"})],ColorArea.prototype,"labelY",2),s([v(".handle")],ColorArea.prototype,"handle",2),s([o({type:Number})],ColorArea.prototype,"hue",1),s([o({type:String})],ColorArea.prototype,"value",1),s([o({type:String})],ColorArea.prototype,"color",1),s([o({attribute:!1})],ColorArea.prototype,"activeAxis",2),s([o({type:Number})],ColorArea.prototype,"x",1),s([o({type:Number})],ColorArea.prototype,"y",1),s([o({type:Number})],ColorArea.prototype,"step",2),s([v('[name="x"]')],ColorArea.prototype,"inputX",2),s([v('[name="y"]')],ColorArea.prototype,"inputY",2);
+        `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&this.colorController.color.set("s",this.inputX.valueAsNumber*100),this.y!==this.inputY.valueAsNumber&&this.colorController.color.set("v",(1-this.inputY.valueAsNumber)*100),e.has("focused")&&this.focused){const t=this.inputX.parentElement,i=this.inputY.parentElement;if(!t.shadowRoot&&!i.shadowRoot){t.attachShadow({mode:"open"}),i.attachShadow({mode:"open"});const r='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=r,i.shadowRoot.innerHTML=r}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const i of t)this.boundingClientRect=i.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}s([o({type:String,reflect:!0})],ColorArea.prototype,"dir",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"disabled",2),s([o({type:Boolean,reflect:!0})],ColorArea.prototype,"focused",2),s([o({type:String,attribute:"label-x"})],ColorArea.prototype,"labelX",2),s([o({type:String,attribute:"label-y"})],ColorArea.prototype,"labelY",2),s([b(".handle")],ColorArea.prototype,"handle",2),s([o({type:Number})],ColorArea.prototype,"hue",1),s([o({type:String})],ColorArea.prototype,"value",1),s([o({type:String})],ColorArea.prototype,"color",1),s([o({attribute:!1})],ColorArea.prototype,"activeAxis",2),s([o({type:Number})],ColorArea.prototype,"x",1),s([o({type:Number})],ColorArea.prototype,"y",1),s([o({type:Number})],ColorArea.prototype,"step",2),s([b('[name="x"]')],ColorArea.prototype,"inputX",2),s([b('[name="y"]')],ColorArea.prototype,"inputY",2);
 //# sourceMappingURL=ColorArea.js.map

package/src/ColorArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["ColorArea.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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n    ColorController,\n    ColorValue,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n    isAndroid,\n    isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, attribute: 'label-x' })\n    public labelX = 'saturation';\n\n    @property({ type: String, attribute: 'label-y' })\n    public labelY = 'luminosity';\n\n    @query('.handle')\n    private handle!: ColorHandle;\n\n    private languageResolver = new LanguageResolutionController(this);\n\n    private colorController = new ColorController(this, {\n        extractColorFromState: () => ({\n            h: this.hue,\n            s: this.x,\n            v: this.y,\n        }),\n        applyColorToState: ({ s, v }) => {\n            this._x = s;\n            this._y = v;\n            this.requestUpdate();\n        },\n    });\n\n    @property({ type: Number })\n    public get hue(): number {\n        return this.colorController.hue;\n    }\n\n    public set hue(value: number) {\n        this.colorController.hue = value;\n    }\n\n    @property({ type: String })\n    public get value(): ColorValue {\n        return this.colorController.color;\n    }\n\n    @property({ type: String })\n    public get color(): ColorValue {\n        return this.colorController.color;\n    }\n\n    public set color(color: ColorValue) {\n        this.colorController.color = color;\n    }\n\n    @property({ attribute: false })\n    private activeAxis = 'x';\n\n    @property({ type: Number })\n    public get x(): number {\n        return this._x;\n    }\n\n    public set x(x: number) {\n        if (x === this.x) {\n            return;\n        }\n        const oldValue = this.x;\n        this._x = x;\n        if (this.inputX) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputX.value = x.toString();\n            this._x = this.inputX.valueAsNumber;\n        }\n        this.requestUpdate('x', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _x = 1;\n\n    @property({ type: Number })\n    public get y(): number {\n        return this._y;\n    }\n\n    public set y(y: number) {\n        if (y === this.y) {\n            return;\n        }\n        const oldValue = this.y;\n        this._y = y;\n        if (this.inputY) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputY.value = y.toString();\n            this._y = this.inputY.valueAsNumber;\n        }\n        this.requestUpdate('y', oldValue);\n        this.colorController.applyColorFromState();\n    }\n\n    private _y = 1;\n\n    @property({ type: Number })\n    public step = 0.01;\n\n    @query('[name=\"x\"]')\n    public inputX!: HTMLInputElement;\n\n    @query('[name=\"y\"]')\n    public inputY!: HTMLInputElement;\n\n    private altered = 0;\n\n    private activeKeys = new Set();\n\n    private _valueChanged = false;\n\n    public override focus(focusOptions: FocusOptions = {}): void {\n        super.focus(focusOptions);\n        this.forwardFocus();\n    }\n\n    private forwardFocus(): void {\n        this.focused = this.hasVisibleFocusInTree();\n        if (this.activeAxis === 'x') {\n            this.inputX.focus();\n        } else {\n            this.inputY.focus();\n        }\n    }\n\n    private handleFocus(): void {\n        this.focused = true;\n        this._valueChanged = false;\n    }\n\n    public handleBlur(): void {\n        if (this._pointerDown) {\n            return;\n        }\n        this.altered = 0;\n        this.focused = false;\n        this._valueChanged = false;\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        this.focused = true;\n        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n            (key) => !!key\n        ).length;\n        const isArrowKey =\n            code.search('Arrow') === 0 ||\n            code.search('Page') === 0 ||\n            code.search('Home') === 0 ||\n            code.search('End') === 0;\n        if (isArrowKey) {\n            event.preventDefault();\n            this.activeKeys.add(code);\n            this.handleKeypress();\n        }\n    }\n\n    private handleKeypress(): void {\n        let deltaX = 0;\n        let deltaY = 0;\n        const step = Math.max(this.step, this.altered * 5 * this.step);\n        this.activeKeys.forEach((code) => {\n            switch (code) {\n                case 'ArrowUp':\n                    deltaY = step;\n                    break;\n                case 'ArrowDown':\n                    deltaY = step * -1;\n                    break;\n                case 'ArrowLeft':\n                    deltaX = this.step * (this.isLTR ? -1 : 1);\n                    break;\n                case 'ArrowRight':\n                    deltaX = this.step * (this.isLTR ? 1 : -1);\n                    break;\n                case 'PageUp':\n                    deltaY = step * 10;\n                    break;\n                case 'PageDown':\n                    deltaY = step * -10;\n                    break;\n                case 'Home':\n                    deltaX = step * (this.isLTR ? -10 : 10);\n                    break;\n                case 'End':\n                    deltaX = step * (this.isLTR ? 10 : -10);\n                    break;\n                /* c8 ignore next 2 */\n                default:\n                    break;\n            }\n        });\n        if (deltaX != 0) {\n            this.activeAxis = 'x';\n            this.inputX.focus();\n        } else if (deltaY != 0) {\n            this.activeAxis = 'y';\n            this.inputY.focus();\n        }\n        this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n        this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n        this.colorController.savePreviousColor();\n        this.colorController.applyColorFromState();\n\n        if (deltaX != 0 || deltaY != 0) {\n            this._valueChanged = true;\n            this.dispatchEvent(\n                new Event('input', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    bubbles: true,\n                    composed: true,\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.colorController.restorePreviousColor();\n            }\n        }\n    }\n\n    private handleKeyup(event: KeyboardEvent): void {\n        event.preventDefault();\n        const { code } = event;\n        this.activeKeys.delete(code);\n    }\n\n    private handleInput(event: Event & { target: HTMLInputElement }): void {\n        const { valueAsNumber, name } = event.target;\n\n        this[name as 'x' | 'y'] = valueAsNumber;\n        this.colorController.applyColorFromState();\n    }\n\n    private handleChange(event: Event & { target: HTMLInputElement }): void {\n        this.handleInput(event);\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private boundingClientRect!: DOMRect;\n    public _pointerDown = false;\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this._pointerDown = true;\n        this.colorController.savePreviousColor();\n        this.boundingClientRect = this.getBoundingClientRect();\n        (event.target as HTMLElement).setPointerCapture(event.pointerId);\n        if (event.pointerType === 'mouse') {\n            this.focused = true;\n        }\n    }\n\n    private handlePointermove(event: PointerEvent): void {\n        const [x, y] = this.calculateHandlePosition(event);\n\n        this._valueChanged = false;\n\n        this.x = x;\n        this.y = 1 - y;\n        this.colorController.applyColorFromState();\n        this.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private handlePointerup(event: PointerEvent): void {\n        event.preventDefault();\n        this._pointerDown = false;\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        this.inputX.focus();\n        if (event.pointerType === 'mouse') {\n            this.focused = false;\n        }\n        if (!applyDefault) {\n            this.colorController.restorePreviousColor();\n        }\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(event: PointerEvent): [number, number] {\n        /* c8 ignore next 3 */\n        if (!this.boundingClientRect) {\n            return [this.x, this.y];\n        }\n        const rect = this.boundingClientRect;\n        const minOffsetX = rect.left;\n        const minOffsetY = rect.top;\n        const offsetX = event.clientX;\n        const offsetY = event.clientY;\n        const width = rect.width;\n        const height = rect.height;\n\n        const percentX = Math.max(\n            0,\n            Math.min(1, (offsetX - minOffsetX) / width)\n        );\n        const percentY = Math.max(\n            0,\n            Math.min(1, (offsetY - minOffsetY) / height)\n        );\n\n        return [this.isLTR ? percentX : 1 - percentX, percentY];\n    }\n\n    private handleAreaPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n        this.handlePointermove(event);\n    }\n\n    protected override render(): TemplateResult {\n        const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n        const isMobile = isAndroid() || isIOS();\n        const defaultAriaLabel = 'Color Picker';\n        const ariaLabel = defaultAriaLabel;\n        const ariaRoleDescription = ifDefined(\n            isMobile ? undefined : '2d slider'\n        );\n\n        const ariaLabelX = this.labelX;\n        const ariaLabelY = this.labelY;\n        const ariaValueX = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.x);\n        const ariaValueY = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.y);\n\n        const style = {\n            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,\n        };\n\n        return html`\n            <div\n                @pointerdown=${this.handleAreaPointerdown}\n                class=\"gradient\"\n                style=${styleMap(style)}\n            >\n                <slot name=\"gradient\"></slot>\n            </div>\n\n            <sp-color-handle\n                tabindex=${ifDefined(this.focused ? undefined : '0')}\n                @focus=${this.forwardFocus}\n                ?focused=${this.focused}\n                class=\"handle\"\n                color=${this.colorController.getHslString()}\n                ?disabled=${this.disabled}\n                style=${`transform: translate(${\n                    (this.isLTR ? this.x : 1 - this.x) * width\n                }px, ${height - this.y * height}px);`}\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                })}\n            ></sp-color-handle>\n\n            <fieldset\n                class=\"fieldset\"\n                aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n            >\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"x\"\n                        aria-label=${isMobile\n                            ? ariaLabelX\n                            : `${ariaLabelX} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueX\n                            : `${ariaValueX}, ${ariaLabelX}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueY}, ${ariaLabelY}`\n                              }`}\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.x)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"y\"\n                        aria-label=${isMobile\n                            ? ariaLabelY\n                            : `${ariaLabelY} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"vertical\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueY\n                            : `${ariaValueY}, ${ariaLabelY}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueX}, ${ariaLabelX}`\n                              }`}\n                        orient=\"vertical\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.y)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n            </fieldset>\n        `;\n    }\n\n    protected override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n        this.boundingClientRect = this.getBoundingClientRect();\n\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n        this.addEventListener('keyup', this.handleKeyup);\n        this.addEventListener('keydown', this.handleKeydown);\n    }\n\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n        if (this.x !== this.inputX.valueAsNumber) {\n            this._x = this.inputX.valueAsNumber;\n        }\n        if (this.y !== this.inputY.valueAsNumber) {\n            this._y = this.inputY.valueAsNumber;\n        }\n        if (changed.has('focused') && this.focused) {\n            // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n            // so that browsers with certain settings (Webkit) aren't allowed\n            // multiple tab stops within the Color Area.\n            const parentX = this.inputX.parentElement as HTMLDivElement;\n            const parentY = this.inputY.parentElement as HTMLDivElement;\n            if (!parentX.shadowRoot && !parentY.shadowRoot) {\n                parentX.attachShadow({ mode: 'open' });\n                parentY.attachShadow({ mode: 'open' });\n                const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n                (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n                (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n            }\n        }\n    }\n\n    private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (\n            !this.observer &&\n            (window as unknown as WithSWCResizeObserver).ResizeObserver\n        ) {\n            this.observer = new (\n                window as unknown as WithSWCResizeObserver\n            ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n                for (const entry of entries) {\n                    this.boundingClientRect = entry.contentRect;\n                }\n                this.requestUpdate();\n            });\n        }\n        this.observer?.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.observer?.unobserve(this);\n        super.disconnectedCallback();\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OACI,aAAAC,EACA,YAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,qBAAAC,MAAyB,0DAGlC,MAAO,2DACP,OACI,mBAAAC,MAEG,6DACP,OAAS,gCAAAC,MAAoC,0EAC7C,OACI,aAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAY,sBAQZ,aAAM,kBAAkBV,CAAgB,CAAxC,kCASH,KAAO,SAAW,GAGlB,KAAO,QAAU,GAGjB,KAAO,OAAS,aAGhB,KAAO,OAAS,aAKhB,KAAQ,iBAAmB,IAAIO,EAA6B,IAAI,EAEhE,KAAQ,gBAAkB,IAAID,EAAgB,KAAM,CAChD,sBAAuB,KAAO,CAC1B,EAAG,KAAK,IACR,EAAG,KAAK,EACR,EAAG,KAAK,CACZ,GACA,kBAAmB,CAAC,CAAE,EAAAK,EAAG,EAAAC,CAAE,IAAM,CAC7B,KAAK,GAAKD,EACV,KAAK,GAAKC,EACV,KAAK,cAAc,CACvB,CACJ,CAAC,EA0BD,KAAQ,WAAa,IAsBrB,KAAQ,GAAK,EAsBb,KAAQ,GAAK,EAGb,KAAO,KAAO,IAQd,KAAQ,QAAU,EAElB,KAAQ,WAAa,IAAI,IAEzB,KAAQ,cAAgB,GA8IxB,KAAO,aAAe,GAtQtB,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAM,CAClB,CAoCA,IAAW,KAAc,CACrB,OAAO,KAAK,gBAAgB,GAChC,CAEA,IAAW,IAAIG,EAAe,CAC1B,KAAK,gBAAgB,IAAMA,CAC/B,CAGA,IAAW,OAAoB,CAC3B,OAAO,KAAK,gBAAgB,KAChC,CAGA,IAAW,OAAoB,CAC3B,OAAO,KAAK,gBAAgB,KAChC,CAEA,IAAW,MAAMC,EAAmB,CAChC,KAAK,gBAAgB,MAAQA,CACjC,CAMA,IAAW,GAAY,CACnB,OAAO,KAAK,EAChB,CAEA,IAAW,EAAEC,EAAW,CACpB,GAAIA,IAAM,KAAK,EACX,OAEJ,MAAMC,EAAW,KAAK,EACtB,KAAK,GAAKD,EACN,KAAK,SAEL,KAAK,OAAO,MAAQA,EAAE,SAAS,EAC/B,KAAK,GAAK,KAAK,OAAO,eAE1B,KAAK,cAAc,IAAKC,CAAQ,EAChC,KAAK,gBAAgB,oBAAoB,CAC7C,CAKA,IAAW,GAAY,CACnB,OAAO,KAAK,EAChB,CAEA,IAAW,EAAEC,EAAW,CACpB,GAAIA,IAAM,KAAK,EACX,OAEJ,MAAMD,EAAW,KAAK,EACtB,KAAK,GAAKC,EACN,KAAK,SAEL,KAAK,OAAO,MAAQA,EAAE,SAAS,EAC/B,KAAK,GAAK,KAAK,OAAO,eAE1B,KAAK,cAAc,IAAKD,CAAQ,EAChC,KAAK,gBAAgB,oBAAoB,CAC7C,CAmBgB,MAAME,EAA6B,CAAC,EAAS,CACzD,MAAM,MAAMA,CAAY,EACxB,KAAK,aAAa,CACtB,CAEQ,cAAqB,CACzB,KAAK,QAAU,KAAK,sBAAsB,EACtC,KAAK,aAAe,IACpB,KAAK,OAAO,MAAM,EAElB,KAAK,OAAO,MAAM,CAE1B,CAEQ,aAAoB,CACxB,KAAK,QAAU,GACf,KAAK,cAAgB,EACzB,CAEO,YAAmB,CAClB,KAAK,eAGT,KAAK,QAAU,EACf,KAAK,QAAU,GACf,KAAK,cAAgB,GACzB,CAEQ,cAAcC,EAA4B,CAC9C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,KAAK,QAAU,GACf,KAAK,QAAU,CAACA,EAAM,SAAUA,EAAM,QAASA,EAAM,MAAM,EAAE,OACxDE,GAAQ,CAAC,CAACA,CACf,EAAE,QAEED,EAAK,OAAO,OAAO,IAAM,GACzBA,EAAK,OAAO,MAAM,IAAM,GACxBA,EAAK,OAAO,MAAM,IAAM,GACxBA,EAAK,OAAO,KAAK,IAAM,KAEvBD,EAAM,eAAe,EACrB,KAAK,WAAW,IAAIC,CAAI,EACxB,KAAK,eAAe,EAE5B,CAEQ,gBAAuB,CAC3B,IAAIE,EAAS,EACTC,EAAS,EACb,MAAMC,EAAO,KAAK,IAAI,KAAK,KAAM,KAAK,QAAU,EAAI,KAAK,IAAI,EAC7D,KAAK,WAAW,QAASJ,GAAS,CAC9B,OAAQA,EAAM,CACV,IAAK,UACDG,EAASC,EACT,MACJ,IAAK,YACDD,EAASC,EAAO,GAChB,MACJ,IAAK,YACDF,EAAS,KAAK,MAAQ,KAAK,MAAQ,GAAK,GACxC,MACJ,IAAK,aACDA,EAAS,KAAK,MAAQ,KAAK,MAAQ,EAAI,IACvC,MACJ,IAAK,SACDC,EAASC,EAAO,GAChB,MACJ,IAAK,WACDD,EAASC,EAAO,IAChB,MACJ,IAAK,OACDF,EAASE,GAAQ,KAAK,MAAQ,IAAM,IACpC,MACJ,IAAK,MACDF,EAASE,GAAQ,KAAK,MAAQ,GAAK,KACnC,MAEJ,QACI,KACR,CACJ,CAAC,EACGF,GAAU,GACV,KAAK,WAAa,IAClB,KAAK,OAAO,MAAM,GACXC,GAAU,IACjB,KAAK,WAAa,IAClB,KAAK,OAAO,MAAM,GAEtB,KAAK,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,KAAK,EAAID,EAAQ,CAAC,CAAC,EACjD,KAAK,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,KAAK,EAAIC,EAAQ,CAAC,CAAC,EAEjD,KAAK,gBAAgB,kBAAkB,EACvC,KAAK,gBAAgB,oBAAoB,GAErCD,GAAU,GAAKC,GAAU,KACzB,KAAK,cAAgB,GACrB,KAAK,cACD,IAAI,MAAM,QAAS,CACf,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACqB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,GACV,WAAY,EAChB,CAAC,CACL,GAEI,KAAK,gBAAgB,qBAAqB,EAGtD,CAEQ,YAAYJ,EAA4B,CAC5CA,EAAM,eAAe,EACrB,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,KAAK,WAAW,OAAOC,CAAI,CAC/B,CAEQ,YAAYD,EAAmD,CACnE,KAAM,CAAE,cAAAM,EAAe,KAAAC,CAAK,EAAIP,EAAM,OAEtC,KAAKO,CAAiB,EAAID,EAC1B,KAAK,gBAAgB,oBAAoB,CAC7C,CAEQ,aAAaN,EAAmD,CACpE,KAAK,YAAYA,CAAK,EACtB,KAAK,cACD,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,GACV,WAAY,EAChB,CAAC,CACL,CACJ,CAKQ,kBAAkBA,EAA2B,CACjD,GAAIA,EAAM,SAAW,EAAG,CACpBA,EAAM,eAAe,EACrB,MACJ,CACA,KAAK,aAAe,GACpB,KAAK,gBAAgB,kBAAkB,EACvC,KAAK,mBAAqB,KAAK,sBAAsB,EACpDA,EAAM,OAAuB,kBAAkBA,EAAM,SAAS,EAC3DA,EAAM,cAAgB,UACtB,KAAK,QAAU,GAEvB,CAEQ,kBAAkBA,EAA2B,CACjD,KAAM,CAACJ,EAAGE,CAAC,EAAI,KAAK,wBAAwBE,CAAK,EAEjD,KAAK,cAAgB,GAErB,KAAK,EAAIJ,EACT,KAAK,EAAI,EAAIE,EACb,KAAK,gBAAgB,oBAAoB,EACzC,KAAK,cACD,IAAI,MAAM,QAAS,CACf,QAAS,GACT,SAAU,GACV,WAAY,EAChB,CAAC,CACL,CACJ,CAEQ,gBAAgBE,EAA2B,CAC/CA,EAAM,eAAe,EACrB,KAAK,aAAe,GACnBA,EAAM,OAAuB,sBAAsBA,EAAM,SAAS,EACnE,MAAMQ,EAAe,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,GACV,WAAY,EAChB,CAAC,CACL,EACA,KAAK,OAAO,MAAM,EACdR,EAAM,cAAgB,UACtB,KAAK,QAAU,IAEdQ,GACD,KAAK,gBAAgB,qBAAqB,CAElD,CAOQ,wBAAwBR,EAAuC,CAEnE,GAAI,CAAC,KAAK,mBACN,MAAO,CAAC,KAAK,EAAG,KAAK,CAAC,EAE1B,MAAMS,EAAO,KAAK,mBACZC,EAAaD,EAAK,KAClBE,EAAaF,EAAK,IAClBG,EAAUZ,EAAM,QAChBa,EAAUb,EAAM,QAChBc,EAAQL,EAAK,MACbM,EAASN,EAAK,OAEdO,EAAW,KAAK,IAClB,EACA,KAAK,IAAI,GAAIJ,EAAUF,GAAcI,CAAK,CAC9C,EACMG,EAAW,KAAK,IAClB,EACA,KAAK,IAAI,GAAIJ,EAAUF,GAAcI,CAAM,CAC/C,EAEA,MAAO,CAAC,KAAK,MAAQC,EAAW,EAAIA,EAAUC,CAAQ,CAC1D,CAEQ,sBAAsBjB,EAA2B,CACjDA,EAAM,SAAW,IAGrBA,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrB,KAAK,OAAO,cAAc,IAAI,aAAa,cAAeA,CAAK,CAAC,EAChE,KAAK,kBAAkBA,CAAK,EAChC,CAEmB,QAAyB,CACxC,KAAM,CAAE,MAAAc,EAAQ,EAAG,OAAAC,EAAS,CAAE,EAAI,KAAK,oBAAsB,CAAC,EAExDG,EAAW7B,EAAU,GAAKC,EAAM,EAEhC6B,EADmB,eAEnBC,EAAsBtC,EACxBoC,EAAW,OAAY,WAC3B,EAEMG,EAAa,KAAK,OAClBC,EAAa,KAAK,OAClBC,EAAa,IAAI,KAAK,aACxB,KAAK,iBAAiB,SACtB,CACI,MAAO,UACP,YAAa,QACjB,CACJ,EAAE,OAAO,KAAK,CAAC,EACTC,EAAa,IAAI,KAAK,aACxB,KAAK,iBAAiB,SACtB,CACI,MAAO,UACP,YAAa,QACjB,CACJ,EAAE,OAAO,KAAK,CAAC,EAETC,EAAQ,CACV,WAAY,0CAA0C,KAAK,GAAG,oEAAoE,KAAK,GAAG,gCAAgC,KAAK,GAAG,eACtL,EAEA,OAAO7C;AAAA;AAAA,+BAEgB,KAAK,qBAAqB;AAAA;AAAA,wBAEjCG,EAAS0C,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAMZ3C,EAAU,KAAK,QAAU,OAAY,GAAG,CAAC;AAAA,yBAC3C,KAAK,YAAY;AAAA,2BACf,KAAK,OAAO;AAAA;AAAA,wBAEf,KAAK,gBAAgB,aAAa,CAAC;AAAA,4BAC/B,KAAK,QAAQ;AAAA,wBACjB,yBACH,KAAK,MAAQ,KAAK,EAAI,EAAI,KAAK,GAAKgC,CACzC,OAAOC,EAAS,KAAK,EAAIA,CAAM,MAAM;AAAA,kBACnC7B,EAAkB,CAChB,MAAO,CAAC,cAAe,KAAK,iBAAiB,EAC7C,aAAc,CAAC,cAAe,KAAK,iBAAiB,EACpD,IAAK,CACD,CAAC,YAAa,gBAAiB,cAAc,EAC7C,KAAK,eACT,CACJ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKWJ,EAAUoC,EAAWC,EAAY,MAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAOnCD,EACPG,EACA,GAAGA,CAAU,IAAIF,CAAS,EAAE;AAAA,+CACXC,CAAmB;AAAA;AAAA,yCAEzBF,EACXK,EACA,GAAGA,CAAU,KAAKF,CAAU,GACxB,KAAK,cACC,GACA,KAAKG,CAAU,KAAKF,CAAU,EACxC,EAAE;AAAA;AAAA;AAAA,+BAGD,KAAK,IAAI;AAAA;AAAA,iCAEP,OAAO,KAAK,CAAC,CAAC;AAAA,iCACd,KAAK,WAAW;AAAA,kCACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAQdJ,EACPI,EACA,GAAGA,CAAU,IAAIH,CAAS,EAAE;AAAA,+CACXC,CAAmB;AAAA;AAAA,yCAEzBF,EACXM,EACA,GAAGA,CAAU,KAAKF,CAAU,GACxB,KAAK,cACC,GACA,KAAKC,CAAU,KAAKF,CAAU,EACxC,EAAE;AAAA;AAAA;AAAA;AAAA,+BAID,KAAK,IAAI;AAAA;AAAA,iCAEP,OAAO,KAAK,CAAC,CAAC;AAAA,iCACd,KAAK,WAAW;AAAA,kCACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,SAK/C,CAEmB,aAAaK,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,mBAAqB,KAAK,sBAAsB,EAErD,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,iBAAiB,OAAQ,KAAK,UAAU,EAC7C,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,CAEmB,QAAQA,EAA+B,CAQtD,GAPA,MAAM,QAAQA,CAAO,EACjB,KAAK,IAAM,KAAK,OAAO,gBACvB,KAAK,GAAK,KAAK,OAAO,eAEtB,KAAK,IAAM,KAAK,OAAO,gBACvB,KAAK,GAAK,KAAK,OAAO,eAEtBA,EAAQ,IAAI,SAAS,GAAK,KAAK,QAAS,CAIxC,MAAMC,EAAU,KAAK,OAAO,cACtBC,EAAU,KAAK,OAAO,cAC5B,GAAI,CAACD,EAAQ,YAAc,CAACC,EAAQ,WAAY,CAC5CD,EAAQ,aAAa,CAAE,KAAM,MAAO,CAAC,EACrCC,EAAQ,aAAa,CAAE,KAAM,MAAO,CAAC,EACrC,MAAMC,EAAO,yCACZF,EAAQ,WAAqC,UAAYE,EACzDD,EAAQ,WAAqC,UAAYC,CAC9D,CACJ,CACJ,CAIgB,mBAA0B,CAljB9C,IAAAC,EAmjBQ,MAAM,kBAAkB,EAEpB,CAAC,KAAK,UACL,OAA4C,iBAE7C,KAAK,SAAW,IACZ,OACF,eAAgBC,GAAsC,CACpD,UAAWC,KAASD,EAChB,KAAK,mBAAqBC,EAAM,YAEpC,KAAK,cAAc,CACvB,CAAC,IAELF,EAAA,KAAK,WAAL,MAAAA,EAAe,QAAQ,KAC3B,CAEgB,sBAA6B,CApkBjD,IAAAA,GAqkBQA,EAAA,KAAK,WAAL,MAAAA,EAAe,UAAU,MACzB,MAAM,qBAAqB,CAC/B,CACJ,CAjhBoBG,EAAA,CADfjD,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GALhC,UAMO,mBAGTiD,EAAA,CADNjD,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARjC,UASF,wBAGAiD,EAAA,CADNjD,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,UAYF,uBAGAiD,EAAA,CADNjD,EAAS,CAAE,KAAM,OAAQ,UAAW,SAAU,CAAC,GAdvC,UAeF,sBAGAiD,EAAA,CADNjD,EAAS,CAAE,KAAM,OAAQ,UAAW,SAAU,CAAC,GAjBvC,UAkBF,sBAGCiD,EAAA,CADPhD,EAAM,SAAS,GApBP,UAqBD,sBAkBGgD,EAAA,CADVjD,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCjB,UAuCE,mBASAiD,EAAA,CADVjD,EAAS,CAAE,KAAM,MAAO,CAAC,GA/CjB,UAgDE,qBAKAiD,EAAA,CADVjD,EAAS,CAAE,KAAM,MAAO,CAAC,GApDjB,UAqDE,qBASHiD,EAAA,CADPjD,EAAS,CAAE,UAAW,EAAM,CAAC,GA7DrB,UA8DD,0BAGGiD,EAAA,CADVjD,EAAS,CAAE,KAAM,MAAO,CAAC,GAhEjB,UAiEE,iBAsBAiD,EAAA,CADVjD,EAAS,CAAE,KAAM,MAAO,CAAC,GAtFjB,UAuFE,iBAsBJiD,EAAA,CADNjD,EAAS,CAAE,KAAM,MAAO,CAAC,GA5GjB,UA6GF,oBAGAiD,EAAA,CADNhD,EAAM,YAAY,GA/GV,UAgHF,sBAGAgD,EAAA,CADNhD,EAAM,YAAY,GAlHV,UAmHF",
-  "names": ["html", "SpectrumElement", "ifDefined", "styleMap", "property", "query", "streamingListener", "ColorController", "LanguageResolutionController", "isAndroid", "isIOS", "styles", "s", "v", "value", "color", "x", "oldValue", "y", "focusOptions", "event", "code", "key", "deltaX", "deltaY", "step", "valueAsNumber", "name", "applyDefault", "rect", "minOffsetX", "minOffsetY", "offsetX", "offsetY", "width", "height", "percentX", "percentY", "isMobile", "ariaLabel", "ariaRoleDescription", "ariaLabelX", "ariaLabelY", "ariaValueX", "ariaValueY", "style", "changed", "parentX", "parentY", "slot", "_a", "entries", "entry", "__decorateClass"]
+  "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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\n\nimport {\n    ColorController,\n    ColorTypes,\n} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n    isAndroid,\n    isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: String, reflect: true })\n    public override dir!: 'ltr' | 'rtl';\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @property({ type: String, attribute: 'label-x' })\n    public labelX = 'saturation';\n\n    @property({ type: String, attribute: 'label-y' })\n    public labelY = 'luminosity';\n\n    @query('.handle')\n    private handle!: ColorHandle;\n\n    private languageResolver = new LanguageResolutionController(this);\n\n    /**\n     * A controller for managing color interactions within the ColorArea component.\n     *\n     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`\n     * because the ColorArea component is designed to manipulate the saturation (`s`)\n     * and value (`v`) components of the HSV color model along the x and y axes,\n     * respectively. In the HSV color model:\n     *\n     * - The `hue` (h) represents the color type and is typically controlled by a separate input.\n     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).\n     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).\n     *\n     * In the ColorArea component:\n     *\n     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.\n     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.\n     *\n     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value\n     * as the user interacts with the ColorArea component.\n     *\n     * @private\n     * @type {ColorController}\n     * @memberof ColorArea\n     *\n     * @property {ColorArea} this - The instance of the ColorArea component.\n     * @property {Object} options - Configuration options for the ColorController.\n     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.\n     */\n    private colorController = new ColorController(this, { manageAs: 'hsv' });\n\n    @property({ type: Number })\n    public get hue(): number {\n        return this.colorController.hue;\n    }\n\n    public set hue(value: number) {\n        this.colorController.hue = value;\n    }\n\n    @property({ type: String })\n    public get value(): ColorTypes {\n        return this.colorController.colorValue;\n    }\n\n    @property({ type: String })\n    public get color(): ColorTypes {\n        return this.colorController.colorValue;\n    }\n\n    public set color(color: ColorTypes) {\n        this.colorController.color = color;\n    }\n\n    @property({ attribute: false })\n    private activeAxis = 'x';\n\n    @property({ type: Number })\n    public get x(): number {\n        return this.colorController.color.hsv.s / 100;\n    }\n\n    public set x(x: number) {\n        if (x === this.x) {\n            return;\n        }\n        const oldValue = this.x;\n        if (this.inputX) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputX.value = x.toString();\n            this.colorController.color.set(\n                's',\n                this.inputX.valueAsNumber * 100\n            );\n        } else {\n            this.colorController.color.set('s', x * 100);\n        }\n        this.requestUpdate('x', oldValue);\n    }\n\n    @property({ type: Number })\n    public get y(): number {\n        return this.colorController.color.hsv.v / 100;\n    }\n\n    public set y(y: number) {\n        if (y === this.y) {\n            return;\n        }\n        const oldValue = this.y;\n        if (this.inputY) {\n            // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n            this.inputY.value = y.toString();\n            this.colorController.color.set(\n                'v',\n                this.inputY.valueAsNumber * 100\n            );\n        }\n        this.requestUpdate('y', oldValue);\n    }\n\n    @property({ type: Number })\n    public step = 0.01;\n\n    @query('[name=\"x\"]')\n    public inputX!: HTMLInputElement;\n\n    @query('[name=\"y\"]')\n    public inputY!: HTMLInputElement;\n\n    private altered = 0;\n\n    private activeKeys = new Set();\n\n    private _valueChanged = false;\n\n    public override focus(focusOptions: FocusOptions = {}): void {\n        super.focus(focusOptions);\n        this.forwardFocus();\n    }\n\n    private forwardFocus(): void {\n        this.focused = this.hasVisibleFocusInTree();\n        if (this.activeAxis === 'x') {\n            this.inputX.focus();\n        } else {\n            this.inputY.focus();\n        }\n    }\n\n    private handleFocus(): void {\n        this.focused = true;\n        this._valueChanged = false;\n    }\n\n    public handleBlur(): void {\n        if (this._pointerDown) {\n            return;\n        }\n        this.altered = 0;\n        this.focused = false;\n        this._valueChanged = false;\n    }\n\n    private handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        this.focused = true;\n\n        this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n            (key) => !!key\n        ).length;\n        const isArrowKey =\n            code.search('Arrow') === 0 ||\n            code.search('Page') === 0 ||\n            code.search('Home') === 0 ||\n            code.search('End') === 0;\n        if (isArrowKey) {\n            event.preventDefault();\n            this.activeKeys.add(code);\n            this.handleKeypress();\n        }\n    }\n\n    private handleKeypress(): void {\n        let deltaX = 0;\n        let deltaY = 0;\n        const step = Math.max(this.step, this.altered * 5 * this.step);\n        this.activeKeys.forEach((code) => {\n            switch (code) {\n                case 'ArrowUp':\n                    deltaY = step;\n                    break;\n                case 'ArrowDown':\n                    deltaY = step * -1;\n                    break;\n                case 'ArrowLeft':\n                    deltaX = this.step * (this.isLTR ? -1 : 1);\n                    break;\n                case 'ArrowRight':\n                    deltaX = this.step * (this.isLTR ? 1 : -1);\n                    break;\n                case 'PageUp':\n                    deltaY = step * 10;\n                    break;\n                case 'PageDown':\n                    deltaY = step * -10;\n                    break;\n                case 'Home':\n                    deltaX = step * (this.isLTR ? -10 : 10);\n                    break;\n                case 'End':\n                    deltaX = step * (this.isLTR ? 10 : -10);\n                    break;\n                /* c8 ignore next 2 */\n                default:\n                    break;\n            }\n        });\n        if (deltaX != 0) {\n            this.activeAxis = 'x';\n            this.inputX.focus();\n        } else if (deltaY != 0) {\n            this.activeAxis = 'y';\n            this.inputY.focus();\n        }\n        this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n        this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n        this.colorController.savePreviousColor();\n\n        if (deltaX != 0 || deltaY != 0) {\n            this._valueChanged = true;\n            this.dispatchEvent(\n                new Event('input', {\n                    bubbles: true,\n                    composed: true,\n                })\n            );\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    bubbles: true,\n                    composed: true,\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.colorController.restorePreviousColor();\n            }\n        }\n    }\n\n    private handleKeyup(event: KeyboardEvent): void {\n        event.preventDefault();\n        const { code } = event;\n        this.activeKeys.delete(code);\n    }\n\n    private handleInput(event: Event & { target: HTMLInputElement }): void {\n        const { valueAsNumber, name } = event.target;\n\n        this[name as 'x' | 'y'] = valueAsNumber;\n    }\n\n    private handleChange(event: Event & { target: HTMLInputElement }): void {\n        this.handleInput(event);\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private boundingClientRect!: DOMRect;\n    public _pointerDown = false;\n\n    private handlePointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this._pointerDown = true;\n        this.colorController.savePreviousColor();\n        this.boundingClientRect = this.getBoundingClientRect();\n        (event.target as HTMLElement).setPointerCapture(event.pointerId);\n        if (event.pointerType === 'mouse') {\n            this.focused = true;\n        }\n    }\n\n    private handlePointermove(event: PointerEvent): void {\n        const [x, y] = this.calculateHandlePosition(event);\n\n        this._valueChanged = false;\n\n        this.x = x;\n        this.y = y;\n\n        this.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n    }\n\n    private handlePointerup(event: PointerEvent): void {\n        event.preventDefault();\n        this._pointerDown = false;\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        this.inputX.focus();\n        if (event.pointerType === 'mouse') {\n            this.focused = false;\n        }\n        if (!applyDefault) {\n            this.colorController.restorePreviousColor();\n        }\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(event: PointerEvent): [number, number] {\n        /* c8 ignore next 3 */\n        if (!this.boundingClientRect) {\n            return [this.x, this.y];\n        }\n        const rect = this.boundingClientRect;\n        const minOffsetX = rect.left;\n        const minOffsetY = rect.top;\n        const offsetX = event.clientX;\n        const offsetY = event.clientY;\n        const width = rect.width;\n        const height = rect.height;\n\n        const percentX = Math.max(\n            0,\n            Math.min(1, (offsetX - minOffsetX) / width)\n        );\n        const percentY = Math.max(\n            0,\n            Math.min(1, (offsetY - minOffsetY) / height)\n        );\n\n        return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];\n    }\n\n    private handleAreaPointerdown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n        this.handlePointermove(event);\n    }\n\n    protected override render(): TemplateResult {\n        const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n        const isMobile = isAndroid() || isIOS();\n        const defaultAriaLabel = 'Color Picker';\n        const ariaLabel = defaultAriaLabel;\n        const ariaRoleDescription = ifDefined(\n            isMobile ? undefined : '2d slider'\n        );\n\n        const ariaLabelX = this.labelX;\n        const ariaLabelY = this.labelY;\n        const ariaValueX = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.x);\n        const ariaValueY = new Intl.NumberFormat(\n            this.languageResolver.language,\n            {\n                style: 'percent',\n                unitDisplay: 'narrow',\n            }\n        ).format(this.y);\n\n        const style = {\n            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,\n        };\n\n        return html`\n            <div\n                @pointerdown=${this.handleAreaPointerdown}\n                class=\"gradient\"\n                style=${styleMap(style)}\n            >\n                <slot name=\"gradient\"></slot>\n            </div>\n\n            <sp-color-handle\n                tabindex=${ifDefined(this.focused ? undefined : '0')}\n                @focus=${this.forwardFocus}\n                ?focused=${this.focused}\n                class=\"handle\"\n                color=${this.colorController.getHslString()}\n                ?disabled=${this.disabled}\n                style=${`transform: translate(${\n                    (this.isLTR ? this.x : 1 - this.x) * width\n                }px, ${height - this.y * height}px);`}\n                ${streamingListener({\n                    start: ['pointerdown', this.handlePointerdown],\n                    streamInside: ['pointermove', this.handlePointermove],\n                    end: [\n                        ['pointerup', 'pointercancel', 'pointerleave'],\n                        this.handlePointerup,\n                    ],\n                })}\n            ></sp-color-handle>\n\n            <fieldset\n                class=\"fieldset\"\n                aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n            >\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"x\"\n                        aria-label=${isMobile\n                            ? ariaLabelX\n                            : `${ariaLabelX} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueX\n                            : `${ariaValueX}, ${ariaLabelX}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueY}, ${ariaLabelY}`\n                              }`}\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.x)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n                <div role=\"presentation\">\n                    <input\n                        type=\"range\"\n                        class=\"slider\"\n                        name=\"y\"\n                        aria-label=${isMobile\n                            ? ariaLabelY\n                            : `${ariaLabelY} ${ariaLabel}`}\n                        aria-roledescription=${ariaRoleDescription}\n                        aria-orientation=\"vertical\"\n                        aria-valuetext=${isMobile\n                            ? ariaValueY\n                            : `${ariaValueY}, ${ariaLabelY}${\n                                  this._valueChanged\n                                      ? ''\n                                      : `, ${ariaValueX}, ${ariaLabelX}`\n                              }`}\n                        orient=\"vertical\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=${this.step}\n                        tabindex=\"-1\"\n                        .value=${String(this.y)}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                    />\n                </div>\n            </fieldset>\n        `;\n    }\n\n    protected override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n        this.boundingClientRect = this.getBoundingClientRect();\n\n        this.addEventListener('focus', this.handleFocus);\n        this.addEventListener('blur', this.handleBlur);\n        this.addEventListener('keyup', this.handleKeyup);\n        this.addEventListener('keydown', this.handleKeydown);\n    }\n\n    /**\n     * Overrides the `updated` method to handle changes in property values.\n     *\n     * @param changed - A map of changed properties with their previous values.\n     *\n     * This method performs the following actions:\n     * - Updates the saturation (`s`) of the color if `x` has changed.\n     * - Updates the value (`v`) of the color if `y` has changed.\n     * - If the `focused` property has changed and is now true, it lazily binds\n     *   the `input[type=\"range\"]` elements in shadow roots to prevent multiple\n     *   tab stops within the Color Area for certain browser settings (e.g., Webkit).\n     */\n    protected override updated(changed: PropertyValues): void {\n        super.updated(changed);\n        if (this.x !== this.inputX.valueAsNumber) {\n            this.colorController.color.set(\n                's',\n                this.inputX.valueAsNumber * 100\n            );\n        }\n        if (this.y !== this.inputY.valueAsNumber) {\n            this.colorController.color.set(\n                'v',\n                (1 - this.inputY.valueAsNumber) * 100\n            );\n        }\n        if (changed.has('focused') && this.focused) {\n            // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n            // so that browsers with certain settings (Webkit) aren't allowed\n            // multiple tab stops within the Color Area.\n            const parentX = this.inputX.parentElement as HTMLDivElement;\n            const parentY = this.inputY.parentElement as HTMLDivElement;\n            if (!parentX.shadowRoot && !parentY.shadowRoot) {\n                parentX.attachShadow({ mode: 'open' });\n                parentY.attachShadow({ mode: 'open' });\n                const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n                (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n                (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n            }\n        }\n    }\n\n    private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (\n            !this.observer &&\n            (window as unknown as WithSWCResizeObserver).ResizeObserver\n        ) {\n            this.observer = new (\n                window as unknown as WithSWCResizeObserver\n            ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n                for (const entry of entries) {\n                    this.boundingClientRect = entry.contentRect;\n                }\n                this.requestUpdate();\n            });\n        }\n        this.observer?.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.observer?.unobserve(this);\n        super.disconnectedCallback();\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SpectrumElement", "ifDefined", "styleMap", "property", "query", "streamingListener", "ColorController", "LanguageResolutionController", "isAndroid", "isIOS", "styles", "value", "color", "x", "oldValue", "y", "focusOptions", "event", "code", "key", "deltaX", "deltaY", "step", "valueAsNumber", "name", "applyDefault", "rect", "minOffsetX", "minOffsetY", "offsetX", "offsetY", "width", "height", "percentX", "percentY", "isMobile", "ariaLabel", "ariaRoleDescription", "ariaLabelX", "ariaLabelY", "ariaValueX", "ariaValueY", "style", "changed", "parentX", "parentY", "slot", "_a", "entries", "entry", "__decorateClass"]
 }

package/stories/color-area.stories.js

@@ -10,10 +10,10 @@ export default {
     onChange: { action: "change" },
     color: {
       name: "color",
-      type: { name: "ColorValue", required: "true" },
+      type: { name: "ColorTypes", required: "true" },
       description: "The color displayed by the ColorArea.",
       table: {
-        type: { summary: "ColorValue" },
+        type: { summary: "ColorTypes" },
         defaultValue: { summary: "" }
       },
       control: "text"
@@ -23,6 +23,7 @@ export default {
 export const Default = ({ onChange, onInput }) => {
   return html`
         <sp-color-area
+            color="#ff0000"
             @input=${({ target }) => {
     const next = target.nextElementSibling;
     next.textContent = target.color;
@@ -36,6 +37,15 @@ export const Default = ({ onChange, onInput }) => {
         <div style="color: #ff0000" aria-live="off">#ff0000</div>
     `;
 };
+export const appliedValues = () => {
+  return html`
+        <sp-color-area
+            .color=${{ space: "hsv", coords: [250, 90, 80] }}
+        ></sp-color-area>
+        <sp-color-area color="hsv(250, 90%, 80%)"></sp-color-area>
+        <sp-color-area hue="250" x="0.1" y="0.1"></sp-color-area>
+    `;
+};
 export const joint = () => {
   return html`
         <div>

package/stories/color-area.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["color-area.stories.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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/color-slider/sp-color-slider.js';\nimport { ColorSlider } from '@spectrum-web-components/color-slider/src/ColorSlider';\nimport '@spectrum-web-components/color-area/sp-color-area.js';\nimport { ColorArea } from '@spectrum-web-components/color-area/src/ColorArea.js';\n\nexport default {\n    title: 'Color/Area',\n    component: 'sp-color-area',\n    argTypes: {\n        onInput: { action: 'input' },\n        onChange: { action: 'change' },\n        color: {\n            name: 'color',\n            type: { name: 'ColorValue', required: 'true' },\n            description: 'The color displayed by the ColorArea.',\n            table: {\n                type: { summary: 'ColorValue' },\n                defaultValue: { summary: '' },\n            },\n            control: 'text',\n        },\n    },\n};\n\ntype StoryArgs = {\n    onInput: (val: string) => void;\n    onChange: (val: string) => void;\n};\n\nexport const Default = ({ onChange, onInput }: StoryArgs): TemplateResult => {\n    return html`\n        <sp-color-area\n            @input=${({ target }: Event & { target: ColorArea }) => {\n                const next = target.nextElementSibling as HTMLElement;\n                next.textContent = target.color as string;\n                next.style.color = target.color as string;\n                onInput(target.value as string);\n            }}\n            @change=${({ target }: Event & { target: ColorArea }) => {\n                onChange(target.value as string);\n            }}\n        ></sp-color-area>\n        <div style=\"color: #ff0000\" aria-live=\"off\">#ff0000</div>\n    `;\n};\n\nexport const joint = (): TemplateResult => {\n    return html`\n        <div>\n            <sp-color-area\n                color=\"hsv (120 0% 100%)\"\n                @input=${({ target }: Event & { target: ColorArea }) => {\n                    const next = target.nextElementSibling as ColorSlider;\n                    const display = next.nextElementSibling as HTMLElement;\n                    display.textContent = target.color as string;\n                    display.style.color = target.color as string;\n                    next.color = target.color;\n                }}\n            ></sp-color-area>\n            <sp-color-slider\n                color=\"hsv(120 0% 1)\"\n                @input=${({\n                    target: {\n                        color,\n                        previousElementSibling,\n                        nextElementSibling,\n                    },\n                }: Event & {\n                    target: ColorSlider & {\n                        previousElementSibling: ColorArea;\n                        nextElementSibling: HTMLDivElement;\n                    };\n                }): void => {\n                    previousElementSibling.color = color;\n                    nextElementSibling.textContent = color as string;\n                    nextElementSibling.style.color = color as string;\n                }}\n            ></sp-color-slider>\n            <div style=\"color: hsv(120, 0, 1)\">hsv(120, 0, 1)</div>\n        </div>\n    `;\n};\n\nexport const disabled = (): TemplateResult => {\n    return html`\n        <sp-color-area disabled></sp-color-area>\n    `;\n};\n\nexport const sized = (): TemplateResult => {\n    return html`\n        <sp-color-area style=\"width: 72px; height: 72px\"></sp-color-area>\n    `;\n};\n\nexport const canvas = (): TemplateResult => {\n    return html`\n        <sp-color-area>\n            <canvas slot=\"gradient\"></canvas>\n        </sp-color-area>\n    `;\n};\n\nclass CanvasWriter extends HTMLElement {\n    writeToCanvas(): void {\n        const { previousElementSibling } = this;\n        if (previousElementSibling) {\n            const canvas = previousElementSibling.querySelector(\n                'canvas[slot=\"gradient\"]'\n            ) as HTMLCanvasElement;\n\n            if (canvas) {\n                canvas.width = canvas.offsetWidth;\n                canvas.height = canvas.offsetHeight;\n                const context = canvas.getContext('2d');\n                if (context) {\n                    context.rect(0, 0, canvas.width, canvas.height);\n\n                    const gradB = context.createLinearGradient(\n                        0,\n                        0,\n                        0,\n                        canvas.height\n                    );\n                    gradB.addColorStop(0, 'white');\n                    gradB.addColorStop(1, 'black');\n                    const gradC = context.createLinearGradient(\n                        0,\n                        0,\n                        canvas.width,\n                        0\n                    );\n                    gradC.addColorStop(0, 'hsla(0,100%,50%,0)');\n                    gradC.addColorStop(1, 'hsla(0,100%,50%,1)');\n\n                    context.fillStyle = gradB;\n                    context.fillRect(0, 0, canvas.width, canvas.height);\n                    context.fillStyle = gradC;\n                    context.globalCompositeOperation = 'multiply';\n                    context.fillRect(0, 0, canvas.width, canvas.height);\n                    context.globalCompositeOperation = 'source-over';\n                }\n            }\n        }\n    }\n\n    constructor() {\n        super();\n        this.writeStatePromise = new Promise((res) => {\n            requestAnimationFrame(() => {\n                this.writeToCanvas();\n                res(true);\n            });\n        });\n    }\n\n    private writeStatePromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.writeStatePromise;\n    }\n}\n\ncustomElements.define('area-canvas-writer', CanvasWriter);\n\ncanvas.decorators = [\n    (story: () => TemplateResult): TemplateResult => {\n        return html`\n            ${story()}\n            <area-canvas-writer></area-canvas-writer>\n        `;\n    },\n];\n"],
-  "mappings": "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",
+  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/color-slider/sp-color-slider.js';\nimport { ColorSlider } from '@spectrum-web-components/color-slider/src/ColorSlider';\nimport '@spectrum-web-components/color-area/sp-color-area.js';\nimport { ColorArea } from '@spectrum-web-components/color-area/src/ColorArea.js';\n\nexport default {\n    title: 'Color/Area',\n    component: 'sp-color-area',\n    argTypes: {\n        onInput: { action: 'input' },\n        onChange: { action: 'change' },\n        color: {\n            name: 'color',\n            type: { name: 'ColorTypes', required: 'true' },\n            description: 'The color displayed by the ColorArea.',\n            table: {\n                type: { summary: 'ColorTypes' },\n                defaultValue: { summary: '' },\n            },\n            control: 'text',\n        },\n    },\n};\n\ntype StoryArgs = {\n    onInput: (val: string) => void;\n    onChange: (val: string) => void;\n};\n\nexport const Default = ({ onChange, onInput }: StoryArgs): TemplateResult => {\n    return html`\n        <sp-color-area\n            color=\"#ff0000\"\n            @input=${({ target }: Event & { target: ColorArea }) => {\n                const next = target.nextElementSibling as HTMLElement;\n                next.textContent = target.color as string;\n                next.style.color = target.color as string;\n                onInput(target.value as string);\n            }}\n            @change=${({ target }: Event & { target: ColorArea }) => {\n                onChange(target.value as string);\n            }}\n        ></sp-color-area>\n        <div style=\"color: #ff0000\" aria-live=\"off\">#ff0000</div>\n    `;\n};\n\nexport const appliedValues = (): TemplateResult => {\n    return html`\n        <sp-color-area\n            .color=${{ space: 'hsv', coords: [250, 90, 80] }}\n        ></sp-color-area>\n        <sp-color-area color=\"hsv(250, 90%, 80%)\"></sp-color-area>\n        <sp-color-area hue=\"250\" x=\"0.1\" y=\"0.1\"></sp-color-area>\n    `;\n};\n\nexport const joint = (): TemplateResult => {\n    return html`\n        <div>\n            <sp-color-area\n                color=\"hsv (120 0% 100%)\"\n                @input=${({ target }: Event & { target: ColorArea }) => {\n                    const next = target.nextElementSibling as ColorSlider;\n                    const display = next.nextElementSibling as HTMLElement;\n                    display.textContent = target.color as string;\n                    display.style.color = target.color as string;\n                    next.color = target.color;\n                }}\n            ></sp-color-area>\n            <sp-color-slider\n                color=\"hsv(120 0% 1)\"\n                @input=${({\n                    target: {\n                        color,\n                        previousElementSibling,\n                        nextElementSibling,\n                    },\n                }: Event & {\n                    target: ColorSlider & {\n                        previousElementSibling: ColorArea;\n                        nextElementSibling: HTMLDivElement;\n                    };\n                }): void => {\n                    previousElementSibling.color = color;\n                    nextElementSibling.textContent = color as string;\n                    nextElementSibling.style.color = color as string;\n                }}\n            ></sp-color-slider>\n            <div style=\"color: hsv(120, 0, 1)\">hsv(120, 0, 1)</div>\n        </div>\n    `;\n};\n\nexport const disabled = (): TemplateResult => {\n    return html`\n        <sp-color-area disabled></sp-color-area>\n    `;\n};\n\nexport const sized = (): TemplateResult => {\n    return html`\n        <sp-color-area style=\"width: 72px; height: 72px\"></sp-color-area>\n    `;\n};\n\nexport const canvas = (): TemplateResult => {\n    return html`\n        <sp-color-area>\n            <canvas slot=\"gradient\"></canvas>\n        </sp-color-area>\n    `;\n};\n\nclass CanvasWriter extends HTMLElement {\n    writeToCanvas(): void {\n        const { previousElementSibling } = this;\n        if (previousElementSibling) {\n            const canvas = previousElementSibling.querySelector(\n                'canvas[slot=\"gradient\"]'\n            ) as HTMLCanvasElement;\n\n            if (canvas) {\n                canvas.width = canvas.offsetWidth;\n                canvas.height = canvas.offsetHeight;\n                const context = canvas.getContext('2d');\n                if (context) {\n                    context.rect(0, 0, canvas.width, canvas.height);\n\n                    const gradB = context.createLinearGradient(\n                        0,\n                        0,\n                        0,\n                        canvas.height\n                    );\n                    gradB.addColorStop(0, 'white');\n                    gradB.addColorStop(1, 'black');\n                    const gradC = context.createLinearGradient(\n                        0,\n                        0,\n                        canvas.width,\n                        0\n                    );\n                    gradC.addColorStop(0, 'hsla(0,100%,50%,0)');\n                    gradC.addColorStop(1, 'hsla(0,100%,50%,1)');\n\n                    context.fillStyle = gradB;\n                    context.fillRect(0, 0, canvas.width, canvas.height);\n                    context.fillStyle = gradC;\n                    context.globalCompositeOperation = 'multiply';\n                    context.fillRect(0, 0, canvas.width, canvas.height);\n                    context.globalCompositeOperation = 'source-over';\n                }\n            }\n        }\n    }\n\n    constructor() {\n        super();\n        this.writeStatePromise = new Promise((res) => {\n            requestAnimationFrame(() => {\n                this.writeToCanvas();\n                res(true);\n            });\n        });\n    }\n\n    private writeStatePromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.writeStatePromise;\n    }\n}\n\ncustomElements.define('area-canvas-writer', CanvasWriter);\n\ncanvas.decorators = [\n    (story: () => TemplateResult): TemplateResult => {\n        return html`\n            ${story()}\n            <area-canvas-writer></area-canvas-writer>\n        `;\n    },\n];\n"],
+  "mappings": "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",
   "names": ["canvas"]
 }

package/test/color-area.test.js

@@ -7,7 +7,6 @@ import {
   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";
@@ -47,7 +46,7 @@ describe("ColorArea", () => {
     await el.updateComplete;
     expect(el.x).to.equal(0.3);
     const handle = el.shadowRoot.querySelector(".handle");
-    expect(handle.color).to.equal("hsl(0, 100%, 85%)");
+    expect(handle.color).to.equal("hsl(0 100% 85%)");
   });
   it("updates color when y value changes", async () => {
     const el = await fixture(html`
@@ -59,7 +58,7 @@ describe("ColorArea", () => {
     await el.updateComplete;
     expect(el.y).to.equal(0.5);
     const handle = el.shadowRoot.querySelector(".handle");
-    expect(handle.color).to.equal("hsl(0, 100%, 25%)");
+    expect(handle.color).to.equal("hsl(0 100% 25%)");
   });
   it("manages a single tab stop", async () => {
     const test = await fixture(html`
@@ -104,6 +103,10 @@ describe("ColorArea", () => {
     await sendKeys({
       press: "ArrowDown"
     });
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await elementUpdated(el);
     expect(el.value).to.not.equal(value);
     await sendKeys({
       press: "Shift+Tab"
@@ -158,10 +161,10 @@ describe("ColorArea", () => {
         `);
     await el.updateComplete;
     const handle = el.shadowRoot.querySelector(".handle");
-    expect(handle.color).to.equal("hsl(0, 100%, 50%)");
+    expect(handle.color).to.equal("hsl(0 100% 50%)");
     el.x = 0.3;
     await el.updateComplete;
-    expect(handle.color).to.equal("hsl(0, 100%, 85%)");
+    expect(handle.color).to.equal("hsl(0 100% 85%)");
   });
   it("updates color when y value changes", async () => {
     const el = await fixture(html`
@@ -169,10 +172,10 @@ describe("ColorArea", () => {
         `);
     await el.updateComplete;
     const handle = el.shadowRoot.querySelector(".handle");
-    expect(handle.color).to.equal("hsl(0, 100%, 50%)");
+    expect(handle.color).to.equal("hsl(0 100% 50%)");
     el.y = 0.7;
     await el.updateComplete;
-    expect(handle.color).to.equal("hsl(0, 100%, 35%)");
+    expect(handle.color).to.equal("hsl(0 100% 35%)");
   });
   it("accepts `hue` values", async () => {
     const el = await fixture(html`
@@ -180,10 +183,10 @@ describe("ColorArea", () => {
         `);
     await elementUpdated(el);
     const { handle } = el;
-    expect(handle.color).to.equal("hsl(0, 100%, 50%)");
+    expect(handle.color).to.equal("hsl(0 100% 50%)");
     el.hue = 125;
     await elementUpdated(el);
-    expect(handle.color).to.equal("hsl(125, 100%, 50%)");
+    expect(handle.color).to.equal("hsl(125 100% 50%)");
   });
   it('accepts "color" values as hsl', async () => {
     const el = await fixture(html`
@@ -355,7 +358,7 @@ describe("ColorArea", () => {
       press: "ArrowUp"
     });
     await elementUpdated(el);
-    expect(el.color).to.equal("hsl(100, 65%, 57%)");
+    expect(el.color).to.equal("hsla(100, 65%, 57%, 1)");
     expect(el.x, "first").to.equal(0.67);
     expect(el.y).to.equal(0.85);
     await sendKeys({
@@ -366,7 +369,7 @@ describe("ColorArea", () => {
       press: "ArrowRight"
     });
     await elementUpdated(el);
-    expect(el.color).to.equal("hsl(100, 66%, 56%)");
+    expect(el.color).to.equal("hsla(100, 66%, 56%, 1)");
     expect(el.x).to.equal(0.69);
     expect(el.y).to.equal(0.85);
     await sendKeys({
@@ -377,7 +380,7 @@ describe("ColorArea", () => {
       press: "ArrowDown"
     });
     await elementUpdated(el);
-    expect(el.color).to.equal("hsl(100, 53%, 49%)");
+    expect(el.color).to.equal("hsla(100, 53%, 49%, 1)");
     expect(el.x).to.equal(0.69);
     expect(el.y).to.equal(0.75);
     await sendKeys({
@@ -392,7 +395,7 @@ describe("ColorArea", () => {
       up: "Shift"
     });
     await elementUpdated(el);
-    expect(el.color).to.equal("hsl(100, 50%, 50%)");
+    expect(el.color).to.equal("hsla(100, 50%, 50%, 1)");
     expect(el.x, "last").to.equal(0.67);
     expect(el.y).to.equal(0.75);
   });
@@ -654,7 +657,7 @@ describe("ColorArea", () => {
         `);
     await elementUpdated(el);
     let outputColor = el.color;
-    const variance = 5e-5;
+    const variance = 4e-3;
     expect(el.hue).to.equal(100);
     expect(el.x, "x").to.equal(0.67);
     expect(el.y, "y").to.equal(0.75);
@@ -727,7 +730,7 @@ describe("ColorArea", () => {
     { name: "Hex8", color: "cc33ccff" },
     { name: "Hex8 String", color: "#cc33ccff" },
     // name
-    { name: "string", color: "red" },
+    { name: "string", color: "red", test: "ff0000" },
     // hsl
     { name: "HSL String", color: "hsl(300, 60%, 50%)" },
     { name: "HSL", color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },
@@ -740,20 +743,20 @@ describe("ColorArea", () => {
       const el = await fixture(html`
                 <sp-color-area></sp-color-area>
             `);
-      el.color = format.color;
+      if (typeof format.color === "string") {
+        el.color = format.color;
+      } else {
+        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);
+      } else if (format.name == "string") {
+        expect(el.color).to.equal(format.test);
+      } 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>
-        `);
-    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>

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["color-area.test.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 {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    nextFrame,\n    oneEvent,\n} from '@open-wc/testing';\nimport { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';\n\nimport '@spectrum-web-components/color-area/sp-color-area.js';\nimport { ColorArea } from '@spectrum-web-components/color-area';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { ColorHandle } from '@spectrum-web-components/color-handle';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('ColorArea', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<ColorArea>(html`\n                <sp-color-area></sp-color-area>\n            `)\n    );\n    it('loads default color-area accessibly', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('handleBlur returns early if _pointerDown is true', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await sendKeys({ press: 'Tab' });\n        await el.updateComplete;\n\n        el._pointerDown = true;\n        await el.updateComplete;\n\n        el.handleBlur();\n        await el.updateComplete;\n\n        expect(el.focused).to.be.true;\n    });\n    it('updates color when x value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        expect(el.x).to.equal(1);\n\n        el.x = 0.3;\n        await el.updateComplete;\n\n        expect(el.x).to.equal(0.3);\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n        expect(handle.color).to.equal('hsl(0, 100%, 85%)');\n    });\n    it('updates color when y value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        expect(el.y).to.equal(1);\n\n        el.y = 0.5;\n        await el.updateComplete;\n\n        expect(el.y).to.equal(0.5);\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n        expect(handle.color).to.equal('hsl(0, 100%, 25%)');\n    });\n    it('manages a single tab stop', async () => {\n        const test = await fixture<HTMLDivElement>(html`\n            <div>\n                <input type=\"text\" />\n                <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n                <input type=\"text\" />\n            </div>\n        `);\n        const el = test.querySelector('sp-color-area') as ColorArea;\n        const input1 = test.querySelector(\n            'input:nth-of-type(1)'\n        ) as HTMLInputElement;\n        const input2 = test.querySelector(\n            'input:nth-of-type(2)'\n        ) as HTMLInputElement;\n\n        await elementUpdated(el);\n\n        input1.focus();\n\n        expect(document.activeElement, 'before input').to.equal(input1);\n\n        await sendKeys({\n            press: 'Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'element').to.equal(el);\n        let value = el.value;\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n        expect(el.value).to.not.equal(value);\n        await sendKeys({\n            press: 'Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'after input').to.equal(input2);\n\n        await sendKeys({\n            press: 'Shift+Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'element again').to.equal(el);\n\n        value = el.value;\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        expect(el.value).to.not.equal(value);\n        await sendKeys({\n            press: 'Shift+Tab',\n        });\n        expect(document.activeElement, 'before input again').to.equal(input1);\n    });\n    it('provides separate aria-labels for X and Y inputs', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n        const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n        const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n        expect(inputX?.getAttribute('aria-label')).to.equal(\n            'saturation Color Picker'\n        );\n        expect(inputY?.getAttribute('aria-label')).to.equal(\n            'luminosity Color Picker'\n        );\n        expect(inputX?.getAttribute('aria-roledescription')).to.equal(\n            '2d slider'\n        );\n        expect(inputY?.getAttribute('aria-roledescription')).to.equal(\n            '2d slider'\n        );\n        expect(inputX?.getAttribute('aria-valuetext')).to.equal(\n            '67%, saturation, 75%, luminosity'\n        );\n        expect(inputY?.getAttribute('aria-valuetext')).to.equal(\n            '75%, luminosity, 67%, saturation'\n        );\n    });\n    it('overrides X and Y labels with provided \"labelX\" and \"labelY\" attributes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsl(100, 50%, 50%)\"\n                label-X=\"custom X label\"\n                label-Y=\"custom Y label\"\n            ></sp-color-area>\n        `);\n        const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n        const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n        expect(inputX?.getAttribute('aria-label')).to.equal(\n            'custom X label Color Picker'\n        );\n        expect(inputY?.getAttribute('aria-label')).to.equal(\n            'custom Y label Color Picker'\n        );\n    });\n    it('updates color when x value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n\n        expect(handle.color).to.equal('hsl(0, 100%, 50%)');\n        el.x = 0.3;\n        await el.updateComplete;\n        expect(handle.color).to.equal('hsl(0, 100%, 85%)');\n    });\n    it('updates color when y value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n\n        expect(handle.color).to.equal('hsl(0, 100%, 50%)');\n        el.y = 0.7;\n        await el.updateComplete;\n        expect(handle.color).to.equal('hsl(0, 100%, 35%)');\n    });\n    it('accepts `hue` values', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        const { handle } = el as unknown as { handle: ColorHandle };\n\n        expect(handle.color).to.equal('hsl(0, 100%, 50%)');\n\n        el.hue = 125;\n\n        await elementUpdated(el);\n\n        expect(handle.color).to.equal('hsl(125, 100%, 50%)');\n    });\n    it('accepts \"color\" values as hsl', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n    });\n    it('accepts \"color\" values as hsla', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hugh').to.equal(100);\n        expect(el.x, 'ex').to.equal(0.67);\n        expect(el.y, 'why').to.equal(0.75);\n\n        el.color = 'hsla(120, 100%, 0, 1)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue 2').to.equal(120);\n        expect(el.x, 'x 2').to.equal(0);\n        expect(el.y, 'y 2').to.equal(0);\n    });\n    it('accepts \"color\" values as rgb', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"rgb(0,255,0)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(120);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n    });\n    it('accepts \"color\" values as hex', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"#00ff00\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(120);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n    });\n    it('accepts \"Arrow*\" keypresses', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        el.inputX.focus();\n        await nextFrame();\n\n        let changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.77);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.77);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n        el.setAttribute('dir', 'rtl');\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'Home',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.77);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'End',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n\n        el.dir = 'ltr';\n\n        await sendKeys({\n            press: 'Home',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.57);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'End',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n    });\n    it('accepts \"Arrow*\" keypresses with alteration', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        el.focus();\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        await sendKeys({\n            down: 'Shift',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        // This ensures that all the keystrokes are processed seperately\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsl(100, 65%, 57%)');\n        expect(el.x, 'first').to.equal(0.67);\n        expect(el.y).to.equal(0.85);\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsl(100, 66%, 56%)');\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.85);\n\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsl(100, 53%, 49%)');\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            up: 'Shift',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsl(100, 50%, 50%)');\n        expect(el.x, 'last').to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n    });\n    it('accepts pointer events', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                style=\"--mod-colorarea-height: 192px; --mod-colorarea-width: 192px;\"\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        await elementUpdated(el);\n\n        const { handle } = el as unknown as { handle: HTMLElement };\n\n        handle.setPointerCapture = () => {\n            return;\n        };\n        handle.releasePointerCapture = () => {\n            return;\n        };\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        handle.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                button: 1,\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        const root = el.shadowRoot ? el.shadowRoot : el;\n        const gradient = root.querySelector('.gradient') as HTMLElement;\n        gradient.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                button: 1,\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        gradient.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x, 'pointerdown x').to.equal(0.48);\n        expect(el.y, 'pointerdown y').to.equal(0.52);\n\n        handle.dispatchEvent(\n            new PointerEvent('pointermove', {\n                pointerId: 1,\n                clientX: 110,\n                clientY: 110,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        handle.dispatchEvent(\n            new PointerEvent('pointerup', {\n                pointerId: 1,\n                clientX: 110,\n                clientY: 110,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(0.53);\n        expect(el.y).to.equal(0.47);\n    });\n    it('responds to events on the internal input element', async () => {\n        const inputSpy = spy();\n        const changeSpy = spy();\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsla(100, 50%, 50%, 1)\"\n                @change=${() => changeSpy()}\n                @input=${() => inputSpy()}\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        el.inputX.focus();\n\n        el.inputX.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        el.inputX.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: false, // native change events do not compose themselves by default\n            })\n        );\n\n        expect(inputSpy.callCount).to.equal(1);\n        expect(changeSpy.callCount).to.equal(1);\n\n        el.inputY.focus();\n\n        el.inputY.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        el.inputY.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: false, // native change events do not compose themselves by default\n            })\n        );\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n    });\n    it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n        const inputSpy = spy();\n        const changeSpy = spy();\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsla(100, 50%, 50%, 1)\"\n                @change=${() => changeSpy()}\n                @input=${() => inputSpy()}\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        const Xvalue = Number(Number(el.inputX.value).toFixed(2));\n        const Yvalue = Number(Number(el.inputY.value).toFixed(2));\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'ArrowRight' });\n        await sendKeys({ press: 'ArrowRight' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            (Xvalue + 0.02).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'ArrowUp' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            (Yvalue + 0.02).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowDown' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            Yvalue.toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n\n        await sendKeys({ press: 'ArrowLeft' });\n        await sendKeys({ press: 'ArrowLeft' });\n\n        await elementUpdated(el);\n        //expect(el.x).to.be.equal(0.98);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            Xvalue.toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'End' });\n        await sendKeys({ press: 'End' });\n\n        await elementUpdated(el);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            (Xvalue + 0.2).toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'Home' });\n        await sendKeys({ press: 'Home' });\n\n        await elementUpdated(el);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            Xvalue.toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'PageUp' });\n        await sendKeys({ press: 'PageUp' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            (Yvalue + 0.2).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'PageDown' });\n        await sendKeys({ press: 'PageDown' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            Yvalue.toFixed(2)\n        );\n    });\n    it('retains `hue` value when s = 0 in HSL string format', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n        expect(el.color).to.equal('hsl(100, 50%, 50%)');\n\n        el.color = 'hsl(100, 0%, 50%)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'new hue').to.equal(100);\n        expect(el.x, 'new x').to.equal(0);\n        expect(el.y, 'new y').to.equal(0.5);\n        expect(el.color).to.equal('hsl(100, 0%, 50%)');\n    });\n    it('retains `hue` value when s = 0 in HSL object format', async () => {\n        let inputColor = { h: 100, s: 0.5, l: 0.5 };\n\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area .color=${inputColor}></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        let outputColor = el.color as { h: number; s: number; l: number };\n        const variance = 0.00005;\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n\n        inputColor = { h: 100, s: 0, l: 0.5 };\n        el.color = inputColor;\n\n        await elementUpdated(el);\n        outputColor = el.color as { h: number; s: number; l: number };\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n    });\n    it('retains `hue` value when s = 0 in HSV string format', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsv(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.5);\n        expect(el.y, 'y').to.equal(0.5);\n        expect(el.color).to.equal('hsv(100, 50%, 50%)');\n\n        el.color = 'hsv(100, 0%, 50%)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'new hue').to.equal(100);\n        expect(el.x, 'new x').to.equal(0);\n        expect(el.y, 'new y').to.equal(0.5);\n        expect(el.color).to.equal('hsv(100, 0%, 50%)');\n    });\n    it('retains `hue` value when s = 0 in HSV object format', async () => {\n        let inputColor = { h: 100, s: 0.5, v: 0.5 };\n\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area .color=${inputColor}></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        let outputColor = el.color as { h: number; s: number; v: number };\n        const variance = 0.00005;\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0.5);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n\n        inputColor = { h: 100, s: 0, v: 0.5 };\n        el.color = inputColor;\n\n        await elementUpdated(el);\n        outputColor = el.color as { h: number; s: number; v: number };\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n    });\n    const colorFormats: {\n        name: string;\n        color:\n            | string\n            | number\n            | TinyColor\n            | HSVA\n            | HSV\n            | RGB\n            | RGBA\n            | HSL\n            | HSLA;\n    }[] = [\n        //rgb\n        { name: 'RGB String', color: 'rgb(204, 51, 204)' },\n        { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },\n        //prgb\n        { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },\n        { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n        // hex\n        { name: 'Hex', color: 'cc33cc' },\n        { name: 'Hex String', color: '#cc33cc' },\n        // hex8\n        { name: 'Hex8', color: 'cc33ccff' },\n        { name: 'Hex8 String', color: '#cc33ccff' },\n        // name\n        { name: 'string', color: 'red' },\n        // hsl\n        { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n        { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n        // hsv\n        { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n        { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n    ];\n    colorFormats.map((format) => {\n        it(`maintains \\`color\\` format as ${format.name}`, async () => {\n            const el = await fixture<ColorArea>(html`\n                <sp-color-area></sp-color-area>\n            `);\n\n            el.color = format.color;\n            if (format.name.startsWith('Hex')) {\n                expect(el.color).to.equal(format.color);\n            } else expect(el.color).to.deep.equal(format.color);\n        });\n    });\n    it(`maintains \\`color\\` format as TinyColor`, async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n        const color = new TinyColor('rgb(204, 51, 204)');\n        el.color = color;\n        expect(color.equals(el.color));\n    });\n    it(`resolves Hex3 format to Hex6 format`, async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n        el.color = '0f0';\n        expect(el.color).to.equal('00ff00');\n\n        el.color = '#1e0';\n        expect(el.color).to.equal('#11ee00');\n    });\n    it(`resolves Hex4 format to Hex8 format`, async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n        el.color = 'f3af';\n        expect(el.color).to.equal('ff33aaff');\n\n        el.color = '#f3af';\n        expect(el.color).to.equal('#ff33aaff');\n    });\n});\n"],
-  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAA0C,iBAAiB;AAE3D,OAAO;AAEP,SAAS,gBAAgB;AACzB,SAAS,WAAW;AAEpB,SAAS,6BAA6B;AAEtC,SAAS,aAAa,MAAM;AACxB;AAAA,IACI,YACI,MAAM,QAAmB;AAAA;AAAA,aAExB;AAAA,EACT;AACA,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAC/B,UAAM,GAAG;AAET,OAAG,eAAe;AAClB,UAAM,GAAG;AAET,OAAG,WAAW;AACd,UAAM,GAAG;AAET,WAAO,GAAG,OAAO,EAAE,GAAG,GAAG;AAAA,EAC7B,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,OAAG,IAAI;AACP,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;AAEzB,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AACpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACrD,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,OAAG,IAAI;AACP,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;AAEzB,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AACpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACrD,CAAC;AACD,KAAG,6BAA6B,YAAY;AACxC,UAAM,OAAO,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1C;AACD,UAAM,KAAK,KAAK,cAAc,eAAe;AAC7C,UAAM,SAAS,KAAK;AAAA,MAChB;AAAA,IACJ;AACA,UAAM,SAAS,KAAK;AAAA,MAChB;AAAA,IACJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,MAAM;AAEb,WAAO,SAAS,eAAe,cAAc,EAAE,GAAG,MAAM,MAAM;AAE9D,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,SAAS,EAAE,GAAG,MAAM,EAAE;AACrD,QAAI,QAAQ,GAAG;AACf,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,IAAI,MAAM,KAAK;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,aAAa,EAAE,GAAG,MAAM,MAAM;AAE7D,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,eAAe,EAAE,GAAG,MAAM,EAAE;AAE3D,YAAQ,GAAG;AACX,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,GAAG,KAAK,EAAE,GAAG,IAAI,MAAM,KAAK;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,eAAe,oBAAoB,EAAE,GAAG,MAAM,MAAM;AAAA,EACxE,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAC5D,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAE5D,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,uBAAuB,EAAE,GAAG;AAAA,MACpD;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,uBAAuB,EAAE,GAAG;AAAA,MACpD;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,iBAAiB,EAAE,GAAG;AAAA,MAC9C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,iBAAiB,EAAE,GAAG;AAAA,MAC9C;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,2EAA2E,YAAY;AACtF,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMnC;AACD,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAC5D,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAE5D,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AAEpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AACjD,OAAG,IAAI;AACP,UAAM,GAAG;AACT,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACrD,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AAEpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AACjD,OAAG,IAAI;AACP,UAAM,GAAG;AACT,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACrD,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,EAAE,OAAO,IAAI;AAEnB,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAEjD,OAAG,MAAM;AAET,UAAM,eAAe,EAAE;AAEvB,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,qBAAqB;AAAA,EACvD,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAAA,EACnC,CAAC;AACD,KAAG,kCAAkC,YAAY;AAC7C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG;AACnC,WAAO,GAAG,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI;AAChC,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,IAAI;AAEjC,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,OAAO,EAAE,GAAG,MAAM,GAAG;AACpC,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;AAC9B,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;AAAA,EAClC,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAAA,EAC3B,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAAA,EAC3B,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,OAAG,OAAO,MAAM;AAChB,UAAM,UAAU;AAEhB,QAAI,cAAc,SAAS,IAAI,QAAQ;AACvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,OAAG,aAAa,OAAO,KAAK;AAC5B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,OAAG,MAAM;AAET,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,+CAA+C,YAAY;AAC1D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AACvB,OAAG,MAAM;AACT,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,UAAM,SAAS;AAAA,MACX,MAAM;AAAA,IACV,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAC9C,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,IAAI;AACnC,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAC9C,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAC9C,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,IAAI;AAAA,IACR,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAC9C,WAAO,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,IAAI;AAClC,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,0BAA0B,YAAY;AACrC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA;AAAA,SAInC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,EAAE;AAEvB,UAAM,EAAE,OAAO,IAAI;AAEnB,WAAO,oBAAoB,MAAM;AAC7B;AAAA,IACJ;AACA,WAAO,wBAAwB,MAAM;AACjC;AAAA,IACJ;AAEA,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,WAAO;AAAA,MACH,IAAI,aAAa,eAAe;AAAA,QAC5B,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,UAAM,OAAO,GAAG,aAAa,GAAG,aAAa;AAC7C,UAAM,WAAW,KAAK,cAAc,WAAW;AAC/C,aAAS;AAAA,MACL,IAAI,aAAa,eAAe;AAAA,QAC5B,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,aAAS;AAAA,MACL,IAAI,aAAa,eAAe;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI;AAC3C,WAAO,GAAG,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI;AAE3C,WAAO;AAAA,MACH,IAAI,aAAa,eAAe;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AACA,WAAO;AAAA,MACH,IAAI,aAAa,aAAa;AAAA,QAC1B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,WAAW,IAAI;AACrB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA,0BAGlB,MAAM,UAAU,CAAC;AAAA,yBAClB,MAAM,SAAS,CAAC;AAAA;AAAA,SAEhC;AAED,UAAM,eAAe,EAAE;AAEvB,OAAG,OAAO,MAAM;AAEhB,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,UAAU;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,MACd,CAAC;AAAA,IACL;AAEA,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AAEtC,OAAG,OAAO,MAAM;AAEhB,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,UAAU;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,MACd,CAAC;AAAA,IACL;AAEA,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EAC1C,CAAC;AACD,KAAG,yEAAyE,YAAY;AACpF,UAAM,WAAW,IAAI;AACrB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA,0BAGlB,MAAM,UAAU,CAAC;AAAA,yBAClB,MAAM,SAAS,CAAC;AAAA;AAAA,SAEhC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS,OAAO,OAAO,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC;AACxD,UAAM,SAAS,OAAO,OAAO,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC;AAExD,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,aAAa,CAAC;AACtC,UAAM,SAAS,EAAE,OAAO,aAAa,CAAC;AAEtC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AACnC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AAEnC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AAErC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AAEvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AAErC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAC/B,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAE/B,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,KAAK,QAAQ,CAAC;AAAA,IAC5B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,OAAO,CAAC;AAChC,UAAM,SAAS,EAAE,OAAO,OAAO,CAAC;AAEhC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,SAAS,CAAC;AAClC,UAAM,SAAS,EAAE,OAAO,SAAS,CAAC;AAElC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,KAAK,QAAQ,CAAC;AAAA,IAC5B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AACpC,UAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AAEpC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAAA,EACJ,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAE9C,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,SAAS,EAAE,GAAG,MAAM,GAAG;AACtC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,CAAC;AAChC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACjD,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,QAAI,aAAa,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI;AAE1C,UAAM,KAAK,MAAM,QAAmB;AAAA,oCACR,UAAU;AAAA,SACrC;AAED,UAAM,eAAe,EAAE;AAEvB,QAAI,cAAc,GAAG;AACrB,UAAM,WAAW;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAEtE,iBAAa,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI;AACpC,OAAG,QAAQ;AAEX,UAAM,eAAe,EAAE;AACvB,kBAAc,GAAG;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AAC5B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAAA,EAC1E,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAE9C,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,SAAS,EAAE,GAAG,MAAM,GAAG;AACtC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,CAAC;AAChC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACjD,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,QAAI,aAAa,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI;AAE1C,UAAM,KAAK,MAAM,QAAmB;AAAA,oCACR,UAAU;AAAA,SACrC;AAED,UAAM,eAAe,EAAE;AAEvB,QAAI,cAAc,GAAG;AACrB,UAAM,WAAW;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAEtE,iBAAa,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI;AACpC,OAAG,QAAQ;AAEX,UAAM,eAAe,EAAE;AACvB,kBAAc,GAAG;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AAC5B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAAA,EAC1E,CAAC;AACD,QAAM,eAYA;AAAA;AAAA,IAEF,EAAE,MAAM,cAAc,OAAO,oBAAoB;AAAA,IACjD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,EAAE,EAAE;AAAA;AAAA,IAEtD,EAAE,MAAM,eAAe,OAAO,qBAAqB;AAAA,IACnD,EAAE,MAAM,QAAQ,OAAO,EAAE,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,EAAE,EAAE;AAAA;AAAA,IAE9D,EAAE,MAAM,OAAO,OAAO,SAAS;AAAA,IAC/B,EAAE,MAAM,cAAc,OAAO,UAAU;AAAA;AAAA,IAEvC,EAAE,MAAM,QAAQ,OAAO,WAAW;AAAA,IAClC,EAAE,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA,IAE1C,EAAE,MAAM,UAAU,OAAO,MAAM;AAAA;AAAA,IAE/B,EAAE,MAAM,cAAc,OAAO,qBAAqB;AAAA,IAClD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,oBAAoB,GAAG,KAAK,GAAG,EAAE,EAAE;AAAA;AAAA,IAEtE,EAAE,MAAM,cAAc,OAAO,sBAAsB;AAAA,IACnD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EAC1D;AACA,eAAa,IAAI,CAAC,WAAW;AACzB,OAAG,iCAAiC,OAAO,IAAI,IAAI,YAAY;AAC3D,YAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,aAEnC;AAED,SAAG,QAAQ,OAAO;AAClB,UAAI,OAAO,KAAK,WAAW,KAAK,GAAG;AAC/B,eAAO,GAAG,KAAK,EAAE,GAAG,MAAM,OAAO,KAAK;AAAA,MAC1C,MAAO,QAAO,GAAG,KAAK,EAAE,GAAG,KAAK,MAAM,OAAO,KAAK;AAAA,IACtD,CAAC;AAAA,EACL,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,UAAM,QAAQ,IAAI,UAAU,mBAAmB;AAC/C,OAAG,QAAQ;AACX,WAAO,MAAM,OAAO,GAAG,KAAK,CAAC;AAAA,EACjC,CAAC;AACD,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,QAAQ;AAElC,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,SAAS;AAAA,EACvC,CAAC;AACD,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAEpC,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,WAAW;AAAA,EACzC,CAAC;AACL,CAAC;",
+  "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 {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    nextFrame,\n    oneEvent,\n} from '@open-wc/testing';\nimport { ColorTypes } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\n\nimport '@spectrum-web-components/color-area/sp-color-area.js';\nimport { ColorArea } from '@spectrum-web-components/color-area';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { ColorHandle } from '@spectrum-web-components/color-handle';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('ColorArea', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<ColorArea>(html`\n                <sp-color-area></sp-color-area>\n            `)\n    );\n    it('loads default color-area accessibly', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('handleBlur returns early if _pointerDown is true', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await sendKeys({ press: 'Tab' });\n        await el.updateComplete;\n\n        el._pointerDown = true;\n        await el.updateComplete;\n\n        el.handleBlur();\n        await el.updateComplete;\n\n        expect(el.focused).to.be.true;\n    });\n    it('updates color when x value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        expect(el.x).to.equal(1);\n\n        el.x = 0.3;\n        await el.updateComplete;\n\n        expect(el.x).to.equal(0.3);\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n        expect(handle.color).to.equal('hsl(0 100% 85%)');\n    });\n    it('updates color when y value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        expect(el.y).to.equal(1);\n\n        el.y = 0.5;\n        await el.updateComplete;\n\n        expect(el.y).to.equal(0.5);\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n        expect(handle.color).to.equal('hsl(0 100% 25%)');\n    });\n    it('manages a single tab stop', async () => {\n        const test = await fixture<HTMLDivElement>(html`\n            <div>\n                <input type=\"text\" />\n                <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n                <input type=\"text\" />\n            </div>\n        `);\n        const el = test.querySelector('sp-color-area') as ColorArea;\n        const input1 = test.querySelector(\n            'input:nth-of-type(1)'\n        ) as HTMLInputElement;\n        const input2 = test.querySelector(\n            'input:nth-of-type(2)'\n        ) as HTMLInputElement;\n\n        await elementUpdated(el);\n\n        input1.focus();\n\n        expect(document.activeElement, 'before input').to.equal(input1);\n\n        await sendKeys({\n            press: 'Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'element').to.equal(el);\n        let value = el.value;\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n        expect(el.value).to.not.equal(value);\n        await sendKeys({\n            press: 'Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'after input').to.equal(input2);\n\n        await sendKeys({\n            press: 'Shift+Tab',\n        });\n        await elementUpdated(el);\n\n        expect(document.activeElement, 'element again').to.equal(el);\n\n        value = el.value;\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await elementUpdated(el);\n        expect(el.value).to.not.equal(value);\n        await sendKeys({\n            press: 'Shift+Tab',\n        });\n\n        expect(document.activeElement, 'before input again').to.equal(input1);\n    });\n    it('provides separate aria-labels for X and Y inputs', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n        const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n        const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n        expect(inputX?.getAttribute('aria-label')).to.equal(\n            'saturation Color Picker'\n        );\n        expect(inputY?.getAttribute('aria-label')).to.equal(\n            'luminosity Color Picker'\n        );\n        expect(inputX?.getAttribute('aria-roledescription')).to.equal(\n            '2d slider'\n        );\n        expect(inputY?.getAttribute('aria-roledescription')).to.equal(\n            '2d slider'\n        );\n        expect(inputX?.getAttribute('aria-valuetext')).to.equal(\n            '67%, saturation, 75%, luminosity'\n        );\n        expect(inputY?.getAttribute('aria-valuetext')).to.equal(\n            '75%, luminosity, 67%, saturation'\n        );\n    });\n    it('overrides X and Y labels with provided \"labelX\" and \"labelY\" attributes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsl(100, 50%, 50%)\"\n                label-X=\"custom X label\"\n                label-Y=\"custom Y label\"\n            ></sp-color-area>\n        `);\n        const inputX = el.shadowRoot.querySelector('input[name=\"x\"]');\n        const inputY = el.shadowRoot.querySelector('input[name=\"y\"]');\n\n        expect(inputX?.getAttribute('aria-label')).to.equal(\n            'custom X label Color Picker'\n        );\n        expect(inputY?.getAttribute('aria-label')).to.equal(\n            'custom Y label Color Picker'\n        );\n    });\n    it('updates color when x value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n\n        expect(handle.color).to.equal('hsl(0 100% 50%)');\n        el.x = 0.3;\n        await el.updateComplete;\n        expect(handle.color).to.equal('hsl(0 100% 85%)');\n    });\n    it('updates color when y value changes', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await el.updateComplete;\n\n        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;\n        expect(handle.color).to.equal('hsl(0 100% 50%)');\n        el.y = 0.7;\n        await el.updateComplete;\n        expect(handle.color).to.equal('hsl(0 100% 35%)');\n    });\n    it('accepts `hue` values', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        const { handle } = el as unknown as { handle: ColorHandle };\n\n        expect(handle.color).to.equal('hsl(0 100% 50%)');\n\n        el.hue = 125;\n\n        await elementUpdated(el);\n\n        expect(handle.color).to.equal('hsl(125 100% 50%)');\n    });\n    it('accepts \"color\" values as hsl', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n    });\n    it('accepts \"color\" values as hsla', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hugh').to.equal(100);\n        expect(el.x, 'ex').to.equal(0.67);\n        expect(el.y, 'why').to.equal(0.75);\n\n        el.color = 'hsla(120, 100%, 0, 1)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue 2').to.equal(120);\n        expect(el.x, 'x 2').to.equal(0);\n        expect(el.y, 'y 2').to.equal(0);\n    });\n    it('accepts \"color\" values as rgb', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"rgb(0,255,0)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(120);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n    });\n    it('accepts \"color\" values as hex', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"#00ff00\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(120);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n    });\n    it('accepts \"Arrow*\" keypresses', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        el.inputX.focus();\n        await nextFrame();\n\n        let changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.77);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.77);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n        el.setAttribute('dir', 'rtl');\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        changeEvent = oneEvent(el, 'change');\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'Home',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.77);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'End',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n\n        el.dir = 'ltr';\n\n        await sendKeys({\n            press: 'Home',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.57);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'End',\n        });\n        await changeEvent;\n        expect(el.x).to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n    });\n    it('accepts \"Arrow*\" keypresses with alteration', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsla(100, 50%, 50%, 1)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        el.focus();\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        await sendKeys({\n            down: 'Shift',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n        // This ensures that all the keystrokes are processed seperately\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowUp',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsla(100, 65%, 57%, 1)');\n        expect(el.x, 'first').to.equal(0.67);\n        expect(el.y).to.equal(0.85);\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsla(100, 66%, 56%, 1)');\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.85);\n\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowDown',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsla(100, 53%, 49%, 1)');\n        expect(el.x).to.equal(0.69);\n        expect(el.y).to.equal(0.75);\n\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n        await elementUpdated(el);\n        await sendKeys({\n            up: 'Shift',\n        });\n\n        await elementUpdated(el);\n\n        expect(el.color).to.equal('hsla(100, 50%, 50%, 1)');\n        expect(el.x, 'last').to.equal(0.67);\n        expect(el.y).to.equal(0.75);\n    });\n    it('accepts pointer events', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                style=\"--mod-colorarea-height: 192px; --mod-colorarea-width: 192px;\"\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        await elementUpdated(el);\n\n        const { handle } = el as unknown as { handle: HTMLElement };\n\n        handle.setPointerCapture = () => {\n            return;\n        };\n        handle.releasePointerCapture = () => {\n            return;\n        };\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        handle.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                button: 1,\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        const root = el.shadowRoot ? el.shadowRoot : el;\n        const gradient = root.querySelector('.gradient') as HTMLElement;\n        gradient.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                button: 1,\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(1);\n        expect(el.y).to.equal(1);\n\n        gradient.dispatchEvent(\n            new PointerEvent('pointerdown', {\n                pointerId: 1,\n                clientX: 100,\n                clientY: 100,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x, 'pointerdown x').to.equal(0.48);\n        expect(el.y, 'pointerdown y').to.equal(0.52);\n\n        handle.dispatchEvent(\n            new PointerEvent('pointermove', {\n                pointerId: 1,\n                clientX: 110,\n                clientY: 110,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n        handle.dispatchEvent(\n            new PointerEvent('pointerup', {\n                pointerId: 1,\n                clientX: 110,\n                clientY: 110,\n                bubbles: true,\n                composed: true,\n                cancelable: true,\n            })\n        );\n\n        await elementUpdated(el);\n\n        expect(el.hue).to.equal(0);\n        expect(el.x).to.equal(0.53);\n        expect(el.y).to.equal(0.47);\n    });\n    it('responds to events on the internal input element', async () => {\n        const inputSpy = spy();\n        const changeSpy = spy();\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsla(100, 50%, 50%, 1)\"\n                @change=${() => changeSpy()}\n                @input=${() => inputSpy()}\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        el.inputX.focus();\n\n        el.inputX.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        el.inputX.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: false, // native change events do not compose themselves by default\n            })\n        );\n\n        expect(inputSpy.callCount).to.equal(1);\n        expect(changeSpy.callCount).to.equal(1);\n\n        el.inputY.focus();\n\n        el.inputY.dispatchEvent(\n            new Event('input', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        el.inputY.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: false, // native change events do not compose themselves by default\n            })\n        );\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n    });\n    it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n        const inputSpy = spy();\n        const changeSpy = spy();\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area\n                color=\"hsla(100, 50%, 50%, 1)\"\n                @change=${() => changeSpy()}\n                @input=${() => inputSpy()}\n            ></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n        const Xvalue = Number(Number(el.inputX.value).toFixed(2));\n        const Yvalue = Number(Number(el.inputY.value).toFixed(2));\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'ArrowRight' });\n        await sendKeys({ press: 'ArrowRight' });\n        await elementUpdated(el);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            (Xvalue + 0.02).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n\n        await sendKeys({ press: 'ArrowUp' });\n        await sendKeys({ press: 'ArrowUp' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            (Yvalue + 0.02).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'ArrowDown' });\n        await sendKeys({ press: 'ArrowDown' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            Yvalue.toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n\n        await sendKeys({ press: 'ArrowLeft' });\n        await sendKeys({ press: 'ArrowLeft' });\n\n        await elementUpdated(el);\n        //expect(el.x).to.be.equal(0.98);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            Xvalue.toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'End' });\n        await sendKeys({ press: 'End' });\n\n        await elementUpdated(el);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            (Xvalue + 0.2).toFixed(2)\n        );\n\n        el.inputX.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'Home' });\n        await sendKeys({ press: 'Home' });\n\n        await elementUpdated(el);\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputX.value).toFixed(2)).to.equal(\n            Xvalue.toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'PageUp' });\n        await sendKeys({ press: 'PageUp' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            (Yvalue + 0.2).toFixed(2)\n        );\n\n        el.inputY.focus();\n        inputSpy.resetHistory();\n        changeSpy.resetHistory();\n        await sendKeys({ press: 'PageDown' });\n        await sendKeys({ press: 'PageDown' });\n\n        await elementUpdated(el);\n\n        expect(inputSpy.callCount).to.equal(2);\n        expect(changeSpy.callCount).to.equal(2);\n        expect(parseFloat(el.inputY.value).toFixed(2)).to.equal(\n            Yvalue.toFixed(2)\n        );\n    });\n    it('retains `hue` value when s = 0 in HSL string format', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsl(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n        expect(el.color).to.equal('hsl(100, 50%, 50%)');\n\n        el.color = 'hsl(100, 0%, 50%)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'new hue').to.equal(100);\n        expect(el.x, 'new x').to.equal(0);\n        expect(el.y, 'new y').to.equal(0.5);\n        expect(el.color).to.equal('hsl(100, 0%, 50%)');\n    });\n    it('retains `hue` value when s = 0 in HSL object format', async () => {\n        let inputColor = { h: 100, s: 0.5, l: 0.5 };\n\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area .color=${inputColor}></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        let outputColor = el.color as { h: number; s: number; l: number };\n        const variance = 0.004;\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0.67);\n        expect(el.y, 'y').to.equal(0.75);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n\n        inputColor = { h: 100, s: 0, l: 0.5 };\n        el.color = inputColor;\n\n        await elementUpdated(el);\n        outputColor = el.color as { h: number; s: number; l: number };\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.l - inputColor.l)).to.be.lessThan(variance);\n    });\n    it('retains `hue` value when s = 0 in HSV string format', async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area color=\"hsv(100, 50%, 50%)\"></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.hue, 'hue').to.equal(100);\n        expect(el.x, 'x').to.equal(0.5);\n        expect(el.y, 'y').to.equal(0.5);\n        expect(el.color).to.equal('hsv(100, 50%, 50%)');\n\n        el.color = 'hsv(100, 0%, 50%)';\n        await elementUpdated(el);\n\n        expect(el.hue, 'new hue').to.equal(100);\n        expect(el.x, 'new x').to.equal(0);\n        expect(el.y, 'new y').to.equal(0.5);\n        expect(el.color).to.equal('hsv(100, 0%, 50%)');\n    });\n    it('retains `hue` value when s = 0 in HSV object format', async () => {\n        let inputColor = { h: 100, s: 0.5, v: 0.5 };\n\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area .color=${inputColor}></sp-color-area>\n        `);\n\n        await elementUpdated(el);\n\n        let outputColor = el.color as { h: number; s: number; v: number };\n        const variance = 0.00005;\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0.5);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n\n        inputColor = { h: 100, s: 0, v: 0.5 };\n        el.color = inputColor;\n\n        await elementUpdated(el);\n        outputColor = el.color as { h: number; s: number; v: number };\n\n        expect(el.hue).to.equal(100);\n        expect(el.x, 'x').to.equal(0);\n        expect(el.y, 'y').to.equal(0.5);\n\n        expect(Math.abs(outputColor.h - inputColor.h)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.s - inputColor.s)).to.be.lessThan(variance);\n        expect(Math.abs(outputColor.v - inputColor.v)).to.be.lessThan(variance);\n    });\n    const colorFormats: {\n        name: string;\n        color: ColorTypes;\n        test?: string;\n    }[] = [\n        //rgb\n        { name: 'RGB String', color: 'rgb(204, 51, 204)' },\n        { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },\n        //prgb\n        { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },\n        { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n        // hex\n        { name: 'Hex', color: 'cc33cc' },\n        { name: 'Hex String', color: '#cc33cc' },\n        // hex8\n        { name: 'Hex8', color: 'cc33ccff' },\n        { name: 'Hex8 String', color: '#cc33ccff' },\n        // name\n        { name: 'string', color: 'red', test: 'ff0000' },\n        // hsl\n        { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n        { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n        // hsv\n        { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n        { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n    ];\n    colorFormats.map((format) => {\n        it(`maintains \\`color\\` format as ${format.name}`, async () => {\n            const el = await fixture<ColorArea>(html`\n                <sp-color-area></sp-color-area>\n            `);\n\n            if (typeof format.color === 'string') {\n                el.color = format.color;\n            } else {\n                el.color = { ...format.color } as ColorTypes;\n            }\n            if (format.name.startsWith('Hex')) {\n                expect(el.color).to.equal(format.color);\n            } else if (format.name == 'string') {\n                expect(el.color).to.equal(format.test);\n            } else {\n                expect(el.color).to.deep.equal(format.color);\n            }\n        });\n    });\n\n    it(`resolves Hex3 format to Hex6 format`, async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n        el.color = '0f0';\n        expect(el.color).to.equal('00ff00');\n\n        el.color = '#1e0';\n        expect(el.color).to.equal('#11ee00');\n    });\n    it(`resolves Hex4 format to Hex8 format`, async () => {\n        const el = await fixture<ColorArea>(html`\n            <sp-color-area></sp-color-area>\n        `);\n        el.color = 'f3af';\n        expect(el.color).to.equal('ff33aaff');\n\n        el.color = '#f3af';\n        expect(el.color).to.equal('#ff33aaff');\n    });\n});\n"],
+  "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAGP,OAAO;AAEP,SAAS,gBAAgB;AACzB,SAAS,WAAW;AAEpB,SAAS,6BAA6B;AAEtC,SAAS,aAAa,MAAM;AACxB;AAAA,IACI,YACI,MAAM,QAAmB;AAAA;AAAA,aAExB;AAAA,EACT;AACA,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAC/B,UAAM,GAAG;AAET,OAAG,eAAe;AAClB,UAAM,GAAG;AAET,OAAG,WAAW;AACd,UAAM,GAAG;AAET,WAAO,GAAG,OAAO,EAAE,GAAG,GAAG;AAAA,EAC7B,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,OAAG,IAAI;AACP,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;AAEzB,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AACpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACnD,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,OAAG,IAAI;AACP,UAAM,GAAG;AAET,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;AAEzB,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AACpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACnD,CAAC;AACD,KAAG,6BAA6B,YAAY;AACxC,UAAM,OAAO,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1C;AACD,UAAM,KAAK,KAAK,cAAc,eAAe;AAC7C,UAAM,SAAS,KAAK;AAAA,MAChB;AAAA,IACJ;AACA,UAAM,SAAS,KAAK;AAAA,MAChB;AAAA,IACJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,MAAM;AAEb,WAAO,SAAS,eAAe,cAAc,EAAE,GAAG,MAAM,MAAM;AAE9D,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,SAAS,EAAE,GAAG,MAAM,EAAE;AACrD,QAAI,QAAQ,GAAG;AACf,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,IAAI,MAAM,KAAK;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,aAAa,EAAE,GAAG,MAAM,MAAM;AAE7D,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,eAAe,eAAe,EAAE,GAAG,MAAM,EAAE;AAE3D,YAAQ,GAAG;AACX,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,WAAO,GAAG,KAAK,EAAE,GAAG,IAAI,MAAM,KAAK;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,WAAO,SAAS,eAAe,oBAAoB,EAAE,GAAG,MAAM,MAAM;AAAA,EACxE,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAC5D,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAE5D,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,uBAAuB,EAAE,GAAG;AAAA,MACpD;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,uBAAuB,EAAE,GAAG;AAAA,MACpD;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,iBAAiB,EAAE,GAAG;AAAA,MAC9C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,iBAAiB,EAAE,GAAG;AAAA,MAC9C;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,2EAA2E,YAAY;AACtF,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMnC;AACD,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAC5D,UAAM,SAAS,GAAG,WAAW,cAAc,iBAAiB;AAE5D,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AACA,WAAO,iCAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,MAC1C;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AAEpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAC/C,OAAG,IAAI;AACP,UAAM,GAAG;AACT,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACnD,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,GAAG;AAET,UAAM,SAAS,GAAG,WAAW,cAAc,SAAS;AACpD,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAC/C,OAAG,IAAI;AACP,UAAM,GAAG;AACT,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACnD,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,UAAM,EAAE,OAAO,IAAI;AAEnB,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,iBAAiB;AAE/C,OAAG,MAAM;AAET,UAAM,eAAe,EAAE;AAEvB,WAAO,OAAO,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACrD,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAAA,EACnC,CAAC;AACD,KAAG,kCAAkC,YAAY;AAC7C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG;AACnC,WAAO,GAAG,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI;AAChC,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,IAAI;AAEjC,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,OAAO,EAAE,GAAG,MAAM,GAAG;AACpC,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;AAC9B,WAAO,GAAG,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;AAAA,EAClC,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAAA,EAC3B,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAAA,EAC3B,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,OAAG,OAAO,MAAM;AAChB,UAAM,UAAU;AAEhB,QAAI,cAAc,SAAS,IAAI,QAAQ;AACvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,OAAG,aAAa,OAAO,KAAK;AAC5B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,kBAAc,SAAS,IAAI,QAAQ;AACnC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,OAAG,MAAM;AAET,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,+CAA+C,YAAY;AAC1D,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AACvB,OAAG,MAAM;AACT,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,UAAM,SAAS;AAAA,MACX,MAAM;AAAA,IACV,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,wBAAwB;AAClD,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,IAAI;AACnC,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,wBAAwB;AAClD,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,wBAAwB;AAClD,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAE1B,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS;AAAA,MACX,IAAI;AAAA,IACR,CAAC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,wBAAwB;AAClD,WAAO,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,IAAI;AAClC,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,0BAA0B,YAAY;AACrC,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA;AAAA,SAInC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,EAAE;AAEvB,UAAM,EAAE,OAAO,IAAI;AAEnB,WAAO,oBAAoB,MAAM;AAC7B;AAAA,IACJ;AACA,WAAO,wBAAwB,MAAM;AACjC;AAAA,IACJ;AAEA,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,WAAO;AAAA,MACH,IAAI,aAAa,eAAe;AAAA,QAC5B,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,UAAM,OAAO,GAAG,aAAa,GAAG,aAAa;AAC7C,UAAM,WAAW,KAAK,cAAc,WAAW;AAC/C,aAAS;AAAA,MACL,IAAI,aAAa,eAAe;AAAA,QAC5B,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AACvB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;AAEvB,aAAS;AAAA,MACL,IAAI,aAAa,eAAe;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI;AAC3C,WAAO,GAAG,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI;AAE3C,WAAO;AAAA,MACH,IAAI,aAAa,eAAe;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AACA,WAAO;AAAA,MACH,IAAI,aAAa,aAAa;AAAA,QAC1B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MAChB,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AACzB,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAC1B,WAAO,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI;AAAA,EAC9B,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,UAAM,WAAW,IAAI;AACrB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA,0BAGlB,MAAM,UAAU,CAAC;AAAA,yBAClB,MAAM,SAAS,CAAC;AAAA;AAAA,SAEhC;AAED,UAAM,eAAe,EAAE;AAEvB,OAAG,OAAO,MAAM;AAEhB,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,UAAU;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,MACd,CAAC;AAAA,IACL;AAEA,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AAEtC,OAAG,OAAO,MAAM;AAEhB,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,SAAS;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,OAAG,OAAO;AAAA,MACN,IAAI,MAAM,UAAU;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,MACd,CAAC;AAAA,IACL;AAEA,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AAAA,EAC1C,CAAC;AACD,KAAG,yEAAyE,YAAY;AACpF,UAAM,WAAW,IAAI;AACrB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA;AAAA,0BAGlB,MAAM,UAAU,CAAC;AAAA,yBAClB,MAAM,SAAS,CAAC;AAAA;AAAA,SAEhC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS,OAAO,OAAO,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC;AACxD,UAAM,SAAS,OAAO,OAAO,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC;AAExD,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,aAAa,CAAC;AACtC,UAAM,SAAS,EAAE,OAAO,aAAa,CAAC;AACtC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AAEvB,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AACnC,UAAM,SAAS,EAAE,OAAO,UAAU,CAAC;AAEnC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AAErC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AAEvB,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AACrC,UAAM,SAAS,EAAE,OAAO,YAAY,CAAC;AAErC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAC/B,UAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAE/B,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,KAAK,QAAQ,CAAC;AAAA,IAC5B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,OAAO,CAAC;AAChC,UAAM,SAAS,EAAE,OAAO,OAAO,CAAC;AAEhC,UAAM,eAAe,EAAE;AACvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,SAAS,CAAC;AAClC,UAAM,SAAS,EAAE,OAAO,SAAS,CAAC;AAElC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,OAC7C,SAAS,KAAK,QAAQ,CAAC;AAAA,IAC5B;AAEA,OAAG,OAAO,MAAM;AAChB,aAAS,aAAa;AACtB,cAAU,aAAa;AACvB,UAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AACpC,UAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AAEpC,UAAM,eAAe,EAAE;AAEvB,WAAO,SAAS,SAAS,EAAE,GAAG,MAAM,CAAC;AACrC,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,WAAW,GAAG,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,GAAG;AAAA,MAC9C,OAAO,QAAQ,CAAC;AAAA,IACpB;AAAA,EACJ,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAE9C,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,SAAS,EAAE,GAAG,MAAM,GAAG;AACtC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,CAAC;AAChC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACjD,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,QAAI,aAAa,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI;AAE1C,UAAM,KAAK,MAAM,QAAmB;AAAA,oCACR,UAAU;AAAA,SACrC;AAED,UAAM,eAAe,EAAE;AAEvB,QAAI,cAAc,GAAG;AACrB,UAAM,WAAW;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAC/B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,IAAI;AAE/B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAEtE,iBAAa,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI;AACpC,OAAG,QAAQ;AAEX,UAAM,eAAe,EAAE;AACvB,kBAAc,GAAG;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AAC5B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAAA,EAC1E,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,KAAK,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,oBAAoB;AAE9C,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,KAAK,SAAS,EAAE,GAAG,MAAM,GAAG;AACtC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,CAAC;AAChC,WAAO,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,GAAG;AAClC,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,mBAAmB;AAAA,EACjD,CAAC;AACD,KAAG,uDAAuD,YAAY;AAClE,QAAI,aAAa,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI;AAE1C,UAAM,KAAK,MAAM,QAAmB;AAAA,oCACR,UAAU;AAAA,SACrC;AAED,UAAM,eAAe,EAAE;AAEvB,QAAI,cAAc,GAAG;AACrB,UAAM,WAAW;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC9B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAEtE,iBAAa,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI;AACpC,OAAG,QAAQ;AAEX,UAAM,eAAe,EAAE;AACvB,kBAAc,GAAG;AAEjB,WAAO,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAC3B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC;AAC5B,WAAO,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,GAAG;AAE9B,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AACtE,WAAO,KAAK,IAAI,YAAY,IAAI,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,SAAS,QAAQ;AAAA,EAC1E,CAAC;AACD,QAAM,eAIA;AAAA;AAAA,IAEF,EAAE,MAAM,cAAc,OAAO,oBAAoB;AAAA,IACjD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,EAAE,EAAE;AAAA;AAAA,IAEtD,EAAE,MAAM,eAAe,OAAO,qBAAqB;AAAA,IACnD,EAAE,MAAM,QAAQ,OAAO,EAAE,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,EAAE,EAAE;AAAA;AAAA,IAE9D,EAAE,MAAM,OAAO,OAAO,SAAS;AAAA,IAC/B,EAAE,MAAM,cAAc,OAAO,UAAU;AAAA;AAAA,IAEvC,EAAE,MAAM,QAAQ,OAAO,WAAW;AAAA,IAClC,EAAE,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA,IAE1C,EAAE,MAAM,UAAU,OAAO,OAAO,MAAM,SAAS;AAAA;AAAA,IAE/C,EAAE,MAAM,cAAc,OAAO,qBAAqB;AAAA,IAClD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,oBAAoB,GAAG,KAAK,GAAG,EAAE,EAAE;AAAA;AAAA,IAEtE,EAAE,MAAM,cAAc,OAAO,sBAAsB;AAAA,IACnD,EAAE,MAAM,OAAO,OAAO,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,EAAE,EAAE;AAAA,EAC1D;AACA,eAAa,IAAI,CAAC,WAAW;AACzB,OAAG,iCAAiC,OAAO,IAAI,IAAI,YAAY;AAC3D,YAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,aAEnC;AAED,UAAI,OAAO,OAAO,UAAU,UAAU;AAClC,WAAG,QAAQ,OAAO;AAAA,MACtB,OAAO;AACH,WAAG,QAAQ,EAAE,GAAG,OAAO,MAAM;AAAA,MACjC;AACA,UAAI,OAAO,KAAK,WAAW,KAAK,GAAG;AAC/B,eAAO,GAAG,KAAK,EAAE,GAAG,MAAM,OAAO,KAAK;AAAA,MAC1C,WAAW,OAAO,QAAQ,UAAU;AAChC,eAAO,GAAG,KAAK,EAAE,GAAG,MAAM,OAAO,IAAI;AAAA,MACzC,OAAO;AACH,eAAO,GAAG,KAAK,EAAE,GAAG,KAAK,MAAM,OAAO,KAAK;AAAA,MAC/C;AAAA,IACJ,CAAC;AAAA,EACL,CAAC;AAED,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,QAAQ;AAElC,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,SAAS;AAAA,EACvC,CAAC;AACD,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAmB;AAAA;AAAA,SAEnC;AACD,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,UAAU;AAEpC,OAAG,QAAQ;AACX,WAAO,GAAG,KAAK,EAAE,GAAG,MAAM,WAAW;AAAA,EACzC,CAAC;AACL,CAAC;",
   "names": []
 }