@nexxtmove/ui 2.1.0 → 2.3.0

package/src/components/organisms/ColorPicker/ColorPicker.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, useId, h, nextTick, shallowRef, Teleport } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import type { Color, ColorChannel } from 'reka-ui'
 import {
   ColorAreaArea,
@@ -17,6 +18,36 @@ import {
 } from 'reka-ui'
 import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtToggleGroup from '../../molecules/ToggleGroup/ToggleGroup.vue'
+import NexxtGradientPreview from './_GradientPreview.vue'
+import NexxtGradientStopRow from './_GradientStopRow.vue'
+import NexxtGradientStops from './_GradientStops.vue'
+import {
+  CHECKERBOARD,
+  DEFAULT_GRADIENT_MESSAGES,
+  fillMessage,
+  gradientCss,
+  normalizeHex,
+} from './gradient'
+import type {
+  ColorPickerGradient,
+  ColorPickerGradientMessages,
+  ColorPickerPreset,
+} from './gradient'
+import { useGradientEditor } from './useGradientEditor'
+
+export type {
+  ColorPickerGradient,
+  ColorPickerGradientMessages,
+  ColorPickerGradientStop,
+  ColorPickerPreset,
+} from './gradient'
+
+/**
+ * A fill the picker can edit: `'solid'`, one colour, or `'gradient'`, a linear
+ * or radial gradient of two or three stops.
+ */
+export type ColorPickerFillMode = 'solid' | 'gradient'
 
 export type ColorFormat = 'hex' | 'hsl' | 'rgb'
 export type ColorSuggestions = Partial<Record<ColorFormat, string[]>>
@@ -40,21 +71,100 @@ export interface NexxtColorPickerProps {
   suggestions?: ColorSuggestions
   /** Accessible and visible label for the suggestions. */
   suggestionsLabel?: string
+  /** Visible label of the opacity slider, and the slider's accessible name. */
+  alphaLabel?: string
   /**
    * Text shown in the trigger in place of the formatted colour, for a value that has a name of
    * its own, such as a theme role. Only shown while a colour is set.
    */
   valueLabel?: string
+  /**
+   * Id(s) of an element that describes the field, set as `aria-describedby` on
+   * the trigger. Without it no attribute is rendered.
+   */
+  describedby?: string
+  /**
+   * The fills the picker offers. `['solid']` (the default) is the plain colour
+   * picker, exactly as without this prop. `['solid', 'gradient']`, in any
+   * order, adds an "Effen | Verloop" switch at the top of the panel;
+   * `['gradient']` offers only the gradient, without a switch. The gradient is
+   * edited through the `gradientValue` model; `mode` tells which fill is in
+   * use, and stays on the one fill when only one is offered.
+   */
+  modes?: ColorPickerFillMode[]
+  /**
+   * The gradient the gradient mode shows while `gradientValue` is unset. It is
+   * not written until the first change. Defaults to a fade from `#00000000` to
+   * `#00000099`.
+   */
+  gradientStart?: ColorPickerGradient
+  /** Copy of the gradient mode, merged per key over the Dutch defaults. */
+  gradientMessages?: ColorPickerGradientMessages
 }
 
 defineOptions({ name: 'NexxtColorPicker' })
 
 defineSlots<{
-  /** Named colours a wrapper offers next to the free picker; rendered above the suggestions. */
-  presets?(): unknown
+  /**
+   * Named colours a wrapper offers next to the free picker; rendered above the
+   * suggestions. In the gradient mode a preset is applied to the selected stop
+   * through `selectPreset`, and `preset` is the key of the selected stop's
+   * preset, if any.
+   */
+  presets?(props: {
+    preset: string | undefined
+    selectPreset: (preset: ColorPickerPreset, hex: string) => void
+  }): unknown
+}>()
+
+const emit = defineEmits<{
+  /** The panel closed. */
+  close: []
 }>()
 
-const PICKER_ID = 'color-picker-' + Math.random().toString(36).slice(2, 10)
+/**
+ * Renders its slot inside `tag`, or the slot alone without one. Without a tag
+ * no element and no comment is added, so the solid markup stays the same (only
+ * the hex field gained `aria-label="Hex"`).
+ */
+const Wrap: FunctionalComponent<{ tag?: string }> = (props, { slots, attrs }) =>
+  props.tag ? h(props.tag, attrs, slots.default?.()) : (slots.default?.() ?? [])
+Wrap.props = ['tag']
+Wrap.inheritAttrs = false
+
+// The gradient mode adds its own blocks, and moves the colour editor into a
+// popover per stop. Without the gradient in `modes` these wrappers render nothing of their
+// own -- no element, no comment -- so the solid markup stays the same, apart
+// from `aria-label="Hex"` on the hex field.
+// Template comments are avoided in those spots for the same reason: dev builds
+// keep them.
+
+/** Renders its slot only `when` it is set; otherwise nothing at all, not even a comment. */
+const Gate: FunctionalComponent<{ when: boolean }> = (props, { slots }) =>
+  props.when ? (slots.default?.() ?? []) : []
+Gate.props = ['when']
+
+/**
+ * Renders its single slot child in place, or teleported into `to`. In place it
+ * returns the child itself, not a disabled Teleport, which would leave anchors
+ * in the solid markup. The gradient mode teleports the colour editor into the
+ * popover of the stop that is being edited.
+ */
+const MaybeTeleport: FunctionalComponent<{ to?: HTMLElement | null }> = (props, { slots }) =>
+  props.to ? h(Teleport, { to: props.to }, slots.default?.() ?? []) : slots.default?.()[0]
+MaybeTeleport.props = ['to']
+
+// `useId` is the same on the server and in the browser; a random id would not hydrate.
+const PICKER_ID = useId()
+const ALPHA_LABEL_ID = useId()
+const ROLE_HINT_ID = useId()
+
+/**
+ * reka reports the alpha channel as `alpha * 100`, which is a fraction for most
+ * stored colours (`#…80` is 50.196) and float noise for some steps (7.000…01).
+ * Only what the slider announces is rounded; the colour itself is untouched.
+ */
+const roundedChannel = (value: number) => Math.round(value)
 
 const props = withDefaults(defineProps<NexxtColorPickerProps>(), {
   placeholder: 'Kies kleur...',
@@ -64,10 +174,133 @@ const props = withDefaults(defineProps<NexxtColorPickerProps>(), {
   matchWidth: false,
   suggestions: () => ({}),
   suggestionsLabel: 'Gebruikte kleuren',
+  alphaLabel: 'Dekking',
+  modes: () => ['solid'],
 })
 
 const model = defineModel<string>({ default: '' })
 
+/** Which fill is edited. Only used when `modes` offers both; otherwise it is ignored. */
+const mode = defineModel<ColorPickerFillMode>('mode', { default: 'solid' })
+
+/**
+ * The gradient, with its stops in order of position. Unset while there is no
+ * readable gradient: the gradient mode then shows a default and writes nothing
+ * until the first change.
+ */
+const gradientValue = defineModel<ColorPickerGradient | undefined>('gradientValue', {
+  default: undefined,
+})
+
+/** The selected stop, as its index in order of position. */
+const selectedStop = defineModel<number>('selectedStop', { default: 0 })
+
+/** The gradient is offered at all. */
+const gradient = computed(() => props.modes.includes('gradient'))
+
+/** Both fills are offered, so the panel starts with the switch between them. */
+const bothModes = computed(() => gradient.value && props.modes.includes('solid'))
+
+const gradientMode = computed(
+  () => gradient.value && (!bothModes.value || mode.value === 'gradient'),
+)
+
+// With one fill offered, `mode` is that fill. A bound value that says otherwise
+// is corrected once -- the only time this emits -- so a consumer reads the fill
+// that is actually shown. Matching values (the default `'solid'` with
+// `['solid']`) emit nothing.
+watch(
+  () => [props.modes, mode.value] as const,
+  () => {
+    if (bothModes.value) return
+    const only: ColorPickerFillMode = gradient.value ? 'gradient' : 'solid'
+    if (mode.value !== only) mode.value = only
+  },
+  { immediate: true },
+)
+const gradientCopy = computed(() => ({ ...DEFAULT_GRADIENT_MESSAGES, ...props.gradientMessages }))
+
+const editor = useGradientEditor({
+  value: gradientValue,
+  selectedIndex: selectedStop,
+  start: () => props.gradientStart,
+})
+
+/** The rows of the stop list, by stop id, to move the focus into after add and remove. */
+const rows = new Map<number, { focusPosition: () => void }>()
+const rowRef = (id: number) => (instance: unknown) => {
+  if (instance && typeof instance === 'object' && 'focusPosition' in instance) {
+    rows.set(id, instance as { focusPosition: () => void })
+  } else rows.delete(id)
+}
+
+/** The popover of a stop that the colour editor is teleported into. */
+const editorTarget = shallowRef<HTMLElement | null>(null)
+const onTarget = (element: HTMLElement | null) => {
+  // A closing popover is not let go of: its content would vanish while the
+  // popover still fades out, leaving an empty box. A new popover replaces it,
+  // and the outer panel closing (or leaving the gradient mode) clears it.
+  if (element) editorTarget.value = element
+}
+watch(gradientMode, () => {
+  editorTarget.value = null
+})
+
+const focusRow = async (id: number | null) => {
+  if (id === null) return
+  await nextTick()
+  rows.get(id)?.focusPosition()
+}
+
+/** Toevoegen in the heading: a stop halfway, and the focus in its position field. */
+const addStop = () => focusRow(editor.addStop())
+
+/** A removed stop hands the focus to the position field of its neighbour. */
+const removeStop = (id: number) => focusRow(editor.removeStop(id))
+
+const typeOptions = computed(() => [
+  { value: 'linear', label: gradientCopy.value.linear },
+  { value: 'radial', label: gradientCopy.value.radial },
+])
+
+const typeModel = computed({
+  get: () => editor.type.value,
+  set: (value: string) => editor.setType(value === 'radial' ? 'radial' : 'linear'),
+})
+
+const modeOptions = computed(() => [
+  { value: 'solid', label: gradientCopy.value.solid },
+  { value: 'gradient', label: gradientCopy.value.gradient },
+])
+
+const modeModel = computed({
+  get: () => mode.value,
+  set: (value: string) => {
+    mode.value = value === 'gradient' ? 'gradient' : 'solid'
+  },
+})
+
+/** The opacity slider is always there in the gradient mode. */
+const alphaOn = computed(() => props.showAlpha || gradientMode.value)
+
+/** A stop bound to a preset is always opaque: its slider stays, at 100 and disabled. */
+const alphaLocked = computed(() => gradientMode.value && !!editor.selected.value?.preset)
+
+const panelClass = computed(
+  () =>
+    `flex flex-col ${gradientMode.value ? 'gap-3' : 'gap-4'} rounded-xl bg-white p-4 ring ring-gray-200`,
+)
+
+const selectPreset = (preset: ColorPickerPreset, hex: string) => {
+  editor.setStopColor(hex.slice(0, 7), preset)
+}
+
+const onPanelClose = () => {
+  editorTarget.value = null
+  editor.resetSession()
+  emit('close')
+}
+
 const withoutAlpha = (color: Color) =>
   color.alpha < 1 ? setChannelValue(color, 'alpha', 100) : color
 
@@ -80,7 +313,7 @@ const normalizeModelColor = (value: string) => {
 const normalizeInputColor = (value: string) => {
   const color = normalizeColor(value)
 
-  if (!props.showAlpha && color.alpha < 1) {
+  if (!alphaOn.value && color.alpha < 1) {
     throw new Error('Transparantie is niet beschikbaar')
   }
 
@@ -99,13 +332,72 @@ const hexInputError = ref('')
 const channelInputErrors = ref<Partial<Record<ColorChannel, string>>>({})
 
 const hexColor = computed(() => colorToString(colorObj.value, 'hex'))
-const displayValue = computed(() =>
-  model.value ? props.valueLabel || fmt(colorObj.value, activeFormat.value) : '',
+const gradientLabel = computed(() => {
+  if (!gradientValue.value) return ''
+  return gradientValue.value.type === 'linear'
+    ? gradientCopy.value.triggerLinear
+    : gradientCopy.value.triggerRadial
+})
+/**
+ * The solid colour in the model. In the gradient mode the editor follows the
+ * selected stop, so the trigger reads the model itself.
+ */
+const modelColor = computed(() => {
+  if (!model.value) return null
+  try {
+    return normalizeModelColor(model.value)
+  } catch {
+    return null
+  }
+})
+
+/**
+ * The trigger shows a gradient once there is one. Before that -- only the
+ * gradient offered, and a solid colour stored -- it shows that colour, as the
+ * solid trigger would; an empty model shows the placeholder.
+ */
+const gradientTrigger = computed(
+  () => gradientMode.value && (!!gradientValue.value || !modelColor.value),
 )
+const triggerHex = computed(() =>
+  gradientMode.value && modelColor.value ? colorToString(modelColor.value, 'hex') : hexColor.value,
+)
+const displayValue = computed(() => {
+  if (gradientTrigger.value) return gradientLabel.value
+  if (gradientMode.value && modelColor.value) {
+    return props.valueLabel || fmt(modelColor.value, activeFormat.value)
+  }
+  return model.value ? props.valueLabel || fmt(colorObj.value, activeFormat.value) : ''
+})
+const gradientSwatch = computed(() => {
+  const value = gradientValue.value
+  const label = value
+    ? fillMessage(
+        value.type === 'linear' ? gradientCopy.value.swatchLinear : gradientCopy.value.swatchRadial,
+        { n: value.stops.length },
+      )
+    : gradientCopy.value.swatchEmpty
+  // Without a readable gradient the swatch stays empty, like the placeholder next to it.
+  return {
+    label,
+    style: value
+      ? {
+          backgroundImage: `${gradientCss(value)}, ${CHECKERBOARD}`,
+          backgroundSize: 'auto, 8px 8px',
+        }
+      : {},
+  }
+})
 const colorSuggestions = computed(() => {
   const values = new Set<string>()
 
-  props.suggestions[activeFormat.value]?.forEach((suggestion) => {
+  // In the gradient mode the neighbouring stop comes first, so a one-colour fade is two clicks.
+  const neighbour = gradientMode.value ? editor.neighbourColor.value : undefined
+  const offered = neighbour
+    ? [neighbour, ...(props.suggestions[activeFormat.value] ?? [])]
+    : props.suggestions[activeFormat.value]
+
+  offered?.forEach((suggestion) => {
     try {
       const color = normalizeInputColor(suggestion)
       values.add(fmt(color, activeFormat.value))
@@ -117,28 +409,34 @@ const colorSuggestions = computed(() => {
   return [...values]
 })
 
+/**
+ * Applies a colour from the editor: to the model, or in the gradient mode to the
+ * selected stop, which also unbinds it from a preset.
+ */
+const commitColor = (color: Color) => {
+  colorObj.value = color
+  if (gradientMode.value) editor.setStopColor(colorToString(color, 'hex'))
+  else model.value = fmt(color, activeFormat.value)
+}
+
 const selectSuggestion = (suggestion: string) => {
-  colorObj.value = normalizeInputColor(suggestion)
-  model.value = fmt(colorObj.value, activeFormat.value)
+  commitColor(normalizeInputColor(suggestion))
 }
 
 const cycleFormat = (direction: 1 | -1) => {
   activeFormatIndex.value =
     (activeFormatIndex.value + direction + props.formats.length) % props.formats.length
-  model.value = fmt(colorObj.value, activeFormat.value)
+  if (!gradientMode.value) model.value = fmt(colorObj.value, activeFormat.value)
 }
 
 const handleColorUpdate = (newColor: Color) => {
-  const updated = props.showAlpha ? newColor : withoutAlpha(newColor)
-  colorObj.value = updated
-  model.value = fmt(updated, activeFormat.value)
+  commitColor(alphaOn.value ? newColor : withoutAlpha(newColor))
 }
 
 const handleHexInput = (event: Event) => {
   const val = (event.target as HTMLInputElement).value
   try {
-    colorObj.value = normalizeInputColor(val)
-    model.value = fmt(colorObj.value, activeFormat.value)
+    commitColor(normalizeInputColor(val))
     hexInputError.value = ''
   } catch (e) {
     hexInputError.value = e instanceof Error ? e.message : 'Ongeldige kleur'
@@ -152,9 +450,7 @@ const handleChannelInput = (event: Event, channel: ColorChannel) => {
     return
   }
   try {
-    const updated = setChannelValue(colorObj.value, channel, val)
-    colorObj.value = updated
-    model.value = fmt(updated, activeFormat.value)
+    commitColor(setChannelValue(colorObj.value, channel, val))
     delete channelInputErrors.value[channel]
   } catch (e) {
     channelInputErrors.value[channel] = e instanceof Error ? e.message : 'Ongeldige waarde'
@@ -188,6 +484,8 @@ const currentColor = () => {
 watch(
   () => props.showAlpha,
   (showAlpha) => {
+    // The gradient mode always has the slider and never writes the solid model.
+    if (gradientMode.value) return
     const current = currentColor()
     if (!showAlpha && current.alpha < 1) {
       const updated = withoutAlpha(current)
@@ -196,6 +494,32 @@ watch(
     }
   },
 )
+
+// The editor follows the selected stop. Its own changes are already in
+// `colorObj`, which keeps the hue of a grey; only another stop, or a change
+// from outside, replaces it.
+watch(
+  () => (gradientMode.value ? editor.selected.value?.color : undefined),
+  (color) => {
+    if (!color || normalizeHex(colorToString(colorObj.value, 'hex')) === color) return
+    try {
+      colorObj.value = normalizeColor(color)
+    } catch {
+      // A stop colour is always a valid hex; nothing to recover from.
+    }
+  },
+  { immediate: true },
+)
+
+// Back in the solid mode the editor shows the model again.
+watch(gradientMode, (on) => {
+  if (on || !model.value) return
+  try {
+    colorObj.value = normalizeModelColor(model.value)
+  } catch {
+    // Ignore invalid color strings
+  }
+})
 </script>
 
 <template>
@@ -205,7 +529,7 @@ watch(
       <span v-if="required" class="text-brick-500">*</span>
     </label>
 
-    <NexxtFloatingPanel placement="bottom-start" :match-width="matchWidth">
+    <NexxtFloatingPanel placement="bottom-start" :match-width="matchWidth" @close="onPanelClose">
       <template #trigger="{ isOpen, toggle }">
         <button
           :id="PICKER_ID"
@@ -213,13 +537,22 @@ watch(
           :aria-expanded="isOpen"
           :aria-haspopup="true"
           :aria-label="label ? undefined : placeholder"
+          :aria-describedby="describedby"
           class="group flex h-10 cursor-pointer items-center gap-2 overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="[error ? 'ring-brick-400' : 'ring-gray-200', fullWidth ? 'w-full' : 'min-w-60']"
           @click="toggle"
         >
           <!-- Color swatch preview -->
+          <span
+            v-if="gradientTrigger"
+            role="img"
+            :aria-label="gradientSwatch.label"
+            class="size-5 shrink-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+            :style="gradientSwatch.style"
+          />
           <ColorSwatch
-            :color="hexColor"
+            v-else
+            :color="triggerHex"
             :aria-label="
               displayValue ? `Geselecteerde kleur: ${displayValue}` : 'Geen kleur geselecteerd'
             "
@@ -245,254 +578,350 @@ watch(
       </template>
 
       <template #content>
-        <div
-          class="flex flex-col gap-4 rounded-xl bg-white p-4 ring ring-gray-200"
-          :class="matchWidth ? 'w-full' : 'w-70'"
-        >
-          <!-- 2D Color Area: saturation (x-axis) / lightness (y-axis) -->
-          <ColorAreaRoot
-            v-slot="{ style }"
-            :model-value="colorObj"
-            color-space="hsl"
-            x-channel="saturation"
-            y-channel="lightness"
-            class="relative"
-            @update:color="handleColorUpdate"
-          >
-            <div
-              class="overflow-hidden rounded-lg ring ring-gray-200 transition-colors ease-out focus-within:ring-cornflower-blue-500"
-            >
-              <ColorAreaArea
-                class="relative h-40 w-full cursor-crosshair outline-none"
-                :style="style"
+        <div :class="[panelClass, matchWidth ? 'w-full' : 'w-70']">
+          <Gate :when="bothModes">
+            <NexxtToggleGroup
+              v-model="modeModel"
+              :options="modeOptions"
+              :label="gradientCopy.mode"
+              label-hidden
+              equal-width
+            />
+          </Gate>
+          <Gate :when="gradientMode">
+            <NexxtGradientPreview :editor="editor" :copy="gradientCopy" />
+            <div class="flex items-center gap-2">
+              <NexxtToggleGroup
+                v-model="typeModel"
+                :options="typeOptions"
+                :label="gradientCopy.type"
+                label-hidden
+                equal-width
+                class="min-w-0 flex-1"
+              />
+              <button
+                type="button"
+                :aria-label="gradientCopy.reverse"
+                class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-cornflower-blue-600"
+                @click="editor.reverse"
               >
-                <ColorAreaThumb
-                  class="block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing"
-                />
-              </ColorAreaArea>
+                <NexxtIcon name="arrow-right-arrow-left" aria-hidden="true" />
+              </button>
             </div>
-          </ColorAreaRoot>
-
-          <!-- Hue slider -->
-          <ColorSliderRoot
-            :model-value="colorObj"
-            channel="hue"
-            color-space="hsl"
-            class="relative flex h-5 w-full touch-none items-center select-none"
-            @update:color="handleColorUpdate"
-          >
-            <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
-            <ColorSliderThumb
-              class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+            <NexxtGradientStops
+              :editor="editor"
+              :copy="gradientCopy"
+              @add="addStop"
+              @remove="removeStop"
             />
-          </ColorSliderRoot>
-
-          <!-- Alpha slider (opt-in via showAlpha prop) -->
-          <!-- The checkerboard wrapper is behind the track; the gradient goes from
-               rgba(…,0) → rgba(…,1) so its transparent left end reveals it. -->
-          <div v-if="showAlpha" class="relative flex h-5 items-center">
-            <div
-              class="absolute inset-x-0 inset-y-1 rounded-full"
-              style="
-                background-image: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%);
-                background-size: 10px 10px;
-              "
-            />
-            <ColorSliderRoot
-              :model-value="colorObj"
-              channel="alpha"
-              color-space="hsl"
-              class="relative z-10 flex size-full touch-none items-center select-none"
-              @update:color="handleColorUpdate"
-            >
-              <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
-              <ColorSliderThumb
-                class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+            <div class="flex flex-col gap-1">
+              <NexxtGradientStopRow
+                v-for="stop in editor.stops.value"
+                :key="stop.id"
+                :ref="rowRef(stop.id)"
+                :editor="editor"
+                :stop="stop"
+                :copy="gradientCopy"
+                @target="onTarget"
+                @remove="removeStop(stop.id)"
               />
-            </ColorSliderRoot>
-          </div>
-
-          <!-- Format input fields — only active format shown, cycle with chevrons -->
-          <div class="flex flex-col gap-1">
-            <!-- Header: format label + up/down cycle buttons (only when multiple formats) -->
-            <div class="flex items-center justify-between">
-              <span class="text-xs text-gray-400">{{ activeFormat.toUpperCase() }}</span>
-              <div v-if="formats.length > 1" class="flex flex-col">
-                <button
-                  type="button"
-                  class="flex h-4 w-6 cursor-pointer items-center justify-center text-gray-400 transition-colors hover:text-cornflower-blue-600 focus:outline-none"
-                  aria-label="Vorig formaat"
-                  @click="cycleFormat(-1)"
-                >
-                  <NexxtIcon name="chevron-up" class="text-[12px]" aria-hidden="true" />
-                </button>
-                <button
-                  type="button"
-                  class="flex h-4 w-6 cursor-pointer items-center justify-center text-gray-400 transition-colors hover:text-cornflower-blue-600 focus:outline-none"
-                  aria-label="Volgend formaat"
-                  @click="cycleFormat(1)"
-                >
-                  <NexxtIcon name="chevron-down" class="text-[12px]" aria-hidden="true" />
-                </button>
-              </div>
             </div>
-
-            <!-- Hex -->
-            <ColorFieldRoot
-              v-if="activeFormat === 'hex'"
-              :model-value="hexColor"
-              class="w-full"
-              @update:color="handleColorUpdate"
-            >
-              <div
-                class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                :class="hexInputError ? 'ring-brick-400' : 'ring-gray-200'"
-              >
-                <ColorFieldInput
-                  class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                  placeholder="#000000"
-                  @input="handleHexInput"
-                />
-              </div>
-              <p v-if="hexInputError" class="mt-1 text-xs text-brick-400">{{ hexInputError }}</p>
-            </ColorFieldRoot>
-
-            <!-- HSL -->
-            <div v-else-if="activeFormat === 'hsl'" class="flex gap-2">
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="hue"
-                color-space="hsl"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.hue ? 'ring-brick-400' : 'ring-gray-200'"
+          </Gate>
+          <Gate :when="!gradientMode || !!editorTarget">
+            <MaybeTeleport :to="gradientMode ? editorTarget : undefined">
+              <Wrap :tag="gradientMode ? 'div' : undefined" class="flex flex-col gap-4">
+                <!-- 2D Color Area: saturation (x-axis) / lightness (y-axis) -->
+                <ColorAreaRoot
+                  v-slot="{ style }"
+                  :model-value="colorObj"
+                  color-space="hsl"
+                  x-channel="saturation"
+                  y-channel="lightness"
+                  class="relative"
+                  @update:color="handleColorUpdate"
                 >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="H"
-                    @input="(e: Event) => handleChannelInput(e, 'hue')"
-                  />
-                </div>
-              </ColorFieldRoot>
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="saturation"
-                color-space="hsl"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.saturation ? 'ring-brick-400' : 'ring-gray-200'"
+                  <div
+                    class="overflow-hidden rounded-lg ring ring-gray-200 transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                  >
+                    <ColorAreaArea
+                      class="relative h-40 w-full cursor-crosshair outline-none"
+                      :style="style"
+                    >
+                      <ColorAreaThumb
+                        class="block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing"
+                      />
+                    </ColorAreaArea>
+                  </div>
+                </ColorAreaRoot>
+
+                <!-- Hue slider -->
+                <ColorSliderRoot
+                  :model-value="colorObj"
+                  channel="hue"
+                  color-space="hsl"
+                  class="relative flex h-5 w-full touch-none items-center select-none"
+                  @update:color="handleColorUpdate"
                 >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="S"
-                    @input="(e: Event) => handleChannelInput(e, 'saturation')"
+                  <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
+                  <ColorSliderThumb
+                    class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
                   />
+                </ColorSliderRoot>
+
+                <!-- Alpha slider (opt-in via showAlpha prop) -->
+                <div v-if="alphaOn" class="flex flex-col gap-1">
+                  <span :id="ALPHA_LABEL_ID" class="extra-small-normal text-gray-500">{{
+                    alphaLabel
+                  }}</span>
+                  <!-- The checkerboard wrapper is behind the track; the gradient goes from
+                 rgba(…,0) → rgba(…,1) so its transparent left end reveals it. -->
+                  <div
+                    class="relative flex h-5 items-center"
+                    :class="alphaLocked ? 'cursor-not-allowed opacity-50' : undefined"
+                  >
+                    <div
+                      class="absolute inset-x-0 inset-y-1 rounded-full"
+                      style="
+                        background-image: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%);
+                        background-size: 10px 10px;
+                      "
+                    />
+                    <ColorSliderRoot
+                      :model-value="colorObj"
+                      channel="alpha"
+                      color-space="hsl"
+                      :disabled="alphaLocked"
+                      class="relative z-10 flex size-full touch-none items-center select-none"
+                      @update:color="handleColorUpdate"
+                    >
+                      <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
+                      <!--
+                With `as-child` reka merges its own attributes under the child's,
+                so the child's win: the name comes from the visible label instead
+                of reka's English "Alpha", and the value is announced whole.
+              -->
+                      <ColorSliderThumb v-slot="{ channelValue }" as-child>
+                        <span
+                          :aria-label="undefined"
+                          :aria-labelledby="ALPHA_LABEL_ID"
+                          :aria-valuenow="roundedChannel(channelValue)"
+                          v-bind="
+                            alphaLocked
+                              ? {
+                                  'aria-disabled': 'true',
+                                  'aria-describedby': ROLE_HINT_ID,
+                                  tabindex: 0,
+                                }
+                              : {}
+                          "
+                          class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+                        />
+                      </ColorSliderThumb>
+                    </ColorSliderRoot>
+                  </div>
+                  <Gate :when="alphaLocked">
+                    <p :id="ROLE_HINT_ID" class="extra-small-normal text-gray-700">
+                      {{ gradientCopy.roleOpaque }}
+                    </p>
+                  </Gate>
                 </div>
-              </ColorFieldRoot>
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="lightness"
-                color-space="hsl"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.lightness ? 'ring-brick-400' : 'ring-gray-200'"
-                >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="L"
-                    @input="(e: Event) => handleChannelInput(e, 'lightness')"
-                  />
-                </div>
-              </ColorFieldRoot>
-            </div>
 
-            <!-- RGB -->
-            <div v-else-if="activeFormat === 'rgb'" class="flex gap-2">
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="red"
-                color-space="rgb"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.red ? 'ring-brick-400' : 'ring-gray-200'"
-                >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="R"
-                    @input="(e: Event) => handleChannelInput(e, 'red')"
-                  />
+                <!-- Format input fields — only active format shown, cycle with chevrons -->
+                <div class="flex flex-col gap-1">
+                  <!-- Header: format label + up/down cycle buttons (only when multiple formats) -->
+                  <div
+                    v-if="!gradientMode || formats.length > 1"
+                    class="flex items-center justify-between"
+                  >
+                    <span v-if="!gradientMode" class="text-xs text-gray-400">{{
+                      activeFormat.toUpperCase()
+                    }}</span>
+                    <div v-if="formats.length > 1" class="flex flex-col">
+                      <button
+                        type="button"
+                        class="flex h-4 w-6 cursor-pointer items-center justify-center text-gray-400 transition-colors hover:text-cornflower-blue-600 focus:outline-none"
+                        aria-label="Vorig formaat"
+                        @click="cycleFormat(-1)"
+                      >
+                        <NexxtIcon name="chevron-up" class="text-[12px]" aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        class="flex h-4 w-6 cursor-pointer items-center justify-center text-gray-400 transition-colors hover:text-cornflower-blue-600 focus:outline-none"
+                        aria-label="Volgend formaat"
+                        @click="cycleFormat(1)"
+                      >
+                        <NexxtIcon name="chevron-down" class="text-[12px]" aria-hidden="true" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <!-- Hex -->
+                  <ColorFieldRoot
+                    v-if="activeFormat === 'hex'"
+                    :model-value="hexColor"
+                    class="w-full"
+                    @update:color="handleColorUpdate"
+                  >
+                    <div
+                      class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                      :class="hexInputError ? 'ring-brick-400' : 'ring-gray-200'"
+                    >
+                      <ColorFieldInput
+                        class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                        placeholder="#000000"
+                        aria-label="Hex"
+                        @input="handleHexInput"
+                      />
+                    </div>
+                    <p v-if="hexInputError" class="mt-1 text-xs text-brick-400">
+                      {{ hexInputError }}
+                    </p>
+                  </ColorFieldRoot>
+
+                  <!-- HSL -->
+                  <div v-else-if="activeFormat === 'hsl'" class="flex gap-2">
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="hue"
+                      color-space="hsl"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.hue ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="H"
+                          @input="(e: Event) => handleChannelInput(e, 'hue')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="saturation"
+                      color-space="hsl"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.saturation ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="S"
+                          @input="(e: Event) => handleChannelInput(e, 'saturation')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="lightness"
+                      color-space="hsl"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.lightness ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="L"
+                          @input="(e: Event) => handleChannelInput(e, 'lightness')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                  </div>
+
+                  <!-- RGB -->
+                  <div v-else-if="activeFormat === 'rgb'" class="flex gap-2">
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="red"
+                      color-space="rgb"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.red ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="R"
+                          @input="(e: Event) => handleChannelInput(e, 'red')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="green"
+                      color-space="rgb"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.green ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="G"
+                          @input="(e: Event) => handleChannelInput(e, 'green')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                    <ColorFieldRoot
+                      :model-value="colorObj"
+                      channel="blue"
+                      color-space="rgb"
+                      class="flex-1"
+                      @update:color="handleColorUpdate"
+                    >
+                      <div
+                        class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+                        :class="channelInputErrors.blue ? 'ring-brick-400' : 'ring-gray-200'"
+                      >
+                        <ColorFieldInput
+                          class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
+                          placeholder="B"
+                          @input="(e: Event) => handleChannelInput(e, 'blue')"
+                        />
+                      </div>
+                    </ColorFieldRoot>
+                  </div>
                 </div>
-              </ColorFieldRoot>
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="green"
-                color-space="rgb"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.green ? 'ring-brick-400' : 'ring-gray-200'"
-                >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="G"
-                    @input="(e: Event) => handleChannelInput(e, 'green')"
-                  />
-                </div>
-              </ColorFieldRoot>
-              <ColorFieldRoot
-                :model-value="colorObj"
-                channel="blue"
-                color-space="rgb"
-                class="flex-1"
-                @update:color="handleColorUpdate"
-              >
-                <div
-                  class="flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-                  :class="channelInputErrors.blue ? 'ring-brick-400' : 'ring-gray-200'"
-                >
-                  <ColorFieldInput
-                    class="w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none"
-                    placeholder="B"
-                    @input="(e: Event) => handleChannelInput(e, 'blue')"
-                  />
-                </div>
-              </ColorFieldRoot>
-            </div>
-          </div>
-          <slot name="presets" />
-          <div v-if="colorSuggestions.length" class="flex flex-col gap-1">
-            <span class="extra-small-normal text-gray-500">{{ suggestionsLabel }}</span>
-            <div class="flex flex-wrap gap-1.5">
-              <button
-                v-for="suggestion in colorSuggestions"
-                :key="suggestion"
-                type="button"
-                class="rounded-md p-0.5 ring-gray-200 transition-shadow hover:ring-2 hover:ring-cornflower-blue-400 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none"
-                :aria-label="`Kies kleur ${suggestion}`"
-                @click="selectSuggestion(suggestion)"
-              >
-                <ColorSwatch
-                  :color="suggestion"
-                  class="size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
-                  :style="{ backgroundColor: 'var(--reka-color-swatch-color)' }"
+                <slot
+                  name="presets"
+                  :preset="gradientMode ? editor.selected.value?.preset?.key : undefined"
+                  :select-preset="selectPreset"
                 />
-              </button>
-            </div>
-          </div>
+                <div v-if="colorSuggestions.length" class="flex flex-col gap-1">
+                  <span class="extra-small-normal text-gray-500">{{ suggestionsLabel }}</span>
+                  <div class="flex flex-wrap gap-1.5">
+                    <button
+                      v-for="suggestion in colorSuggestions"
+                      :key="suggestion"
+                      type="button"
+                      class="rounded-md p-0.5 ring-gray-200 transition-shadow hover:ring-2 hover:ring-cornflower-blue-400 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none"
+                      :aria-label="`Kies kleur ${suggestion}`"
+                      @click="selectSuggestion(suggestion)"
+                    >
+                      <ColorSwatch
+                        :color="suggestion"
+                        class="size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+                        :style="{ backgroundColor: 'var(--reka-color-swatch-color)' }"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </Wrap>
+            </MaybeTeleport>
+          </Gate>
         </div>
       </template>
     </NexxtFloatingPanel>