sp-color-loupe

NPM 1.0.1

View Storybook

Try it on webcomponents.dev

Overview

API

Changelog

Description

An <sp-color-loupe> shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

Usage

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

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

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

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

import { ColorLoupe } from '@spectrum-web-components/color-loupe';

Example

<div style="padding: 100px 0 0;">
    <div style="position:relative">
        <sp-color-loupe open="" dir="ltr"></sp-color-loupe>
    </div>
</div>

Attributes and Properties

Property

Attribute

Type

Default

Description

color

string

'rgba(255, 0, 0, 0.5)'

open

boolean

false

1.0.1 (2024-11-11)

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

1.0.0 (2024-10-31)

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

0.49.0 (2024-10-15)

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

0.48.1 (2024-10-01)

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

0.48.0 (2024-09-17)

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

0.47.2 (2024-09-03)

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

0.47.1 (2024-08-27)

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

0.47.0 (2024-08-20)

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

0.46.0 (2024-08-08)

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

0.45.0 (2024-07-30)

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

0.44.0 (2024-07-15)

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

0.43.0 (2024-06-11)

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

0.42.5 (2024-05-24)

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

0.42.4 (2024-05-14)

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

0.42.3 (2024-05-01)

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

0.42.2 (2024-04-03)

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

0.42.1 (2024-04-02)

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

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

0.41.1 (2024-02-22)

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

0.41.0 (2024-02-13)

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

0.40.5 (2024-02-05)

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

0.40.4 (2024-01-29)

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

0.40.3 (2024-01-11)

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

0.40.2 (2023-12-18)

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

0.40.1 (2023-12-05)

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

0.40.0 (2023-11-16)

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

0.39.4 (2023-11-02)

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

0.39.3 (2023-10-18)

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

0.39.2 (2023-10-13)

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

0.39.1 (2023-10-06)

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

0.39.0 (2023-09-25)

Bug Fixes

color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)
opacity checkerboard inclusion order (#3651) (4f417dc)

0.38.0 (2023-09-05)

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

0.37.0 (2023-08-18)

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

0.36.0 (2023-08-18)

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

0.35.0 (2023-07-31)

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

0.34.0 (2023-07-11)

Bug Fixes

color-loupe: hide svg from screen readers (#3318) (01e75b7)

0.33.2 (2023-06-14)

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

0.33.0 (2023-06-08)

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

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

0.30.0 (2023-05-03)

Bug Fixes

address westbrooks comments (634af60)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)
color-loupe: add color-loupe pattern (e2f0d15)
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-loupe: use core tokens (149165c)

0.4.8 (2023-04-05)

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

0.4.7 (2023-03-22)

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

0.4.6 (2023-02-08)

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

0.4.5 (2023-01-23)

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

0.4.4 (2023-01-09)

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

0.4.3 (2022-12-08)

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

0.4.2 (2022-11-21)

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

0.4.1 (2022-11-14)

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

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

0.3.10 (2022-07-18)

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

0.3.9 (2022-06-29)

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

0.3.8 (2022-06-07)

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

0.3.7 (2022-05-12)

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

0.3.6 (2022-04-21)

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

0.3.5 (2022-03-08)

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

0.3.4 (2022-03-04)

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

0.3.3 (2022-02-22)

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

0.3.2 (2022-01-26)

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

0.3.1 (2021-12-13)

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

0.3.0 (2021-11-08)

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

0.2.1 (2021-11-08)

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

0.2.0 (2021-11-02)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)

0.1.7 (2021-09-20)

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

0.1.6 (2021-07-22)

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

0.1.5 (2021-06-16)

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

0.1.4 (2021-05-12)

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

0.1.3 (2021-04-09)

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

0.1.2 (2021-03-29)

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

0.1.1 (2021-03-22)

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

0.1.0 (2021-03-05)

Bug Fixes

address westbrooks comments (634af60)

Features

color-loupe: add color-loupe pattern (e2f0d15)

Spectrum Web Components

sp-color-loupe

Description

Usage

Example

API

Attributes and Properties

Changelog

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

0.44.0 (2024-07-15)

0.43.0 (2024-06-11)

0.42.5 (2024-05-24)

0.42.4 (2024-05-14)

0.42.3 (2024-05-01)

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Features

0.41.2 (2024-03-05)

0.41.1 (2024-02-22)

0.41.0 (2024-02-13)

0.40.5 (2024-02-05)

0.40.4 (2024-01-29)

0.40.3 (2024-01-11)

0.40.2 (2023-12-18)

0.40.1 (2023-12-05)

0.40.0 (2023-11-16)

0.39.4 (2023-11-02)

0.39.3 (2023-10-18)

0.39.2 (2023-10-13)

0.39.1 (2023-10-06)

0.39.0 (2023-09-25)

Bug Fixes

0.38.0 (2023-09-05)

0.37.0 (2023-08-18)

0.36.0 (2023-08-18)

0.35.0 (2023-07-31)

0.34.0 (2023-07-11)

Bug Fixes

0.33.2 (2023-06-14)

0.33.0 (2023-06-08)

0.32.0 (2023-06-01)

Bug Fixes

0.31.0 (2023-05-17)

0.30.0 (2023-05-03)

Bug Fixes

Features

0.5.0 (2023-04-24)

Features

0.4.8 (2023-04-05)

0.4.7 (2023-03-22)

0.4.6 (2023-02-08)

0.4.5 (2023-01-23)

0.4.4 (2023-01-09)

0.4.3 (2022-12-08)

0.4.2 (2022-11-21)

0.4.1 (2022-11-14)

0.4.0 (2022-08-09)

Features

0.3.11 (2022-08-04)

0.3.10 (2022-07-18)

0.3.9 (2022-06-29)

0.3.8 (2022-06-07)

0.3.7 (2022-05-12)

0.3.6 (2022-04-21)

0.3.5 (2022-03-08)

0.3.4 (2022-03-04)

0.3.3 (2022-02-22)

0.3.2 (2022-01-26)

0.3.1 (2021-12-13)

0.3.0 (2021-11-08)

Spectrum
Web Components