An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
npm install @spectrum-web-components/color-loupeAn
``bash`
yarn add @spectrum-web-components/color-loupe
Import the side effectful registration of via:
`javascript`
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:
`javascript`
import { ColorLoupe } from '@spectrum-web-components/color-loupe';
The color loupe consists of:
- A floating loupe element positioned above the interaction point
- A color preview that reflects the color currently sampled by its parent color component
`html`
#### Color
The color property sets the visual color displayed within the loupe. This accepts any valid CSS color format.
For a complete list of supported color formats, see the ColorController documentation.
Transparency Support: When using transparent colors, the handle displays an opacity checkerboard pattern background to clearly show the transparency level.
`html
>
$3
#### Open
The
attribute controls whether the loupe is visible. When open is present, the loupe displays the color preview.`html
This loupe above this text is visible.
This loupe above this text is not visible.
`$3
The color loupe is typically managed by its parent color component (such as
, , or ). The loupe automatically appears when the user interacts with the parent component and disappears when the interaction ends.#### Automatic behavior
- Touch input: The loupe automatically appears during touch interactions with any color component (
, , or ) to prevent the finger from obscuring the selected color
- Mouse/Stylus input: The loupe remains hidden by default for precision pointing devices
- Parent control: The loupe's visibility is managed by the parent color component
- Accessibility: The loupe ensures that users can see the selected color even when their finger covers the interaction point$3
The
is designed to work as part of accessible color selection components. The loupe automatically appears during touch interactions with any of these components to ensure the selected color remains visible:
Color-Area
`html
>
aria-describedby="color-context"
>
Color-Slider
html
>
aria-describedby="color-context"
>
Color-Wheel
html
>
aria-describedby="color-context"
>
#### Screen reader support
The color loupe is rendered as a visual indicator and does not directly interface with screen readers. Accessibility is provided through the parent color component's ARIA implementation.
#### Focus management
Focus is managed by the parent color component, with the loupe reflecting the focused state visually when its parent component has keyboard focus.
#### Touch accessibility
- Automatic loupe display: During touch interactions with any color component, the loupe automatically appears to ensure the selected color remains visible
- Finger coverage prevention: The loupe prevents the user's finger from obscuring the color they're selecting
- Touch interaction support: Color components support touch interactions with proper pointer event handling
- Visual feedback: The loupe provides immediate visual feedback during touch interactions
#### Best practices
- Ensure the parent color component (for example,
, sp-color-slider, or sp-color-wheel) provides appropriate labeling via visible text or ARIA
- Avoid conveying meaning through color alone; pair color with text, labels, or other indicators as appropriate
- The loupe is visual-only and should not receive focus. Manage focus on the interactive parent control
- Test touch interactions on mobile devices to ensure the loupe appears correctly and provides adequate visual feedback#### Accessible example
Provide clear context for what the loupe displays. The loupe itself is presentational and is typically managed by its parent color component. During touch interactions, the loupe automatically appears to ensure the selected color remains visible. The loupe is a visual-only element and doesn't require ARIA attributes since it doesn't provide interactive functionality.
`html
aria-label="Color selection interface"
style="padding: 100px 0 0;"
>
>
The loupe above shows the color currently selected. During touch
interactions, it automatically appears to prevent your finger from
covering the selected color.