sp-color-handle

Overview API Changelog

Description

Section titled 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

Section titled 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

Section titled Standard
<sp-color-handle></sp-color-handle>

Disabled

Section titled Disabled
<sp-color-handle disabled></sp-color-handle>

Open

Section titled 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>

API

Attributes and Properties

Section titled 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

Changelog

1.0.1 (2024-11-11)

Section titled

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

1.0.0 (2024-10-31)

Section titled

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

0.49.0 (2024-10-15)

Section titled

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

0.48.1 (2024-10-01)

Section titled

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

0.48.0 (2024-09-17)

Section titled

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

0.47.2 (2024-09-03)

Section titled

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

0.47.1 (2024-08-27)

Section titled

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

0.47.0 (2024-08-20)

Section titled

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

0.46.0 (2024-08-08)

Section titled

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

0.45.0 (2024-07-30)

Section titled

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

0.44.0 (2024-07-15)

Section titled

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

0.43.0 (2024-06-11)

Section titled

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

0.42.5 (2024-05-24)

Section titled

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

0.42.4 (2024-05-14)

Section titled

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

0.42.3 (2024-05-01)

Section titled

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

0.42.2 (2024-04-03)

Section titled

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

0.42.1 (2024-04-02)

Section titled

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

0.42.0 (2024-03-19)

Section titled

Features

Section titled Features
  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Section titled

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

0.41.1 (2024-02-22)

Section titled

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

0.41.0 (2024-02-13)

Section titled

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

0.40.5 (2024-02-05)

Section titled

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

0.40.4 (2024-01-29)

Section titled

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

0.40.3 (2024-01-11)

Section titled

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

0.40.2 (2023-12-18)

Section titled

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

0.40.1 (2023-12-05)

Section titled

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

0.40.0 (2023-11-16)

Section titled

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

0.39.4 (2023-11-02)

Section titled

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

0.39.3 (2023-10-18)

Section titled

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

0.39.2 (2023-10-13)

Section titled

Bug Fixes

Section titled Bug Fixes
  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06)

Section titled

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

0.39.0 (2023-09-25)

Section titled

Bug Fixes

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

Features

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

0.38.0 (2023-09-05)

Section titled

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

0.37.0 (2023-08-18)

Section titled

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

0.36.0 (2023-08-18)

Section titled

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

0.35.0 (2023-07-31)

Section titled

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

0.34.0 (2023-07-11)

Section titled

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

0.33.2 (2023-06-14)

Section titled

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

0.33.0 (2023-06-08)

Section titled

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

0.32.0 (2023-06-01)

Section titled

Bug Fixes

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

0.31.0 (2023-05-17)

Section titled

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

0.30.0 (2023-05-03)

Section titled 0.30.0 (2023-05-03)

Bug Fixes

Section titled 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

Section titled 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)

Section titled

Features

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

0.4.9 (2023-04-05)

Section titled

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

0.4.8 (2023-03-22)

Section titled

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

0.4.7 (2023-02-08)

Section titled

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

0.4.6 (2023-01-23)

Section titled

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

0.4.5 (2023-01-09)

Section titled

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

0.4.4 (2022-12-08)

Section titled

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

0.4.3 (2022-11-21)

Section titled

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

0.4.2 (2022-11-14)

Section titled

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

0.4.1 (2022-10-10)

Section titled

Bug Fixes

Section titled Bug Fixes
  • leverage Color Controller to unify color interface across packages (fb71690)

0.4.0 (2022-08-09)

Section titled

Features

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

0.3.11 (2022-08-04)

Section titled

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

0.3.10 (2022-07-18)

Section titled

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

0.3.9 (2022-06-29)

Section titled

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

0.3.8 (2022-06-07)

Section titled

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

0.3.7 (2022-05-12)

Section titled

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

0.3.6 (2022-04-21)

Section titled

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

0.3.5 (2022-03-08)

Section titled

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

0.3.4 (2022-03-04)

Section titled

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

0.3.3 (2022-02-22)

Section titled

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

0.3.2 (2022-01-26)

Section titled

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

0.3.1 (2021-12-13)

Section titled

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

0.3.0 (2021-11-08)

Section titled

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

0.2.1 (2021-11-08)

Section titled

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

0.2.0 (2021-11-02)

Section titled

Features

Section titled Features
  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.1.10 (2021-10-12)

Section titled

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

0.1.9 (2021-09-20)

Section titled

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

0.1.8 (2021-09-13)

Section titled

Bug Fixes

Section titled Bug Fixes
  • manage "focused" across more contexts (9273c15)
  • prevent focus outline (af2b077)

0.1.7 (2021-07-22)

Section titled

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

0.1.6 (2021-07-01)

Section titled

Bug Fixes

Section titled Bug Fixes
  • expand support for maintaining hue and saturation across customization (fe18944)

0.1.5 (2021-06-16)

Section titled

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

0.1.4 (2021-05-12)

Section titled

Bug Fixes

Section titled Bug Fixes
  • include touch-action rule for draggable content (3f507e6)

0.1.3 (2021-04-09)

Section titled

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

0.1.2 (2021-03-29)

Section titled

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

0.1.1 (2021-03-22)

Section titled

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

0.1.0 (2021-03-05)

Section titled 0.1.0 (2021-03-05)

Bug Fixes

Section titled Bug Fixes
  • address westbrooks comments (634af60)

Features

Section titled Features
  • color-handle: add color-handle pattern (e3856d8)