# ColorPicker

An input component for selecting colors from a palette or color wheel.

## Usage

Use standalone.

```svelte
<ColorPicker {...props} />
```

## Anatomy

The `class` attribute values represent part names. Other attributes represent their corresponding props.

```svelte
<label class="whole">
  <div class="middle">
    <!-- when checkered is true, this middle element provides the default transparency background -->
    <div class="main">
      <!-- this main element is the color sample over the transparent native input -->
      <input aria-label {...rest} type="color" bind:value bind:this={element} />
    </div>
  </div>
</label>
```

## Props

| Name        | Type               | Default     | Description                                                                    |
| ----------- | ------------------ | ----------- | ------------------------------------------------------------------------------ |
| `value`     | `string`           | `"#000000"` | Bindable color value                                                           |
| `alpha`     | `number`           | `1`         | Alpha value representing transparency                                          |
| `checkered` | `boolean`          | `true`      | Shows a checkerboard background behind the color sample to convey transparency |
| `ariaLabel` | `string`           | -           | Accessible label for the color input                                           |
| `attach`    | `Attachment`       | -           | Svelte attachment on the input                                                 |
| `element`   | `HTMLInputElement` | -           | Bindable input element                                                         |
| `styling`   | `SVSClass`         | -           | Styling override                                                               |
| `variant`   | `SVSVariant`       | `NEUTRAL`   | Variant                                                                        |
Other `HTMLInputAttributes` are passed to `<input>` via rest props; `class` is merged onto the root.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-color-picker`

## Accessibility

### ARIA Roles and Attributes

The component applies `aria-label` to the native color input when `ariaLabel` is supplied.

Provide an accessible name yourself because there is no built-in visible label. Prefer `ariaLabel`, pass `aria-labelledby` through the rest props, or associate a `<label>` with the color input.

### Standards Basis

ColorPicker is built on a native `<input type="color">`, so keyboard and assistive-technology support follows the browser standard for color inputs. See the [Concepts standards-first guidance](/docs/concepts) for the library's approach.

## Exports

### Types

```ts
interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
  value?: string; // bindable ("#000000")
  alpha?: number; // (1)
  checkered?: boolean; // (true)
  ariaLabel?: string;
  attach?: Attachment<HTMLInputElement>;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // ariaLabel is the recommended accessible-name prop; aria-labelledby may be passed via ...rest
  // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
}
type ColorPickerReqdProps = never;
type ColorPickerBindProps = "value" | "element";
```

### Others

```ts
// Cast RGB value to Hex value.
// getHex([255, 123, 34])  => "#ff7b22"
// getHex([255, 255, 255]) => "#ffffff"
function getHex(rgb: [number, number, number]): string;
```

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=ColorPickerBasic.svelte
<script lang="ts">
  import { ColorPicker } from "svseeds";

  const styling = {
    whole: "size-16 rounded-full overflow-hidden",
    middle: "size-full",
    main: "size-full",
  };
  const myProps = {
    value: "#009689",
    ariaLabel: "Accent color",
    styling,
  };
</script>

<ColorPicker {...myProps} />
```
### With Interactive Variant

**Code**

```svelte src=ColorPickerPract.svelte
<script lang="ts">
  import { ColorPicker, Slider } from "svseeds";

  let { variant = $bindable() } = $props();
  let alpha = $state(0.9);
  const variantStyle = {
    neutral: "h-20",
    tall: "h-30",
    short: "h-10",
  };
  const styling = {
    whole: "-mb-1.5 size-fit rounded-t-xl overflow-hidden",
    main: {
      base: "w-30",
      ...variantStyle,
    },
  };
  const myProps = {
    value: "#4C444D",
    styling,
  };
  const childStyle = {
    whole: "flex w-30 h-2",
    main: [
      "w-full h-2 appearance-none",
      "[&::-webkit-slider-runnable-track]:h-2",
      "[&::-webkit-slider-thumb]:appearance-none",
      "[&::-webkit-slider-thumb]:w-4",
      "[&::-webkit-slider-thumb]:h-2",
      "[&::-webkit-slider-thumb]:bg-teal-800",
      "[&::-webkit-slider-thumb]:transition-transform",
      "[&::-webkit-slider-thumb]:duration-100",
      "hover:[&::-webkit-slider-thumb]:scale-125",
      "[&::-moz-range-track]:h-2",
      "[&::-moz-range-thumb]:border-none",
      "[&::-moz-range-thumb]:w-4",
      "[&::-moz-range-thumb]:h-2",
      "[&::-moz-range-thumb]:bg-teal-800",
      "[&::-moz-range-thumb]:transition-transform",
      "[&::-moz-range-thumb]:duration-100",
      "hover:[&::-moz-range-thumb]:scale-125",
    ],
  };
  const childProps = {
    min: 0,
    max: 1,
    step: "any" as const,
    styling: childStyle,
  };
</script>

<div class="flex flex-col">
  <ColorPicker {variant} {alpha} {...myProps} />
  <Slider bind:value={alpha} {...childProps} />
</div>
```