sp-color-handle

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description color color string 'rgba(255, 0, 0, 0.5)' disabled disabled boolean false focused focused boolean false open open boolean false

0.44.0 (2024-07-15) #

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

0.43.0 (2024-06-11) #

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

0.42.5 (2024-05-24) #

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

0.42.4 (2024-05-14) #

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

0.42.3 (2024-05-01) #

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

0.42.2 (2024-04-03) #

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

0.42.1 (2024-04-02) #

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

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-handle

0.41.1 (2024-02-22) #

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

0.41.0 (2024-02-13) #

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

0.40.5 (2024-02-05) #

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

0.40.4 (2024-01-29) #

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

0.40.3 (2024-01-11) #

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

0.40.2 (2023-12-18) #

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

0.40.1 (2023-12-05) #

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

0.40.0 (2023-11-16) #

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

0.39.4 (2023-11-02) #

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

0.39.3 (2023-10-18) #

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

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-handle

0.39.0 (2023-09-25) #

Bug Fixes #

  • color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)

Features #

  • color-slider: migrate to core tokens (#3507) (96d0d40)

0.38.0 (2023-09-05) #

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

0.37.0 (2023-08-18) #

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

0.36.0 (2023-08-18) #

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

0.35.0 (2023-07-31) #

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

0.34.0 (2023-07-11) #

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

0.33.2 (2023-06-14) #

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

0.33.0 (2023-06-08) #

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

0.32.0 (2023-06-01) #

Bug Fixes #

  • color-handle,color-loupe: accept updated CSS token names (8c28f6d)

0.31.0 (2023-05-17) #

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

0.30.0 (2023-05-03) #

Bug Fixes #

  • address westbrooks comments (634af60)
  • expand support for maintaining hue and saturation across customization (fe18944)
  • include touch-action rule for draggable content (3f507e6)
  • leverage Color Controller to unify color interface across packages (fb71690)
  • manage "focused" across more contexts (9273c15)
  • prevent focus outline (af2b077)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • color-handle: add color-handle pattern (e3856d8)
  • color-handle: use core tokens (e0c1468)
  • color-loupe: use core tokens (149165c)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)

0.5.0 (2023-04-24) #

Features #

  • color-handle: use core tokens (e0c1468)
  • color-loupe: use core tokens (149165c)

0.4.9 (2023-04-05) #

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

0.4.8 (2023-03-22) #

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

0.4.7 (2023-02-08) #

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

0.4.6 (2023-01-23) #

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

0.4.5 (2023-01-09) #

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

0.4.4 (2022-12-08) #

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

0.4.3 (2022-11-21) #

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

0.4.2 (2022-11-14) #

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

0.4.1 (2022-10-10) #

Bug Fixes #

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

0.4.0 (2022-08-09) #

Features #

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

0.3.11 (2022-08-04) #

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

0.3.10 (2022-07-18) #

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

0.3.9 (2022-06-29) #

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

0.3.8 (2022-06-07) #

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

0.3.7 (2022-05-12) #

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

0.3.6 (2022-04-21) #

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

0.3.5 (2022-03-08) #

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

0.3.4 (2022-03-04) #

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

0.3.3 (2022-02-22) #

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

0.3.2 (2022-01-26) #

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

0.3.1 (2021-12-13) #

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

0.3.0 (2021-11-08) #

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

0.2.1 (2021-11-08) #

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

0.2.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.1.10 (2021-10-12) #

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

0.1.9 (2021-09-20) #

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

0.1.8 (2021-09-13) #

Bug Fixes #

  • manage "focused" across more contexts (9273c15)
  • prevent focus outline (af2b077)

0.1.7 (2021-07-22) #

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

0.1.6 (2021-07-01) #

Bug Fixes #

  • expand support for maintaining hue and saturation across customization (fe18944)

0.1.5 (2021-06-16) #

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

0.1.4 (2021-05-12) #

Bug Fixes #

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

0.1.3 (2021-04-09) #

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

0.1.2 (2021-03-29) #

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

0.1.1 (2021-03-22) #

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

0.1.0 (2021-03-05) #

Bug Fixes #

  • address westbrooks comments (634af60)

Features #

  • color-handle: add color-handle pattern (e3856d8)

Description #

The <sp-color-handle> is used to select a colour on an <sp-color-area>, <sp-color-slider>, or <sp-color-wheel>. It functions similarly to the handle on an <sp-slider>.

Usage #

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

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

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

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

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

import { ColorHandle } from '@spectrum-web-components/color-handle';

Standard #

<sp-color-handle></sp-color-handle>

Disabled #

<sp-color-handle disabled></sp-color-handle>

Open #

When the <sp-color-handle> uses the open property, the <sp-color-loupe> component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type.

<div style="height: 72px"></div>
<sp-color-handle open></sp-color-handle>