@nexxtmove/ui 1.42.0 → 1.43.0

package/dist/nuxt.js

@@ -75,6 +75,7 @@ var s = {
 	NexxtTimelineTrack: "components/organisms/TimelineTrack/TimelineTrack.vue",
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
+	NexxtEditorDimensionField: "components/editor/atoms/EditorDimensionField/EditorDimensionField.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
@@ -90,6 +91,8 @@ var s = {
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
+	NexxtEditorSize: "components/editor/molecules/EditorSize/EditorSize.vue",
+	NexxtEditorSizeLimit: "components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue",
 	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {

package/dist/ui.css

@@ -1,2 +1,2 @@
-input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
+input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-17eb933b]{animation:snap-in-17eb933b .18s var(--ease-out-strong)}input[data-snap=up][data-v-17eb933b]{--snap-from:2px}input[data-snap=down][data-v-17eb933b]{--snap-from:-2px}@keyframes snap-in-17eb933b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-17eb933b]{animation:1ms snap-hold-17eb933b}@keyframes snap-hold-17eb933b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/atoms/EditorDimensionField/EditorDimensionField.vue

@@ -0,0 +1,456 @@
+<script lang="ts">
+/** A unit a dimension can be written in. */
+export type EditorDimensionUnit = 'px' | '%'
+
+/** A dimension as the field edits it: a whole number and the unit it is in. */
+export interface EditorDimensionValue {
+  value: number
+  unit: EditorDimensionUnit
+}
+
+/**
+ * The range a value is clamped to per unit, unless the `min` / `max` props say
+ * otherwise. The px range starts at 40 rather than 0: below that an element
+ * set to a fixed size is too small to select on the canvas again.
+ */
+export const EDITOR_DIMENSION_LIMITS = {
+  px: { min: 40, max: 1600 },
+  '%': { min: 1, max: 100 },
+} as const satisfies Record<EditorDimensionUnit, { min: number; max: number }>
+
+/** Overridable copy of the field. Every key is optional. */
+export interface EditorDimensionFieldMessages {
+  /** Shown in an empty `optional` field, where empty means none. Defaults to `'Geen'`. */
+  placeholder?: string
+  /** Accessible name of the unit selector, when more than one unit is offered. Defaults to `'Eenheid'`. */
+  unit?: string
+  /** How the px unit is written. Defaults to `'px'`. */
+  px?: string
+  /** How the percentage unit is written. Defaults to `'%'`. */
+  percent?: string
+}
+
+export interface NexxtEditorDimensionFieldProps {
+  /** Accessible name of the input; the unit is appended to it. Not rendered visibly. */
+  label: string
+  /**
+   * The units the user can pick from, in the order they are offered. With one
+   * unit it is shown as plain text, with more as a selector. Defaults to `['px']`.
+   */
+  units?: EditorDimensionUnit[]
+  /** Lowest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  min?: Partial<Record<EditorDimensionUnit, number>>
+  /** Highest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  max?: Partial<Record<EditorDimensionUnit, number>>
+  /**
+   * An emptied field commits `null` -- none -- and shows the placeholder.
+   * Without it, emptying the field is a typo and the old value comes back.
+   */
+  optional?: boolean
+  /**
+   * Copy of the placeholder and the units. Defaults are Dutch and are merged
+   * per key, so overriding one keeps the defaults of the others. Copy is never
+   * translated inside the component.
+   */
+  messages?: EditorDimensionFieldMessages
+}
+
+const DEFAULT_MESSAGES = {
+  placeholder: 'Geen',
+  unit: 'Eenheid',
+  px: 'px',
+  percent: '%',
+} satisfies Required<EditorDimensionFieldMessages>
+
+const UNIT_MESSAGE = { px: 'px', '%': 'percent' } as const
+
+// Only plain digits count. The number input already turns "12abc" into an
+// empty value, but it lets "1.5", "-5" and "1e2" through as valid numbers --
+// none of them a whole number the user typed as such.
+const DIGITS = /^\d+$/
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import NexxtIcon from '../../../atoms/Icon/Icon.vue'
+
+defineOptions({ name: 'NexxtEditorDimensionField' })
+
+const {
+  label,
+  units = ['px'],
+  min,
+  max,
+  optional = false,
+  messages,
+} = defineProps<NexxtEditorDimensionFieldProps>()
+
+const emit = defineEmits<{
+  /**
+   * One edit is finished: a typed value was confirmed (blur or Enter), the
+   * unit was switched, or an arrow key was let go after stepping. The model has
+   * already been written by then. Arrow keys write the model on every step, so
+   * a consumer that folds model writes into one undo step closes it here --
+   * a typed value then is a step of its own, a held arrow key one step in all.
+   * Not emitted when nothing changed.
+   */
+  commit: []
+}>()
+
+/** The dimension, or `null` for none. */
+const model = defineModel<EditorDimensionValue | null>({ default: null })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+/**
+ * The unit the field is in. Follows the model, but is kept here as well: an
+ * empty field has no model to carry it, and the unit picked there is the one
+ * the next typed value is written in.
+ */
+const unit = ref<EditorDimensionUnit>(model.value?.unit ?? units[0])
+
+watch(
+  () => model.value?.unit,
+  (next) => {
+    if (next) unit.value = next
+  },
+)
+
+const unitText = (value: EditorDimensionUnit) => copy.value[UNIT_MESSAGE[value]]
+
+const limitsOf = (value: EditorDimensionUnit) => ({
+  min: min?.[value] ?? EDITOR_DIMENSION_LIMITS[value].min,
+  max: max?.[value] ?? EDITOR_DIMENSION_LIMITS[value].max,
+})
+
+/** The range of the current unit, mirrored on the input's `min` / `max`. */
+const limits = computed(() => limitsOf(unit.value))
+
+const clamp = (value: number, to: EditorDimensionUnit) => {
+  const limits = limitsOf(to)
+
+  return Math.min(Math.max(Math.round(value), limits.min), limits.max)
+}
+
+const shown = () => (model.value === null ? '' : String(model.value.value))
+
+const inputEl = useTemplateRef<HTMLInputElement>('input')
+
+/**
+ * Text the number input could not parse, such as "12a". The input reports an
+ * empty `value` for it, so without this check a typo in an `optional` field
+ * would be committed as none.
+ */
+const isTypo = () => inputEl.value?.validity.badInput === true
+
+/**
+ * Shows the model again. The element is written as well: for unparseable text
+ * the input's `value` is already empty, so when the model is empty too, the
+ * binding sees no change and would leave the typed text standing.
+ */
+const revert = () => {
+  draft.value = shown()
+  if (inputEl.value) inputEl.value.value = draft.value
+}
+
+/**
+ * What the input shows while it is being edited. It is deliberately not the
+ * model: a half-typed "1" on the way to "180" would be clamped up to the
+ * minimum under the caret, so nothing leaves the field until it is confirmed.
+ */
+const draft = ref(shown())
+
+/** Direction of the one-shot snap animation, cleared once it has played. */
+const snapped = ref<'up' | 'down'>()
+
+// The model stays the source of truth: a change from outside -- an undo, a
+// clamp, another element selected -- replaces the draft.
+watch(
+  () => model.value?.value ?? null,
+  () => {
+    draft.value = shown()
+  },
+)
+
+/** Arrow steps written since the last `commit`, waiting for the key to be let go. */
+let stepping = false
+
+/** Writes the model, and reports whether that changed anything. */
+const write = (next: EditorDimensionValue | null) => {
+  const current = model.value
+  if (
+    next === null ? current === null : next.value === current?.value && next.unit === current.unit
+  )
+    return false
+
+  model.value = next
+  return true
+}
+
+const finish = () => {
+  stepping = false
+  emit('commit')
+}
+
+const selectAll = () => {
+  inputEl.value?.focus()
+  inputEl.value?.select()
+}
+
+defineExpose({
+  /**
+   * Moves focus into the input and selects its value, so typing replaces it.
+   * Pass `{ preventScroll: true }` while the field is still being revealed in a
+   * clipping box, which the browser would otherwise scroll to bring it in view.
+   */
+  focus: (options?: FocusOptions) => {
+    inputEl.value?.focus(options)
+    inputEl.value?.select()
+  },
+})
+
+/**
+ * Pointer-down anywhere in the field lands in the input with its value
+ * selected, the same as the padding fields -- except on the unit selector,
+ * which has to open.
+ */
+const onPointerDown = (event: PointerEvent) => {
+  if (event.pointerType !== 'mouse') return
+  if ((event.target as Element).closest('select')) return
+  if (document.activeElement === inputEl.value) return
+
+  event.preventDefault()
+  selectAll()
+}
+
+const commit = async () => {
+  const typed = draft.value.trim()
+  const typo = isTypo()
+  let changed = false
+
+  if (typo) {
+    // Left alone: the old value comes back below.
+  } else if (typed === '') {
+    if (optional) changed = write(null)
+  } else if (DIGITS.test(typed)) {
+    changed = write({ value: clamp(Number(typed), unit.value), unit: unit.value })
+  }
+
+  // A blur in the middle of an arrow stream ends that stream as well.
+  if (changed || stepping) finish()
+
+  // Whatever was made of it: clamped, emptied, or the old value back for text
+  // that is no number -- and for an emptied field that may not be empty.
+  await nextTick()
+  revert()
+
+  if (!DIGITS.test(typed) || model.value === null || Number(typed) === model.value.value) return
+
+  // Restart the one-shot, or two clamps the same way would only animate once.
+  snapped.value = undefined
+  await nextTick()
+  snapped.value = model.value.value > Number(typed) ? 'up' : 'down'
+}
+
+/** From none, the first step lands on the minimum, whichever way it goes. */
+const step = async (direction: 1 | -1, size: number) => {
+  const current = model.value
+  const next =
+    current === null
+      ? limitsOf(unit.value).min
+      : clamp(current.value + direction * size, current.unit)
+
+  if (write({ value: next, unit: current?.unit ?? unit.value })) stepping = true
+
+  await nextTick()
+  draft.value = shown()
+}
+
+const onKeydown = async (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    await commit()
+
+    return selectAll()
+  }
+
+  if (event.key === 'Escape') {
+    // Only swallowed when there is typing to undo. With nothing to revert,
+    // Escape belongs to whatever popover or panel the field sits in.
+    if (draft.value === shown() && !isTypo()) return
+
+    event.stopPropagation()
+    revert()
+
+    return selectAll()
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+    event.preventDefault()
+
+    return step(event.key === 'ArrowUp' ? 1 : -1, event.shiftKey ? 10 : 1)
+  }
+}
+
+// A held arrow key repeats its keydown but lets go only once, so the keyup is
+// where a stream of steps ends -- the keyboard's counterpart of a slider's
+// pointerup.
+const onKeyup = (event: KeyboardEvent) => {
+  if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && stepping) finish()
+}
+
+/**
+ * Whether the unit selector was last reached with a pointer. Chromium counts a
+ * clicked `<select>` as `:focus-visible`, so without this the keyboard focus
+ * style would stay on after a unit is picked with the mouse. A key on the
+ * selector, or leaving it, hands the style back to the keyboard.
+ */
+const unitByPointer = ref(false)
+
+/**
+ * A pointer went down on the selector in the current task. A click focuses in
+ * the same task as its pointerdown; Safari and Firefox on macOS do not focus a
+ * clicked select at all, so a focus after this has passed came from the keyboard.
+ */
+let pointerPending = false
+
+const onUnitPointerDown = () => {
+  unitByPointer.value = true
+  pointerPending = true
+  setTimeout(() => (pointerPending = false))
+}
+
+const onUnitFocus = () => {
+  unitByPointer.value = pointerPending
+}
+
+/** A value already there is clamped into the new unit's range; none stays none. */
+const onUnit = (event: Event) => {
+  const next = (event.target as HTMLSelectElement).value as EditorDimensionUnit
+  unit.value = next
+
+  if (model.value === null) return
+  if (write({ value: clamp(model.value.value, next), unit: next })) finish()
+}
+</script>
+
+<template>
+  <!--
+    The look of the padding fields: NexxtInputField forces `min-w-60` on its
+    input, which does not fit two to a row in an editor sidebar. Focus in the
+    field -- the input or the unit selector -- outranks hover: the hover ring
+    only applies while nothing inside has focus.
+  -->
+  <div
+    class="flex cursor-text items-center gap-1 overflow-hidden rounded-lg px-3 whitespace-nowrap ring ring-gray-200 transition-colors duration-150 ease-out focus-within:ring-cornflower-blue-500 hover:not-focus-within:ring-gray-300 motion-reduce:transition-none"
+    @pointerdown="onPointerDown"
+  >
+    <!--
+      A number input reports an empty `value` for anything it cannot parse, so
+      "12a" would arrive as an emptied field; `isTypo` tells the two apart. The
+      native spinners are hidden, as in NexxtInputField: the arrow keys step
+      the value, and the padding fields have none either.
+    -->
+    <input
+      ref="input"
+      type="number"
+      inputmode="numeric"
+      step="1"
+      :min="limits.min"
+      :max="limits.max"
+      autocomplete="off"
+      :placeholder="optional ? copy.placeholder : undefined"
+      :aria-label="`${label} (${unitText(unit)})`"
+      :value="draft"
+      :data-snap="snapped"
+      class="h-10 min-w-0 flex-1 [appearance:textfield] bg-transparent small-normal text-gray-900 tabular-nums placeholder-gray-700 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      @input="draft = ($event.target as HTMLInputElement).value"
+      @focus="selectAll"
+      @blur="commit"
+      @keydown="onKeydown"
+      @keyup="onKeyup"
+      @animationend="snapped = undefined"
+    />
+
+    <!--
+      The unit stays in sight on an empty field as well: it is the unit the next
+      typed value is written in, and with more than one it can be picked first.
+    -->
+    <span
+      v-if="units.length > 1"
+      data-testid="editor-dimension-unit"
+      class="relative flex shrink-0 items-center"
+    >
+      <!-- Native, so it opens the platform picker on touch and needs no popover. -->
+      <select
+        :value="unit"
+        :aria-label="copy.unit"
+        :data-pointer="unitByPointer || undefined"
+        class="cursor-pointer appearance-none rounded-sm bg-transparent pr-4 pl-1 small-normal text-gray-700 hover:text-gray-900 focus:outline-none focus-visible:not-data-pointer:bg-gray-100 focus-visible:not-data-pointer:text-gray-900"
+        @pointerdown="onUnitPointerDown"
+        @focus="onUnitFocus"
+        @keydown="unitByPointer = false"
+        @blur="unitByPointer = false"
+        @change="onUnit"
+      >
+        <option v-for="option in units" :key="option" :value="option">
+          {{ unitText(option) }}
+        </option>
+      </select>
+      <span class="pointer-events-none absolute right-0 text-xs text-gray-700" aria-hidden="true">
+        <NexxtIcon name="chevron-down" />
+      </span>
+    </span>
+
+    <span
+      v-else
+      data-testid="editor-dimension-unit"
+      class="shrink-0 small-normal text-gray-700 select-none"
+      aria-hidden="true"
+    >
+      {{ unitText(unit) }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/* A committed value that was clamped is replaced rather than edited, so it
+   arrives as its own number, travelling the way the value moved. */
+input[data-snap] {
+  animation: snap-in 180ms var(--ease-out-strong);
+}
+
+input[data-snap='up'] {
+  --snap-from: 2px;
+}
+
+input[data-snap='down'] {
+  --snap-from: -2px;
+}
+
+@keyframes snap-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--snap-from));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Not `animation: none`: that fires no `animationend`, so the attribute would
+   stay on and the next clamp the same way would have nothing to retrigger. */
+@media (prefers-reduced-motion: reduce) {
+  input[data-snap] {
+    animation: snap-hold 1ms;
+  }
+
+  @keyframes snap-hold {
+    from,
+    to {
+      opacity: 1;
+    }
+  }
+}
+</style>