Recent colours

On by default, and empty until something is committed, so it costs nothing until it has something to show.

Click a preset, or release a slider, and the row appears below.

That keeps a list for the session, per picker. A colour joins it when it iscommitted (a pointer release, a preset click, a hex entry, leaving a slider), not on every value a drag passes through. Dragging the hue slider across the spectrum records one colour, not forty.

Repeats move to the front rather than appearing twice, and the list is capped at maxRecents (8 by default).

Storing them yourself

To keep them in a backend, or share them between pickers, pass the list in and take the updates, using the same controlled shape value andonChange already use:

ReactVueSvelteSolidAngularQwikAstroNo framework

const [recents, setRecents] = useState(loadFromServer);

<ColourPicker
  value={colour}
  onChange={setColour}
  recents={recents}
  onRecentsChange={(next) => {
    setRecents(next);
    save(next);
  }}
/>

<ColourPicker
  v-model="colour"
  :recents="recents"
  @recents-change="onRecentsChange"
/>

<ColourPicker bind:value={colour} bind:recents={recents} />

<ColourPicker
  value={colour()}
  onChange={setColour}
  recents={recents()}
  onRecentsChange={setRecents}
/>

<oklch-colour-picker
  [value]="colour()"
  (valueChange)="colour.set($event)"
  [recents]="recents()"
  (recentsChange)="recents.set($event)"
/>

<ColourPicker
  value={colour.value}
  onChange$={$((c: string) => (colour.value = c))}
  recents={recents.value}
  onRecentsChange$={$((r: string[]) => (recents.value = r))}
/>

---
import "@oklch-picker/core/styles.css";
---

<oklch-picker value="oklch(0.7 0.15 255)"></oklch-picker>

<script>
  import "oklch-picker/register";

  const picker = document.querySelector("oklch-picker");
  picker.addEventListener("recentschange", (event) => {
    localStorage.setItem("recents", JSON.stringify(event.detail.recents));
  });
<\/script>

const picker = document.querySelector("oklch-picker");
picker.recents = loadFromServer();

picker.addEventListener("recentschange", (event) => {
  save(event.detail.recents);
});

addRecent is exported for callers doing their own bookkeeping, and parts={{ recents: false }}removes the row.

The same picker with the recents row turned off.