# ColorPicker Component

## Overview
`ColorPicker` is a custom HTML web component that provides a simple UI for selecting a background color.  
The component renders a native `<input type="color">` element and forwards the chosen color via a custom
`colorchange` event.

## Usage
```html
<script type="module" src="/static/components/color-picker/color-picker.js"></script>

<color-picker></color-picker>
```

## API
| Attribute / Property | Type   | Description                                   |
|----------------------|--------|-----------------------------------------------|
| `value` (attr)      | string | Hex color string (e.g., `#ff0000`). Default is `#ffffff`. |
| `value` (prop)      | string | Same as above, but as a JavaScript property. |

### Events
| Event       | Detail                     | Description |
|-------------|----------------------------|-------------|
| `colorchange` | `{color: string}` (hex)   | Fired whenever the user selects a new color. |

## Example
```html
<color-picker id="bgPicker"></color-picker>

<script>
  const picker = document.getElementById('bgPicker');
  picker.addEventListener('colorchange', e => {
    console.log('Background color selected:', e.detail.color);
  });
</script>
```

## Change Log
| Date       | Author | Change |
|------------|--------|--------|
| 2026‑01‑11 | Thomas | Initial component documentation. |