{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-color-swatch",
      "path": "./lib/uui-color-swatch.element.ts",
      "description": "Color swatch, can have label and be selectable, disabled or readonly.",
      "attributes": [
        {
          "name": "value",
          "description": "Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.",
          "type": "string"
        },
        {
          "name": "color",
          "description": "Color of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
          "type": "string | undefined"
        },
        {
          "name": "disabled",
          "description": "Sets the swatch to disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "readonly",
          "description": "Sets the swatch to readonly mode.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "show-label",
          "description": "When true shows element label below the color checkbox",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        },
        {
          "name": "selectable",
          "description": "Enable the ability to select this element.",
          "type": "boolean"
        },
        {
          "name": "selected",
          "description": "Attribute applied when the element is selected.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "value",
          "attribute": "value",
          "description": "Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.",
          "type": "string"
        },
        {
          "name": "color",
          "attribute": "color",
          "description": "Color of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
          "type": "string | undefined"
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Sets the swatch to disabled.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "readonly",
          "attribute": "readonly",
          "description": "Sets the swatch to readonly mode.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "showLabel",
          "attribute": "show-label",
          "description": "When true shows element label below the color checkbox",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        },
        {
          "name": "selectable",
          "attribute": "selectable",
          "description": "Enable the ability to select this element.",
          "type": "boolean"
        },
        {
          "name": "selected",
          "attribute": "selected",
          "description": "Attribute applied when the element is selected.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "active",
          "attribute": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        }
      ],
      "events": [
        {
          "name": "selected",
          "description": "fires when the media card is selected"
        },
        {
          "name": "deselected",
          "description": "fires when the media card is deselected"
        }
      ],
      "slots": [
        {
          "name": "label",
          "description": "Default slot for the label."
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-swatch-size",
          "description": "The size of the swatch."
        },
        {
          "name": "--uui-swatch-border-width",
          "description": "The width of the border."
        },
        {
          "name": "--uui-swatch-color",
          "description": "The width of the border."
        }
      ]
    }
  ]
}