@nexxtmove/ui 2.2.0 → 2.4.0

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

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { ref, useTemplateRef, watch } from 'vue'
+
+export interface NexxtGradientFieldProps {
+  /** The applied value, shown while the field is not being edited. */
+  value: string
+  /** Accessible name of the input. */
+  name: string
+  /** Whether typed text can be applied; text that cannot is never committed. */
+  validate: (text: string) => boolean
+  /** Ask for the numeric keypad. */
+  numeric?: boolean
+  /** Show the value without editing it, such as a role name in place of a hex. */
+  readonly?: boolean
+}
+
+/**
+ * A text input of the stop list that applies its value on blur or Enter, not
+ * per keystroke. Escape with unapplied typing puts the value back first; only
+ * then does it reach the panel. Invalid text is put back on blur; on Enter it
+ * stays, and `invalid` reports it so the parent can mark the field.
+ */
+defineOptions({ name: 'NexxtGradientField', inheritAttrs: false })
+
+const { value, validate } = defineProps<NexxtGradientFieldProps>()
+
+const emit = defineEmits<{
+  /** The typed text, valid, on blur or Enter. */
+  commit: [text: string]
+  /** Whether the text that was last tried could not be applied. */
+  invalid: [invalid: boolean]
+}>()
+
+const input = useTemplateRef<HTMLInputElement>('input')
+const draft = ref(value)
+
+// A new value from outside replaces the draft, unless the user is typing in
+// this field: then only a draft that still shows the old value is replaced.
+watch(
+  () => value,
+  (next, previous) => {
+    if (document.activeElement !== input.value || draft.value === previous) draft.value = next
+  },
+)
+
+const apply = (keepInvalid: boolean) => {
+  const typed = draft.value.trim()
+  if (typed === value) {
+    emit('invalid', false)
+    return
+  }
+  if (validate(typed)) {
+    emit('invalid', false)
+    emit('commit', typed)
+    draft.value = value
+    return
+  }
+  emit('invalid', keepInvalid)
+  if (!keepInvalid) draft.value = value
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    apply(true)
+    return
+  }
+  if (event.key === 'Escape' && draft.value !== value) {
+    event.stopPropagation()
+    draft.value = value
+    emit('invalid', false)
+  }
+}
+
+defineExpose({ focus: () => input.value?.focus() })
+</script>
+
+<template>
+  <input
+    ref="input"
+    v-bind="$attrs"
+    type="text"
+    :inputmode="numeric ? 'numeric' : 'text'"
+    autocomplete="off"
+    spellcheck="false"
+    :readonly="readonly"
+    :aria-label="name"
+    :value="draft"
+    @input="draft = ($event.target as HTMLInputElement).value"
+    @blur="apply(false)"
+    @keydown="onKeydown"
+  />
+</template>

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

@@ -0,0 +1,401 @@
+<script lang="ts">
+/** The step of Shift (and PageUp/PageDown) on the angle point, in degrees. */
+const ANGLE_STEP = 15
+/** The step of Shift on the centre point, in percent. */
+const CENTER_STEP = 10
+/** Two linear end points closer than this (in px) keep the previous angle. */
+const MIN_DISTANCE = 8
+/** A pointer that moves less than this (in px) between down and up is a click. */
+const CLICK_SLOP = 4
+
+const POINT_CLASS =
+  'absolute size-5 -translate-1/2 touch-none rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)] outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2'
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef } from 'vue'
+import { CHECKERBOARD, fillMessage, gradientCss } from './gradient'
+import type { GradientCopy } from './gradient'
+import {
+  clampToSquare,
+  isInSquare,
+  lerpPoint,
+  linearHandlePoint,
+  linearFromPoints,
+  linearPoint,
+  projectOnSegment,
+  radialAngle,
+  radialEllipse,
+  radialPoint,
+  radialPosition,
+  radialRay,
+  viaFraction,
+} from './gradientGeometry'
+import type { Point } from './gradientGeometry'
+import type { GradientEditor, GradientEditorStop } from './useGradientEditor'
+
+export interface NexxtGradientPreviewProps {
+  /** The gradient state of the picker. */
+  editor: GradientEditor
+  /** Copy, already merged over the defaults. */
+  copy: GradientCopy
+}
+
+/**
+ * The preview: a square that renders the same CSS as the class, with a point
+ * per stop. Linear: the points lie on the gradient line, and dragging the
+ * from- or to-point sets the angle and the positions at once. Radial: a centre
+ * point, and the stops on one ray from it. The square is the full content
+ * width. A dragged point is clamped onto it, and a linear handle whose canonical
+ * point lies outside (0/100 % at angles off the axes) is drawn where the
+ * gradient line leaves the square. Geometry is computed with a side of 1 (`gradientGeometry`).
+ */
+defineOptions({ name: 'NexxtGradientPreview' })
+
+const { editor, copy } = defineProps<NexxtGradientPreviewProps>()
+
+const square = useTemplateRef<HTMLElement>('square')
+
+/** The side of the square in px, for the thresholds; 224 until measured. */
+const sideInPx = () => square.value?.getBoundingClientRect().width || 224
+
+/** What the model holds, as far as the points are concerned. */
+const geometryKey = computed(() =>
+  JSON.stringify([
+    editor.type.value,
+    editor.angle.value,
+    editor.centerX.value,
+    editor.centerY.value,
+    editor.sorted.value.map((stop) => [stop.id, stop.position]),
+  ]),
+)
+
+/**
+ * Points left where a drag released them. They stand for the same positions as
+ * the canonical ones, so they are only replaced once the gradient changes in
+ * another way (`geometryKey`).
+ */
+const released = ref<{ key: string; points: Map<number, Point> } | null>(null)
+
+/**
+ * The ray of a radial gradient for this session, as dragged; unset points at
+ * the farthest corner. It only holds while the farthest stop stays inside the
+ * square (`radialRay`).
+ */
+const psi = ref<number | null>(null)
+
+const ellipse = computed(() => radialEllipse(editor.centerX.value, editor.centerY.value, 1))
+const ray = computed(() =>
+  radialRay(
+    ellipse.value,
+    psi.value,
+    Math.max(0, ...editor.stops.value.map((stop) => stop.position)),
+    1,
+  ),
+)
+
+const canonicalPoint = (stop: GradientEditorStop): Point =>
+  editor.type.value === 'linear'
+    ? linearPoint(editor.angle.value, stop.position, 1)
+    : radialPoint(ellipse.value, ray.value, stop.position)
+
+/** The point a stop stands for: where a drag left it, or its canonical point. */
+const pointOf = (stop: GradientEditorStop) => {
+  const kept = released.value
+  return (kept?.key === geometryKey.value && kept.points.get(stop.id)) || canonicalPoint(stop)
+}
+
+/**
+ * Where a stop's handle is drawn: always inside the square. A released point
+ * already is; a linear canonical point outside goes onto the square's edge,
+ * along its own line. Radial points stay inside through `radialRay`.
+ */
+const handlePoint = (stop: GradientEditorStop) => {
+  const kept = released.value
+  const point = kept?.key === geometryKey.value ? kept.points.get(stop.id) : undefined
+  if (point) return point
+  return editor.type.value === 'linear'
+    ? linearHandlePoint(editor.angle.value, stop.position, 1)
+    : canonicalPoint(stop)
+}
+
+const styleAt = (point: Point) => ({ left: `${point.x * 100}%`, top: `${point.y * 100}%` })
+
+const previewStyle = computed(() => ({ backgroundImage: gradientCss(editor.snapshot.value) }))
+
+/** from, via and to, in order of position. */
+const roles = computed(() => {
+  const order = editor.sorted.value
+  return {
+    from: order[0],
+    via: order.length === 3 ? order[1] : undefined,
+    to: order[order.length - 1],
+  }
+})
+
+const points = computed(() =>
+  editor.stops.value.map((stop) => ({
+    stop,
+    style: {
+      ...styleAt(handlePoint(stop)),
+      backgroundImage: `linear-gradient(${stop.color}, ${stop.color}), ${CHECKERBOARD}`,
+      backgroundSize: 'auto, 8px 8px',
+    },
+    angle: editor.type.value === 'linear' && stop === roles.value.to,
+    selected: !editor.centerSelected.value && stop.id === editor.selectedId.value,
+  })),
+)
+
+const centerStyle = computed(() =>
+  styleAt({ x: editor.centerX.value / 100, y: editor.centerY.value / 100 }),
+)
+
+const angleText = computed(() => fillMessage(copy.angleValue, { n: editor.angle.value }))
+const centerText = computed(() =>
+  fillMessage(copy.centerValue, { x: editor.centerX.value, y: editor.centerY.value }),
+)
+
+/** A pointer position in the square's own units (side 1), clamped onto the square. */
+const toSquare = (event: PointerEvent): Point | null => {
+  const rect = square.value?.getBoundingClientRect()
+  if (!rect || rect.width === 0) return null
+  return clampToSquare(
+    { x: (event.clientX - rect.left) / rect.width, y: (event.clientY - rect.top) / rect.height },
+    1,
+  )
+}
+
+/** Puts a stop's point at `point`, and writes what that means for the gradient. */
+const placeStop = (stop: GradientEditorStop, point: Point, viaShare: number) => {
+  const { from, via, to } = roles.value
+  if (!from || !to) return
+
+  if (editor.type.value === 'radial') {
+    psi.value = radialAngle(ellipse.value, point)
+    const position = radialPosition(ellipse.value, point)
+    const positions = new Map<number, number>()
+    if (stop === via) {
+      positions.set(stop.id, Math.min(to.position, Math.max(from.position, position)))
+    } else {
+      positions.set(stop.id, position)
+      const start = stop === from ? position : from.position
+      const end = stop === to ? position : to.position
+      if (via) positions.set(via.id, Math.round(start + viaShare * (end - start)))
+    }
+    editor.setGeometry(positions)
+    released.value = null
+    return
+  }
+
+  let start = pointOf(from)
+  let end = pointOf(to)
+  let share = viaShare
+  if (stop === from) start = point
+  else if (stop === to) end = point
+  else share = projectOnSegment(point, start, end)
+
+  const result = linearFromPoints({
+    from: start,
+    to: end,
+    viaFraction: via ? share : undefined,
+    previousAngle: editor.angle.value,
+    size: 1,
+    minDistance: MIN_DISTANCE / sideInPx(),
+  })
+  const positions = new Map([
+    [from.id, result.from],
+    [to.id, result.to],
+  ])
+  if (via && result.via !== undefined) positions.set(via.id, result.via)
+  editor.setGeometry(positions, result.angle)
+
+  // Only points inside the square stay where they were left; one that is not
+  // (the canonical point of the end that was not dragged) is drawn on the edge.
+  const kept = new Map<number, Point>()
+  const candidates: [number, Point][] = [
+    [from.id, start],
+    [to.id, end],
+  ]
+  if (via) candidates.push([via.id, lerpPoint(start, end, share)])
+  candidates.forEach(([id, candidate]) => {
+    if (isInSquare(candidate, 1)) kept.set(id, candidate)
+  })
+  released.value = { key: geometryKey.value, points: kept }
+}
+
+const placeCenter = (point: Point) => editor.setCenter(point.x * 100, point.y * 100)
+
+/** What a pointer is doing, from down to up. */
+let gesture: {
+  target: 'zone' | 'center' | number
+  start: { x: number; y: number }
+  viaShare: number
+  moved: boolean
+} | null = null
+
+const currentViaShare = () => {
+  const { from, via, to } = roles.value
+  return via && from && to ? viaFraction(from.position, via.position, to.position) : 0.5
+}
+
+const onPointerDown = (event: PointerEvent, target: 'zone' | 'center' | number) => {
+  if (event.button !== 0) return
+  event.preventDefault()
+  event.stopPropagation()
+  const element = event.currentTarget as HTMLElement
+  element.setPointerCapture?.(event.pointerId)
+  if (target === 'center') {
+    editor.selectCenter()
+    element.focus()
+  } else if (typeof target === 'number') {
+    editor.select(target)
+    // Only the angle point takes the focus; the others are hidden from the keyboard.
+    if (element.tabIndex === 0) element.focus()
+  }
+  gesture = {
+    target,
+    start: { x: event.clientX, y: event.clientY },
+    viaShare: currentViaShare(),
+    moved: false,
+  }
+}
+
+const applyGesture = (event: PointerEvent) => {
+  if (!gesture) return
+  const point = toSquare(event)
+  if (!point) return
+  const { target, viaShare } = gesture
+  if (target === 'center') placeCenter(point)
+  else if (typeof target === 'number') {
+    const stop = editor.stops.value.find((candidate) => candidate.id === target)
+    if (stop) placeStop(stop, point, viaShare)
+  }
+}
+
+/**
+ * A pointer that is cancelled or loses its capture ends the gesture. A
+ * function, not an inline `gesture = null`: outside inline-template mode the
+ * template writes to `$setup`, which a plain `let` never sees.
+ */
+const endGesture = () => {
+  gesture = null
+}
+
+const onPointerMove = (event: PointerEvent) => {
+  if (!gesture) return
+  const distance = Math.hypot(event.clientX - gesture.start.x, event.clientY - gesture.start.y)
+  if (distance >= CLICK_SLOP) gesture.moved = true
+  if (gesture.target !== 'zone' && gesture.moved) applyGesture(event)
+}
+
+/**
+ * A click without a drag on an empty spot puts the selected point there: the
+ * single-pointer alternative to dragging (WCAG 2.5.7).
+ */
+const onPointerUp = (event: PointerEvent) => {
+  if (!gesture) return
+  const { target, moved, viaShare } = gesture
+  gesture = null
+  if (target !== 'zone' || moved) return
+  const point = toSquare(event)
+  if (!point) return
+  if (editor.type.value === 'radial' && editor.centerSelected.value) placeCenter(point)
+  else if (editor.selected.value) placeStop(editor.selected.value, point, viaShare)
+}
+
+const onAngleKeydown = (event: KeyboardEvent) => {
+  const step = event.shiftKey ? ANGLE_STEP : 1
+  const moves: Record<string, () => number> = {
+    ArrowLeft: () => editor.angle.value - step,
+    ArrowDown: () => editor.angle.value - step,
+    ArrowRight: () => editor.angle.value + step,
+    ArrowUp: () => editor.angle.value + step,
+    PageUp: () => editor.angle.value + ANGLE_STEP,
+    PageDown: () => editor.angle.value - ANGLE_STEP,
+    Home: () => 0,
+  }
+  const move = moves[event.key]
+  if (!move) return
+  event.preventDefault()
+  editor.setAngle(move())
+}
+
+const onCenterKeydown = (event: KeyboardEvent) => {
+  const step = event.shiftKey ? CENTER_STEP : 1
+  const x = editor.centerX.value
+  const y = editor.centerY.value
+  const moves: Record<string, [number, number]> = {
+    ArrowLeft: [x - step, y],
+    ArrowRight: [x + step, y],
+    ArrowUp: [x, y - step],
+    ArrowDown: [x, y + step],
+  }
+  const move = moves[event.key]
+  if (!move) return
+  event.preventDefault()
+  editor.setCenter(...move)
+}
+</script>
+
+<template>
+  <div
+    ref="square"
+    data-gradient-zone
+    data-gradient-preview
+    class="relative aspect-square w-full touch-none rounded-lg ring ring-gray-200 select-none"
+    :style="{ backgroundImage: CHECKERBOARD, backgroundSize: '10px 10px' }"
+    @pointerdown="onPointerDown($event, 'zone')"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+  >
+    <div class="absolute inset-0 rounded-lg" :style="previewStyle" />
+
+    <span
+      v-for="point in points"
+      :key="point.stop.id"
+      :role="point.angle ? 'slider' : undefined"
+      :tabindex="point.angle ? 0 : -1"
+      :aria-hidden="point.angle ? undefined : 'true'"
+      :aria-label="point.angle ? copy.angle : undefined"
+      :aria-valuemin="point.angle ? 0 : undefined"
+      :aria-valuemax="point.angle ? 359 : undefined"
+      :aria-valuenow="point.angle ? editor.angle.value : undefined"
+      :aria-valuetext="point.angle ? angleText : undefined"
+      :data-angle-end="point.angle || undefined"
+      :data-stop-point="point.stop.id"
+      :class="[
+        POINT_CLASS,
+        'cursor-grab active:cursor-grabbing',
+        point.selected && 'z-10 ring-2 ring-cornflower-blue-600',
+      ]"
+      :style="point.style"
+      @pointerdown="onPointerDown($event, point.stop.id)"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @lostpointercapture="endGesture"
+      @keydown="point.angle && onAngleKeydown($event)"
+    />
+
+    <!-- The centre is a diamond, so it reads apart from the round stops. -->
+    <span
+      v-if="editor.type.value === 'radial'"
+      role="slider"
+      tabindex="0"
+      :aria-label="copy.center"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-valuenow="editor.centerX.value"
+      :aria-valuetext="centerText"
+      data-gradient-center
+      class="absolute z-20 size-3.5 -translate-1/2 rotate-45 cursor-move touch-none border-2 border-white bg-gray-900 shadow-[0_0_0_1px_rgba(0,0,0,0.5)] outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+      :class="editor.centerSelected.value && 'ring-2 ring-cornflower-blue-600'"
+      :style="centerStyle"
+      @pointerdown="onPointerDown($event, 'center')"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @lostpointercapture="endGesture"
+      @focus="editor.selectCenter()"
+      @keydown="onCenterKeydown"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+const PERCENT = /^\d{1,3}$/
+// Six digits, or eight with an alpha pair below full opacity -- the same hex as
+// in the picker's own field.
+const HEX = /^#?([0-9a-f]{6}(?:[0-9a-f]{2})?)$/i
+
+const isPercent = (text: string) => PERCENT.test(text) && Number(text) <= 100
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtGradientField from './_GradientField.vue'
+import { CHECKERBOARD, fillMessage } from './gradient'
+import type { GradientCopy } from './gradient'
+import type { GradientEditor, GradientEditorStop } from './useGradientEditor'
+
+export interface NexxtGradientStopRowProps {
+  /** The gradient state of the picker. */
+  editor: GradientEditor
+  /** The stop this row edits. */
+  stop: GradientEditorStop
+  /** Copy, already merged over the defaults. */
+  copy: GradientCopy
+}
+
+/**
+ * One stop in the list: its position, a colour button that opens the picker as
+ * a second popover, its hex (eight digits below full opacity; or the name of its
+ * preset), and a remove button. The opacity is edited in the popover. The popover is not teleported, so it stays in the outer
+ * panel's DOM: a click inside it does not close the outer panel, and Tab walks
+ * on. Its content is the picker's own editor, which the picker teleports into
+ * the element this row reports through `target`.
+ */
+defineOptions({ name: 'NexxtGradientStopRow' })
+
+const { editor, stop, copy } = defineProps<NexxtGradientStopRowProps>()
+
+const emit = defineEmits<{
+  /** The element the colour editor should render in, or `null` once the popover closes. */
+  target: [element: HTMLElement | null]
+  /** The remove button was used; the parent removes the stop and moves the focus. */
+  remove: []
+}>()
+
+const positionField = useTemplateRef('positionField')
+const swatchButton = useTemplateRef<HTMLButtonElement>('swatchButton')
+const hexInvalid = ref(false)
+
+defineExpose({ focusPosition: () => positionField.value?.focus() })
+
+const order = computed(() => editor.sorted.value.indexOf(stop) + 1)
+const groupLabel = computed(() =>
+  fillMessage(copy.stop, { n: order.value, total: editor.stops.value.length }),
+)
+const dialogLabel = computed(() => fillMessage(copy.dialog, { n: order.value }))
+
+const swatchStyle = computed(() => ({
+  backgroundImage: `linear-gradient(${stop.color}, ${stop.color}), ${CHECKERBOARD}`,
+  backgroundSize: 'auto, 6px 6px',
+}))
+
+/**
+ * Re-sorting the rows moves their elements in the DOM, which drops the focus.
+ * The focused element itself survives the move, so it gets the focus back.
+ */
+const keepingFocus = async (action: () => void) => {
+  const active = document.activeElement
+  action()
+  await nextTick()
+  if (active instanceof HTMLElement && document.activeElement !== active) active.focus()
+}
+
+const commitPosition = (text: string) =>
+  keepingFocus(() => {
+    editor.moveStop(stop.id, Number(text))
+    editor.settle()
+  })
+
+/** A typed hex replaces the whole colour, opacity included; `ff` is dropped. */
+const commitHex = (text: string) => {
+  const match = HEX.exec(text)
+  if (match) editor.setColorOf(stop.id, `#${match[1]}`)
+}
+
+const isHex = (text: string) => HEX.test(text)
+
+const onDialogRef = (element: unknown) => {
+  emit('target', element instanceof HTMLElement ? element : null)
+}
+
+/**
+ * Escape closes this popover only, from inside it or from its button. FloatingPanel listens on `document`, so
+ * stopping the event here keeps the outer panel open; the focus goes back to
+ * the colour button.
+ */
+const onDialogKeydown = (event: KeyboardEvent, close: () => void) => {
+  if (event.key !== 'Escape') return
+  event.stopPropagation()
+  close()
+  swatchButton.value?.focus()
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-label="groupLabel"
+    data-gradient-row
+    class="flex h-8 items-center gap-1"
+    @focusin="editor.select(stop.id)"
+    @pointerdown="editor.select(stop.id)"
+  >
+    <label
+      class="flex h-8 w-12 shrink-0 cursor-text items-center rounded-lg px-1.5 ring ring-gray-200 focus-within:ring-cornflower-blue-500"
+    >
+      <NexxtGradientField
+        ref="positionField"
+        :value="String(stop.position)"
+        :name="copy.position"
+        :validate="isPercent"
+        numeric
+        class="w-0 min-w-0 flex-1 bg-transparent text-right extra-small-normal text-gray-900 tabular-nums focus:outline-none"
+        @commit="commitPosition"
+      />
+      <span aria-hidden="true" class="extra-small-normal text-gray-700">%</span>
+    </label>
+
+    <div
+      class="flex h-8 min-w-0 flex-1 items-center gap-1 rounded-lg px-2 ring focus-within:ring-cornflower-blue-500"
+      :class="hexInvalid ? 'ring-brick-400' : 'ring-gray-200'"
+    >
+      <NexxtFloatingPanel placement="left-start" class="shrink-0">
+        <template #trigger="{ isOpen, toggle, close }">
+          <button
+            ref="swatchButton"
+            type="button"
+            :aria-label="copy.pick"
+            aria-haspopup="dialog"
+            :aria-expanded="isOpen"
+            class="block size-4 cursor-pointer rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.15)] outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+            :style="swatchStyle"
+            @click="toggle"
+            @keydown="isOpen && onDialogKeydown($event, close)"
+          />
+        </template>
+        <template #content="{ close }">
+          <div
+            :ref="onDialogRef"
+            role="dialog"
+            :aria-label="dialogLabel"
+            class="w-70 rounded-xl bg-white p-4 shadow-lg ring ring-gray-200"
+            @keydown="onDialogKeydown($event, close)"
+          />
+        </template>
+      </NexxtFloatingPanel>
+
+      <NexxtGradientField
+        :value="stop.preset ? stop.preset.label : stop.color"
+        :name="copy.hex"
+        :validate="isHex"
+        :readonly="!!stop.preset"
+        class="ml-0.5 w-0 min-w-0 flex-1 truncate bg-transparent text-gray-900 focus:outline-none"
+        :class="stop.preset ? 'extra-small-normal' : 'extra-small-normal-mono'"
+        @commit="commitHex"
+        @invalid="hexInvalid = $event"
+      />
+    </div>
+
+    <button
+      type="button"
+      :aria-label="copy.remove"
+      :disabled="!editor.canRemove.value"
+      class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-cornflower-blue-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+      @click="emit('remove')"
+    >
+      <NexxtIcon name="minus" aria-hidden="true" />
+    </button>
+  </div>
+</template>