# swc-color-handle

A draggable dot rendered on top of a color area, slider, or wheel that shows the currently picked color over an opacity checkerboard and pops a built-in `<swc-color-loupe>` on touch.

```js
import '@adobe/spectrum-wc/components/color-handle/index.js';
// <swc-color-handle></swc-color-handle>
```

## Attributes

| Name       | Type      | Default                  | Description                                                                                                                                            |
| ---------- | --------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `color`    | `string`  | `'rgba(255, 0, 0, 0.5)'` | The CSS color value shown inside the handle. Supports any valid CSS color string, including alpha transparency (which reveals the checkerboard).       |
| `disabled` | `boolean` | `false`                  | Reflected. Suppresses the loupe (`open && !disabled`).                                                                                                 |
| `focused`  | `boolean` | `false`                  | Reflected. Set by the parent color component when the parent picker is focused (keyboard or programmatic); enlarges the handle as the focus indicator. |
| `open`     | `boolean` | `false`                  | Reflected. Shows the built-in loupe; auto-toggled by touch pointers.                                                                                   |
| `fill`     | `boolean` | `true`                   | Reflected. `true` shows the inner color swatch (1st-gen behavior); `false` renders an outline-only handle.                                             |