# color-picker

Color selection with native `<input type="color">`, hex text input, swatch preview, and floating panel.

## Markup

```html
<div data-c42-colorpicker>
  <button data-c42-colorpicker-trigger>
    <span data-c42-colorpicker-swatch></span>
    <span data-c42-colorpicker-value></span>
  </button>
  <div data-c42-colorpicker-panel>
    <input data-c42-colorpicker-color type="color" aria-label="Pick a color" />
    <input data-c42-colorpicker-hex type="text" maxlength="7" aria-label="Hex value" />
  </div>
</div>
```

## Options

```ts
import { ColorPicker } from '@42/core/color-picker';

new ColorPicker(root, {
  defaultValue: '#000000',    // initial hex color (#RGB or #RRGGBB)
  placement: 'bottom-start',  // floating-ui Placement
  offset: 4,
});
```

## Events

| Event | Detail |
|-------|--------|
| `colorpicker:change` | `{ value: string }` — normalized `#RRGGBB` uppercase |
| `colorpicker:open` | — |
| `colorpicker:close` | — |

## Behaviour

- The swatch (`[data-c42-colorpicker-swatch]`) shows the current color as background.
- The value label (`[data-c42-colorpicker-value]`) shows the hex string.
- Changing the native color input or typing in the hex input both update the value.
- The hex input validates format and normalizes to `#RRGGBB`.
- Escape closes the panel.
- The trigger displays `--c42-colorpicker-value` CSS variable for custom styling.