@spectrum-web-components/color-area NPM | npm.io

1.7.0 • Published 11 days ago

Install

Weekly downloads

6

License

Apache-2.0

Repository

Last release

11 days ago

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

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
Named color strings (see full list)

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>

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/color-handle @spectrum-web-components/opacity-checkerboard @spectrum-web-components/reactive-controllers @spectrum-web-components/shared

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/bundle @swc-react/color-area

2 months ago

0.0.0-20250211061642

4 months ago

0.0.0-20241211110529

6 months ago

1.7.0-snapshot.20250519151006

1 month ago

0.0.0-20241209155954

6 months ago

3 months ago

2 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

0.0.0-20241211114228

6 months ago

4 months ago

0.0.0-20250210092211

4 months ago

3 months ago

2 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

0.0.0-20250327111926

3 months ago

1.7.0-snapshot.20250519143559

1 month ago

0.0.0-20241211115453

6 months ago

3 months ago

3 months ago

2 months ago

0.0.0-20250210095839

4 months ago

4 months ago

1.7.0-snapshot.20250609112703

13 days ago

8 months ago

8 months ago

0.0.0-20241211113516

6 months ago

8 months ago

1.0.1-color-testing

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

1.3.0-testing.0

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

0.0.0-20250210074307

4 months ago

4 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

3 months ago

7 months ago

7 months ago

7 months ago

7 months ago

0.0.0-20241211111227

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

6 months ago

4 months ago

7 months ago

4 months ago

7 months ago

1.6.1-preview-2d9fabee.20250507183133

2 months ago

0.0.0-20250210113716

4 months ago

0.0.0-20241211112232

6 months ago

6 months ago

0.0.0-20250210080630

4 months ago

4 months ago

0.0.0-20241211071818

6 months ago

4 months ago

4 months ago

4 months ago

4 months ago

0.0.0-20250210081721

4 months ago

4 months ago

4 months ago

4 months ago

0.0.0-20250210104349

4 months ago

0.0.0-20241211070850

6 months ago

11 days ago

3 months ago

0.0.0-20241211112924

6 months ago

1.7.0-snapshot.20250519200040

1 month ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

2 months ago

4 months ago

0.0.0-20250410163257

2 months ago

0.0.0-modal-performance-20250414163725

2 months ago

4 months ago

0.0.0-20250210075156

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

9 months ago

11 months ago

11 months ago

11 months ago

1 year ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.33.3-overlay.66

2 years ago

0.33.3-overlay.65

2 years ago

0.33.3-overlay.61

2 years ago

0.31.1-react.21

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.30.1-overlay.30

2 years ago

0.33.1-overlay.39

2 years ago

0.30.1-overlay.31

2 years ago

2 years ago

2 years ago

0.30.1-overlay.38

2 years ago

0.30.1-overlay.37

2 years ago

0.30.1-overlay.41

2 years ago

0.30.1-overlay.42

2 years ago

0.30.1-overlay.40

2 years ago

2 years ago

0.33.1-overlay.41

2 years ago

0.32.1-overlay.33

2 years ago

0.32.1-overlay.41

2 years ago

2 years ago

0.31.1-overlay.29

2 years ago

0.6.3-overlay.15

2 years ago

0.6.3-overlay.14

2 years ago

0.6.3-overlay.13

2 years ago

0.6.3-overlay.18

2 years ago

0.6.3-overlay.17

2 years ago

0.6.3-overlay.12

2 years ago

0.6.3-overlay.11

2 years ago

0.6.3-overlay.10

2 years ago

0.6.1-overlay.9

2 years ago

0.6.1-overlay.8

2 years ago

0.6.1-overlay.22

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

0.5.7-overlay-warning.19

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.5.0-devmode.0

3 years ago

0.4.12-devmode2.0

3 years ago

3 years ago

0.4.12-devmode.0

3 years ago

3 years ago

3 years ago

0.4.11-devmode.0

3 years ago

0.4.11-devmode.7

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.4.3-express.12

3 years ago

0.4.4-express.9

3 years ago

0.4.2-express.41

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

0.3.1-lit-next.0

4 years ago

4 years ago

0.2.2-lit-next.0

4 years ago

4 years ago

0.2.1-lit-next.24

4 years ago

0.2.1-lit-next.0

4 years ago

4 years ago

4 years ago

0.1.13-lit-next.0

4 years ago

4 years ago

0.1.12-lit-next.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.2-alpha.1403

4 years ago

0.1.0-alpha.1407

4 years ago

0.0.2-alpha.1239

5 years ago

0.0.2-alpha.1238

5 years ago

0.0.2-alpha.1214

5 years ago