sp-color-area

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description color color ColorValue disabled disabled boolean false focused focused boolean false hue hue number labelX label-x string 'saturation' labelY label-y string 'luminosity' step step number 0.01 value value ColorValue x x number y y number

Slots #

Name Description gradient a custom gradient visually outlining the available color values

Events #

Name Type Description change Event An alteration to the value of the Color Area has been committed by the user. input Event The value of the Color Area has changed.

1.0.0 (2024-10-31) #

Note: Version bump only for package @spectrum-web-components/color-area

0.49.0 (2024-10-15) #

Note: Version bump only for package @spectrum-web-components/color-area

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/color-area

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/color-area

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/color-area

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/color-area

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/color-area

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/color-area

0.45.0 (2024-07-30) #

Note: Version bump only for package @spectrum-web-components/color-area

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/color-area

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/color-area

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/color-area

0.42.4 (2024-05-14) #

Bug Fixes #

  • color-area: providing x and y attributes renders color handle correctly (#4240) (9eb5056)

0.42.3 (2024-05-01) #

Bug Fixes #

  • color-area: providing x and y attributes renders color handle correctly (#4240) (9eb5056)

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/color-area

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/color-area

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/color-area

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/color-area

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/color-area

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/color-area

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/color-area

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/color-area

0.39.2 (2023-10-13) #

Bug Fixes #

  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/color-area

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/color-area

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/color-area

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/color-area

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/color-area

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/color-area

0.34.0 (2023-07-11) #

Bug Fixes #

  • color-area,color-slider: color-area labeling, RTL support, vertical slider orientation(#3315) (ca2acda), closes #3313

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/color-area

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/color-area

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/color-area

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/color-area

0.30.0 (2023-05-03) #

Bug Fixes #

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
  • address westbrooks comments (634af60)
  • color-area: fix hue value for hsv and hsl (a66e111)
  • color-area: up and down arrows now work properly (44b9f74)
  • ensure streamingListener ends even if pointercancel not fired (74105f2)
  • expand support for maintaining hue and saturation across customization (fe18944)
  • flappy Slider/Color Area tests (c769c87)
  • include touch-action rule for draggable content (3f507e6)
  • key interaction handling no longer prevents "tab" presses (b542ce8)
  • leverage Color Controller to unify color interface across packages (fb71690)
  • lint away debugger statements (34a498e)
  • manage "focused" across more contexts (9273c15)
  • normalize focus passing during and after pointer events (357931b)
  • overlay: allow overlay-trigger to declaratively open overlay content (194a44e)
  • remove right click value setting (a44968d)
  • update package.json (455b626)
  • use hue normalized color in handle and allow focus (f9e1fa2)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • color-area: add color-area pattern (dc15e1c)
  • color-area: separate X and Y aria labels to improve accessibility (e8d9768)
  • color-area: use core tokens (51a89de)
  • debug colour elements for a11y (7008f7c)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • update lit-* dependencies, wip (377f3c8)

0.6.2 (2023-04-24) #

Bug Fixes #

  • ensure streamingListener ends even if pointercancel not fired (74105f2)

0.6.1 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/color-area

0.6.0 (2023-03-22) #

Features #

  • color-area: use core tokens (51a89de)

0.5.8 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.7 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.6 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.5 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.4 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.3 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.2 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/color-area

0.5.1 (2022-10-10) #

Bug Fixes #

  • leverage Color Controller to unify color interface across packages (fb71690)

0.5.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.4.11 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.10 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.9 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.8 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.7 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.6 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.5 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.4 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.3 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.2 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/color-area

0.4.0 (2021-11-08) #

Features #

  • update lit-* dependencies, wip (377f3c8)

0.3.1 (2021-11-08) #

Bug Fixes #

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.3.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.2.1 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/color-area

0.2.0 (2021-09-20) #

Features #

  • color-area: separate X and Y aria labels to improve accessibility (e8d9768)

0.1.12 (2021-09-13) #

Bug Fixes #

  • flappy Slider/Color Area tests (c769c87)
  • manage "focused" across more contexts (9273c15)

0.1.11 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/color-area

0.1.10 (2021-08-17) #

Bug Fixes #

  • key interaction handling no longer prevents "tab" presses (b542ce8)

0.1.9 (2021-08-03) #

Note: Version bump only for package @spectrum-web-components/color-area

0.1.8 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/color-area

0.1.7 (2021-07-01) #

Bug Fixes #

  • expand support for maintaining hue and saturation across customization (fe18944)
  • normalize focus passing during and after pointer events (357931b)

0.1.6 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/color-area

0.1.5 (2021-06-07) #

Bug Fixes #

  • lint away debugger statements (34a498e)
  • color-area: fix hue value for hsv and hsl (a66e111)

0.1.4 (2021-05-12) #

Bug Fixes #

  • include touch-action rule for draggable content (3f507e6)

0.1.3 (2021-04-09) #

Bug Fixes #

  • use hue normalized color in handle and allow focus (f9e1fa2)

0.1.2 (2021-03-29) #

Bug Fixes #

  • color-area: up and down arrows now work properly (44b9f74)

0.1.1 (2021-03-22) #

Bug Fixes #

  • overlay: allow overlay-trigger to declaratively open overlay content (194a44e)
  • remove right click value setting (a44968d)

0.1.0 (2021-03-05) #

Bug Fixes #

  • address westbrooks comments (634af60)
  • update package.json (455b626)

Features #

  • debug colour elements for a11y (7008f7c)
  • color-area: add color-area pattern (dc15e1c)

Description #

An <sp-color-area> allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/color-area

Import the side effectful registration of <sp-color-area> via:

import '@spectrum-web-components/color-area/sp-color-area.js';

When looking to leverage the ColorArea base class as a type and/or for extension purposes, do so via:

import { ColorArea } from '@spectrum-web-components/color-area';

Color Formatting #

When using the color elements, use el.color to access the color property, which should manage itself in the colour format supplied. For example, If you supply a color in rgb() format, el.color should return the color in rgb() format, as well. In ColorArea, colours are formatted as hex values.

The current color formats supported are as follows:

  • Hex3, Hex4, Hex6, Hex8
  • HSV, HSVA
  • HSL, HSLA
  • RGB, RGBA
  • Strings (eg "red", "blue")

Standard #

<sp-color-area></sp-color-area>

Variants #

Disabled #

An <sp-color-area> in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that the area may become available later.

<sp-color-area disabled></sp-color-area>

Sized #

An <sp-color-area>’s height and width can be customized appropriately for its context.

<sp-color-area
    style="
        width: 72px; 
        height: 72px"
></sp-color-area>

Labels #

An <sp-color-area> renders accessible labels for each axis: "saturation" and "luminosity". Specify label-x and label-y attributes to override these defaults.

<sp-color-area
    label-x="Color intensity"
    label-y="Color brightness"
></sp-color-area>