{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "sp-color-area.js",
      "declarations": [],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "sp-color-area",
          "declaration": {
            "name": "ColorArea",
            "module": "/src/ColorArea.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/ColorArea.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "ColorArea",
          "slots": [
            {
              "description": "a custom gradient visually outlining the available color values",
              "name": "gradient"
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "privacy": "public",
              "default": "false",
              "attribute": "disabled",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "focused",
              "type": {
                "text": "boolean"
              },
              "privacy": "public",
              "default": "false",
              "attribute": "focused",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "labelX",
              "type": {
                "text": "string"
              },
              "privacy": "public",
              "default": "'saturation'",
              "attribute": "label-x"
            },
            {
              "kind": "field",
              "name": "labelY",
              "type": {
                "text": "string"
              },
              "privacy": "public",
              "default": "'luminosity'",
              "attribute": "label-y"
            },
            {
              "kind": "field",
              "name": "handle",
              "type": {
                "text": "ColorHandle"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "languageResolver",
              "privacy": "private",
              "default": "new LanguageResolutionController(this)"
            },
            {
              "kind": "field",
              "name": "colorController",
              "privacy": "private",
              "default": "new ColorController(this, { manageAs: 'hsv' })",
              "description": "A controller for managing color interactions within the ColorArea component.\n\nThe `ColorController` is instantiated with the `manageAs` option set to `hsv`\nbecause the ColorArea component is designed to manipulate the saturation (`s`)\nand value (`v`) components of the HSV color model along the x and y axes,\nrespectively. 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\nIn 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\nBy managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value\nas the user interacts with the ColorArea component.",
              "type": {
                "text": "ColorController"
              }
            },
            {
              "kind": "field",
              "name": "hue",
              "type": {
                "text": "number"
              },
              "privacy": "public",
              "attribute": "hue"
            },
            {
              "kind": "field",
              "name": "value",
              "type": {
                "text": "ColorTypes"
              },
              "privacy": "public",
              "readonly": true,
              "attribute": "value"
            },
            {
              "kind": "field",
              "name": "color",
              "type": {
                "text": "ColorTypes"
              },
              "privacy": "public",
              "attribute": "color"
            },
            {
              "kind": "field",
              "name": "activeAxis",
              "type": {
                "text": "string"
              },
              "privacy": "private",
              "default": "'x'"
            },
            {
              "kind": "field",
              "name": "x",
              "type": {
                "text": "number"
              },
              "privacy": "public",
              "attribute": "x"
            },
            {
              "kind": "field",
              "name": "y",
              "type": {
                "text": "number"
              },
              "privacy": "public",
              "attribute": "y"
            },
            {
              "kind": "field",
              "name": "step",
              "type": {
                "text": "number"
              },
              "privacy": "public",
              "default": "0.01",
              "attribute": "step"
            },
            {
              "kind": "field",
              "name": "inputX",
              "type": {
                "text": "HTMLInputElement"
              },
              "privacy": "public"
            },
            {
              "kind": "field",
              "name": "inputY",
              "type": {
                "text": "HTMLInputElement"
              },
              "privacy": "public"
            },
            {
              "kind": "field",
              "name": "altered",
              "type": {
                "text": "number"
              },
              "privacy": "private",
              "default": "0"
            },
            {
              "kind": "field",
              "name": "activeKeys",
              "privacy": "private",
              "default": "new Set()"
            },
            {
              "kind": "field",
              "name": "_valueChanged",
              "type": {
                "text": "boolean"
              },
              "privacy": "private",
              "default": "false"
            },
            {
              "kind": "method",
              "name": "focus",
              "privacy": "public",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "focusOptions",
                  "default": "{}",
                  "type": {
                    "text": "FocusOptions"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "forwardFocus",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              }
            },
            {
              "kind": "method",
              "name": "handleFocus",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              }
            },
            {
              "kind": "method",
              "name": "handleBlur",
              "privacy": "public",
              "return": {
                "type": {
                  "text": "void"
                }
              }
            },
            {
              "kind": "method",
              "name": "handleKeydown",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "KeyboardEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handleKeypress",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              }
            },
            {
              "kind": "method",
              "name": "handleKeyup",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "KeyboardEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handleInput",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "Event & { target: HTMLInputElement }"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handleChange",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "Event & { target: HTMLInputElement }"
                  }
                }
              ]
            },
            {
              "kind": "field",
              "name": "boundingClientRect",
              "type": {
                "text": "DOMRect"
              },
              "privacy": "private"
            },
            {
              "kind": "field",
              "name": "_pointerDown",
              "type": {
                "text": "boolean"
              },
              "privacy": "public",
              "default": "false"
            },
            {
              "kind": "method",
              "name": "getContentBoundingRect",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "DOMRect"
                }
              },
              "description": "Returns a DOMRect describing the content box of the color area in viewport\ncoordinates, excluding the element's border. Using the content box ensures\nthat pointer calculations and handle rendering are aligned to the visible\ngradient area rather than to the border edge."
            },
            {
              "kind": "method",
              "name": "handlePointerdown",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "PointerEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handlePointermove",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "PointerEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "handlePointerup",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "PointerEvent"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "calculateHandlePosition",
              "privacy": "private",
              "return": {
                "type": {
                  "text": ""
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "PointerEvent"
                  },
                  "description": "PointerEvent on slider"
                }
              ],
              "description": "Returns the value under the cursor"
            },
            {
              "kind": "method",
              "name": "handleAreaPointerdown",
              "privacy": "private",
              "return": {
                "type": {
                  "text": "void"
                }
              },
              "parameters": [
                {
                  "name": "event",
                  "type": {
                    "text": "PointerEvent"
                  }
                }
              ]
            },
            {
              "kind": "field",
              "name": "observer",
              "type": {
                "text": "WithSWCResizeObserver['ResizeObserver'] | undefined"
              },
              "privacy": "private"
            }
          ],
          "events": [
            {
              "name": "input",
              "type": {
                "text": "Event"
              },
              "description": "The value of the Color Area has changed."
            },
            {
              "name": "change",
              "type": {
                "text": "Event"
              },
              "description": "An alteration to the value of the Color Area has been committed by the user."
            }
          ],
          "attributes": [
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "disabled"
            },
            {
              "name": "focused",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "focused"
            },
            {
              "name": "label-x",
              "type": {
                "text": "string"
              },
              "default": "'saturation'",
              "fieldName": "labelX"
            },
            {
              "name": "label-y",
              "type": {
                "text": "string"
              },
              "default": "'luminosity'",
              "fieldName": "labelY"
            },
            {
              "name": "hue",
              "type": {
                "text": "number"
              },
              "fieldName": "hue"
            },
            {
              "name": "value",
              "type": {
                "text": "ColorTypes"
              },
              "readonly": true,
              "fieldName": "value"
            },
            {
              "name": "color",
              "type": {
                "text": "ColorTypes"
              },
              "fieldName": "color"
            },
            {
              "name": "x",
              "type": {
                "text": "number"
              },
              "fieldName": "x"
            },
            {
              "name": "y",
              "type": {
                "text": "number"
              },
              "fieldName": "y"
            },
            {
              "name": "step",
              "type": {
                "text": "number"
              },
              "default": "0.01",
              "fieldName": "step"
            }
          ],
          "superclass": {
            "name": "SpectrumElement",
            "package": "@spectrum-web-components/base"
          },
          "tagName": "sp-color-area",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "ColorArea",
          "declaration": {
            "name": "ColorArea",
            "module": "src/ColorArea.js"
          }
        }
      ]
    }
  ]
}