@nexxtmove/ui 1.27.0 → 1.29.0

package/dist/nuxt.js

@@ -76,6 +76,7 @@ var s = {
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
 	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/dist/ui.css

@@ -1,2 +1,2 @@
-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}}}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.27.0",
+  "version": "1.29.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/atoms/Switch/Switch.vue

@@ -66,7 +66,12 @@ const iconSizeClasses: Record<SwitchSize, string> = {
       squashes the toggle the moment a sibling label wraps onto a second line.
     -->
     <span :class="['relative inline-block shrink-0', trackClasses[size]]">
-      <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
+      <!--
+        `role="switch"` on a native checkbox: it is on/off rather than
+        selected/unselected, and the checked state is still the input's own, so
+        no `aria-checked` is set -- the browser derives it from the checkbox.
+      -->
+      <input v-bind="$attrs" type="checkbox" role="switch" class="peer sr-only" v-model="model" />
       <span
         :class="[
           'absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200',

package/src/components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue

@@ -0,0 +1,146 @@
+<script lang="ts">
+/**
+ * The steps the slider can land on: the `max-w-*` sizes, with the px numbers
+ * mirroring their values (rem × 16). These are Tailwind's own container sizes,
+ * not Figma tokens -- `tailwind/` defines no `--container-*`, so the token sync
+ * cannot move them. The desync to watch for is a Tailwind major that renames or
+ * renumbers the scale: nothing here fails when that happens, the numbers just
+ * stop matching the CSS, so this list has to be checked by hand on an upgrade.
+ */
+export const EDITOR_MAX_WIDTH_STEPS = [
+  { token: 'xs', px: 320 },
+  { token: 'sm', px: 384 },
+  { token: 'md', px: 448 },
+  { token: 'lg', px: 512 },
+  { token: 'xl', px: 576 },
+  { token: '2xl', px: 672 },
+  { token: '3xl', px: 768 },
+  { token: '4xl', px: 896 },
+  { token: '5xl', px: 1024 },
+  { token: '6xl', px: 1152 },
+  { token: '7xl', px: 1280 },
+] as const
+
+/**
+ * The maximum width as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles.
+ */
+export type EditorMaxWidthValue = `max-w-${(typeof EDITOR_MAX_WIDTH_STEPS)[number]['token']}`
+
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorMaxWidthMessages {
+  /**
+   * Unit shown behind the value. Defaults to `'px'`. Keep it to a short symbol
+   * such as `'px'` or `'pt'`: the readout is only as wide as `1280 px` needs,
+   * and a spelled-out unit grows it and pushes the slider in.
+   */
+  unit?: string
+}
+
+export interface NexxtEditorMaxWidthProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Vaste breedte'` -- switched off the page runs full width, so the setting
+   * is the fixed width, not a maximum. The library has no i18n layer, so a
+   * consumer in another language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the value readout. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorMaxWidthMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+} satisfies Required<EditorMaxWidthMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+
+defineOptions({ name: 'NexxtEditorMaxWidth' })
+
+const { label = 'Vaste breedte', messages } = defineProps<NexxtEditorMaxWidthProps>()
+
+/** The selected maximum width, as the Tailwind class to apply. */
+const model = defineModel<EditorMaxWidthValue>({ required: true })
+
+/**
+ * Open state of the block. Switched off means the page runs full width, which
+ * is the absence of a class rather than a value of its own: the consumer simply
+ * writes no `max-w-*` then. The chosen width is kept while the block is
+ * collapsed, so switching back on restores it.
+ */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = EDITOR_MAX_WIDTH_STEPS.length - 1
+
+/**
+ * Position of the current value on the step list. A value that is not on the
+ * list -- a stored `max-w-prose` from before this component, say -- falls back
+ * to the first step instead of leaving the thumb off the track; the first
+ * change writes a valid class back.
+ */
+const stepIndex = computed(() =>
+  Math.max(
+    0,
+    EDITOR_MAX_WIDTH_STEPS.findIndex(({ token }) => `max-w-${token}` === model.value),
+  ),
+)
+
+// The slider moves over the index, not over the px value, so its model is
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = `max-w-${EDITOR_MAX_WIDTH_STEPS[index].token}`
+  },
+})
+
+const displayValue = computed(
+  () => `${EDITOR_MAX_WIDTH_STEPS[stepIndex.value].px} ${copy.value.unit}`,
+)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" switchable>
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the width, so the readout is rendered next to it instead.
+        The thumb has the same problem in `aria-valuenow`, which
+        `aria-valuetext` overrides with the string the readout shows. The block
+        label is the switch's own label, not a <label> for the slider, so the
+        name goes on the thumb explicitly.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+      />
+
+      <!--
+        `min-w-16` rather than the `min-w-12` of the narrower editor sliders:
+        `1280 px` does not fit in 12. That plus `shrink-0` is what fixes the
+        width of the box, so the slider keeps its size while dragging;
+        `tabular-nums` only stops the digits from jittering inside it.
+        gray-700, not the gray-500 Slider uses for its own readout: axe puts
+        gray-500 on white at 1.84:1, well under the 4.5:1 it needs at this size.
+      -->
+      <span
+        class="min-w-16 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
+      >
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components/editor/molecules/EditorPadding/EditorPadding.vue

@@ -2,15 +2,22 @@
 import type { PaddingIconSide } from './_PaddingIcon.vue'
 
 /**
- * The steps a field can land on, as the numeric part of the Tailwind class.
- * 13 and 15 are missing on purpose: the theme defines `--spacing-0` through
- * `--spacing-12` and then only 14 and 16, so offering every integer would
- * produce classes that have no token behind them.
+ * The steps a field can land on, as the numeric part of the Tailwind class:
+ * every integer `--spacing-*` token the theme defines. The list thins out as it
+ * climbs -- 13 and 15 are absent, and past 16 it moves in fours and then
+ * eights -- so snapping over this list rather than over the px value keeps the
+ * field off classes that have no token behind them.
  */
-const PADDING_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16] as const
+const PADDING_STEPS = [
+  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64,
+  72, 80, 96,
+] as const
 
-/** Highest step, used as the `max` of every field and as the clamp ceiling. */
-const MAX_STEP = PADDING_STEPS[PADDING_STEPS.length - 1]
+/** The spacing scale is built on 0.25rem, so `p-4` is 4 × 4 = 16 px. */
+const PX_PER_STEP = 4
+
+/** Highest value a field takes, in px: the top step is `p-96`, which is 384 px. */
+const MAX_PX = PADDING_STEPS[PADDING_STEPS.length - 1] * PX_PER_STEP
 
 const ALL_SIDES: PaddingIconSide[] = ['top', 'right', 'bottom', 'left']
 
@@ -36,6 +43,12 @@ export interface EditorPaddingMessages {
    * fields. Defaults to `'Padding per zijde'`.
    */
   toggle?: string
+  /**
+   * Unit the fields show and read, appended to every accessible name. The
+   * values themselves are px whatever this says, so it is copy, not a
+   * conversion. Defaults to `'px'`.
+   */
+  unit?: string
 }
 
 export interface NexxtEditorPaddingProps {
@@ -61,6 +74,7 @@ const DEFAULT_MESSAGES = {
   bottom: 'Onder',
   left: 'Links',
   toggle: 'Padding per zijde',
+  unit: 'px',
 } satisfies Required<EditorPaddingMessages>
 
 /** Which sides a `p*-` prefix writes to. */
@@ -105,15 +119,15 @@ const serialize = ({ top, right, bottom, left }: PaddingSides): string => {
 }
 
 /**
- * Clamp to 0-16 and snap to the nearest step. A tie goes to the lower step, so
- * 13 becomes 12 and 15 becomes 14; that way typing a digit never jumps the
- * value further than the next step up.
+ * Turn a px value into a step: clamp to 0-384 and take the nearest one. A tie
+ * goes to the lower step, so 14 px becomes 12 and 60 px becomes 56; that way a
+ * value in between never lands further away than the step above it.
  */
-const snap = (value: number): number => {
-  const clamped = Math.min(Math.max(value, 0), MAX_STEP)
+const snap = (px: number): number => {
+  const clamped = Math.min(Math.max(px, 0), MAX_PX)
 
   return PADDING_STEPS.reduce((best, step) =>
-    Math.abs(step - clamped) < Math.abs(best - clamped) ? step : best,
+    Math.abs(step * PX_PER_STEP - clamped) < Math.abs(best * PX_PER_STEP - clamped) ? step : best,
   )
 }
 </script>
@@ -198,25 +212,53 @@ const secondaryFields = computed<PaddingField[]>(() => [
 // from the tab order. Same trick as EditorSettingsBlock.
 const secondaryInert = computed(() => (expanded.value ? undefined : true))
 
-// An empty field is a 0, and a 0 is shown as an empty field so the placeholder
-// carries it. Typing "0" therefore leaves the bound value unchanged, which is
-// what keeps Vue from wiping the character out from under the caret.
+// The fields speak px, not steps: `p-6` reads as 24. A 0 is shown as an empty
+// field so the placeholder carries it, and an empty field commits back as a 0.
 const display = (side: PaddingIconSide) =>
-  sides.value[side] === 0 ? '' : String(sides.value[side])
+  sides.value[side] === 0 ? '' : String(sides.value[side] * PX_PER_STEP)
 
-// Only plain digits count. `Number.parseInt` would read "1e2" as 1 and "12abc"
-// as 12, which silently turns a typo into a value the user did not ask for.
-const DIGITS = /^\d+$/
+const apply = (next: PaddingSides) => {
+  // A change that changes nothing -- committing 30 where the value is already
+  // 28 px, arrowing up at the ceiling, closing a symmetrical block -- writes
+  // nothing either, so the editor does not see an edit that was not one.
+  if (ALL_SIDES.every((side) => next[side] === sides.value[side])) return
 
-const onInput = (field: PaddingField, typed: string) => {
-  const raw = typed.trim()
-  const step = DIGITS.test(raw) ? snap(Number(raw)) : 0
+  sides.value = next
+  model.value = serialize(next)
+}
 
+const write = (field: PaddingField, step: number) => {
   const next = { ...sides.value }
   for (const side of field.targets) next[side] = step
-  sides.value = next
 
-  model.value = serialize(next)
+  apply(next)
+}
+
+/** A confirmed field, in px: blur or Enter, not a keystroke. */
+const onCommit = (field: PaddingField, px: number) => write(field, snap(px))
+
+/** One step along the list, so the arrow keys never stop on a missing token. */
+const onStep = (field: PaddingField, direction: 1 | -1) => {
+  const index = PADDING_STEPS.indexOf(sides.value[field.source] as (typeof PADDING_STEPS)[number])
+  // No wrapping: the ends of the list are the ends of the range.
+  const next = Math.min(Math.max(index + direction, 0), PADDING_STEPS.length - 1)
+
+  write(field, PADDING_STEPS[next])
+}
+
+/**
+ * Closing the block makes the two fields that stay visible the truth: whatever
+ * the hidden bottom and left were, they follow top and right. That is written
+ * straight away rather than on the next edit, so what is on screen and what is
+ * on the element never disagree -- `pt-4 pr-2 pb-6 pl-2` closes as `px-2 py-4`,
+ * and the horizontal field then reads what Rechts said. Opening changes nothing:
+ * it only shows the two values that were already there.
+ */
+const onToggle = () => {
+  expanded.value = !expanded.value
+  if (expanded.value) return
+
+  apply({ ...sides.value, bottom: sides.value.top, left: sides.value.right })
 }
 </script>
 
@@ -235,8 +277,9 @@ const onInput = (field: PaddingField, typed: string) => {
         :sides="field.targets"
         :label="field.label"
         :value="display(field.source)"
-        :max="MAX_STEP"
-        @input="onInput(field, $event)"
+        :unit="copy.unit"
+        @commit="onCommit(field, $event)"
+        @step="onStep(field, $event)"
       />
 
       <!--
@@ -256,7 +299,7 @@ const onInput = (field: PaddingField, typed: string) => {
               ? 'bg-cornflower-blue-50 text-cornflower-blue-600 ring-cornflower-blue-500'
               : 'text-gray-700 ring-gray-200 hover:text-gray-900',
           ]"
-          @click="expanded = !expanded"
+          @click="onToggle"
         >
           <PaddingIcon :sides="ALL_SIDES" />
         </button>
@@ -300,8 +343,9 @@ const onInput = (field: PaddingField, typed: string) => {
             :sides="field.targets"
             :label="field.label"
             :value="display(field.source)"
-            :max="MAX_STEP"
-            @input="onInput(field, $event)"
+            :unit="copy.unit"
+            @commit="onCommit(field, $event)"
+            @step="onStep(field, $event)"
           />
         </div>
       </div>

package/src/components/editor/molecules/EditorPadding/_PaddingField.vue

@@ -1,56 +1,243 @@
+<script lang="ts">
+// Only plain digits count. `Number.parseInt` would read "1e2" as 1 and "12abc"
+// as 12, which silently turns a typo into a value the user did not ask for.
+const DIGITS = /^\d+$/
+</script>
+
 <script lang="ts" setup>
+import { nextTick, ref, useTemplateRef, watch } from 'vue'
 import PaddingIcon from './_PaddingIcon.vue'
 import type { PaddingIconSide } from './_PaddingIcon.vue'
 
 export interface NexxtEditorPaddingFieldProps {
   /** Sides the icon marks, which is also what this field edits. */
   sides: PaddingIconSide[]
-  /** Accessible name of the input; the settings block label is not a `<label for>`. */
+  /** Name of the field; the unit is appended to it for the accessible name. */
   label: string
-  /** Value as shown, already normalised. An empty string falls back to the `0` placeholder. */
+  /** Value as shown, in the unit below. An empty string falls back to the `0` placeholder. */
   value: string
-  /** Highest value the input accepts. */
-  max: number
+  /** Unit of the value, shown behind the input and part of the accessible name. */
+  unit: string
 }
 
 defineOptions({ name: 'NexxtEditorPaddingField' })
 
-defineProps<NexxtEditorPaddingFieldProps>()
+const { value } = defineProps<NexxtEditorPaddingFieldProps>()
+
+const emit = defineEmits<{
+  /**
+   * The value the user confirmed, on blur or Enter rather than on every
+   * keystroke. Reading the text is this component's job because it owns the
+   * input; text that is not a number never gets here. Snapping it onto the
+   * scale is the parent's, because it owns the class string.
+   */
+  commit: [value: number]
+  /** One step up or down the parent's list, straight away. */
+  step: [direction: 1 | -1]
+}>()
+
+const inputEl = useTemplateRef<HTMLInputElement>('input')
+
+/**
+ * What the input shows while it is being edited. It is deliberately not the
+ * model: a half-typed "3" on the way to "30" would snap to 4 and fight the
+ * caret, so nothing leaves this component until the value is confirmed.
+ */
+const draft = ref(value)
+
+/** 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 -- the parent
+// snapping a commit included -- replaces the draft.
+watch(
+  () => value,
+  (next) => {
+    draft.value = next
+  },
+)
+
+/** Focus with the whole value selected, so the next digit replaces it. */
+const selectAll = () => {
+  inputEl.value?.focus()
+  inputEl.value?.select()
+}
+
+/**
+ * Pointer-down anywhere in the field -- on the icon or the unit as much as on
+ * the input -- lands in the input with its value selected. The default is
+ * prevented so the browser does not drop a caret inside that selection again on
+ * mouse-up.
+ */
+const onPointerDown = (event: PointerEvent) => {
+  // Mouse only. Touch and pen keep their native behaviour, because preventing
+  // the default there can keep iOS from opening the keyboard -- and `@focus`
+  // selects the value on those just the same.
+  if (event.pointerType !== 'mouse') return
+  if (document.activeElement === inputEl.value) return
+
+  event.preventDefault()
+  selectAll()
+}
 
 /**
- * The raw string the user typed, on every keystroke rather than on change.
- * Parsing and snapping belong to the parent, which owns the class string.
+ * Hand the value to the parent and show back whatever it made of it, which is
+ * the snapped value, or the value from before for text that was not a number at
+ * all. The draft is re-read rather than assumed: a commit that snaps onto the
+ * value the field already had leaves the model untouched, so waiting on the prop
+ * to change would strand the typed text.
  */
-const emit = defineEmits<{ input: [value: string] }>()
+const commit = async () => {
+  const typed = draft.value.trim()
+
+  // Clearing the field is how a zero is entered; the placeholder already shows
+  // it. Anything that is not a number leaves the field without a commit and is
+  // replaced by the old value below, the same as Escape -- guessing at "12a"
+  // would put a value on the element that nobody asked for.
+  if (typed === '') emit('commit', 0)
+  else if (DIGITS.test(typed)) emit('commit', Number(typed))
+
+  await nextTick()
+  draft.value = value
+
+  // Compared as numbers, so "016" against a field already showing 16 is not a
+  // change and does not animate.
+  if (!DIGITS.test(typed) || Number(typed) === Number(value || '0')) return
+
+  // Restart the one-shot: re-setting the direction it already has would not
+  // retrigger the animation, so two snaps the same way within 180ms would show
+  // only the first.
+  snapped.value = undefined
+  await nextTick()
+
+  snapped.value = Number(value || '0') > Number(typed) ? 'up' : 'down'
+}
 
-const onInput = (event: Event) => emit('input', (event.target as HTMLInputElement).value)
+/** Arrows write immediately, so the draft only has to catch up. */
+const onStep = async (direction: 1 | -1) => {
+  emit('step', direction)
+
+  await nextTick()
+  draft.value = value
+}
+
+const onKeydown = async (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    await commit()
+
+    // Select what it landed on, so the field is ready for the next value the
+    // same way focus and Escape leave it.
+    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 === value) return
+
+    event.stopPropagation()
+    draft.value = value
+    return selectAll()
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+    // Or the caret would jump to either end of the value as well.
+    event.preventDefault()
+    return onStep(event.key === 'ArrowUp' ? 1 : -1)
+  }
+}
 </script>
 
 <template>
   <!--
     Visually a NexxtInputField, rebuilt here: that component forces `min-w-60`
     on its input, which blows up this two-column grid, and renders spin buttons
-    for `type="number"` that make no sense against a step list.
+    for `type="number"` that make no sense against a step list. `cursor-text`
+    and the pointer handler make the whole row behave as the input it wraps.
+
+    The inner spacing is asymmetric, the padding is not: `gap-1` with an extra
+    `mr-1` on the icon leaves 8px between the icon and the number but only 4px
+    between the number and its unit, which reads as one value and buys the number
+    the width it needs. At three digits plus a unit the field has little to spare.
   -->
   <div
-    class="flex items-center gap-2 overflow-hidden rounded-lg pl-3 ring ring-gray-200 transition-colors duration-150 ease-out focus-within:ring-cornflower-blue-500 hover:ring-gray-300 motion-reduce:transition-none"
+    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:ring-gray-300 motion-reduce:transition-none"
+    @pointerdown="onPointerDown"
   >
-    <PaddingIcon :sides="sides" class="text-gray-900" />
+    <PaddingIcon :sides="sides" class="mr-1 text-gray-900" />
 
     <!--
-      `type="number"` for the numeric keypad on mobile; the spinners are hidden
-      because the value snaps to a step list, not to a fixed interval.
+      Text, not `type="number"`: a number input reports an empty `value` for
+      anything it cannot parse, so "12a" would arrive as a cleared field and
+      snap to 0 mid-word. `inputmode` still asks for the numeric keypad. No
+      `maxlength`: it would silently turn a pasted 1000 into 100, where the
+      clamp turns it into the 384 the user was reaching for.
     -->
     <input
-      type="number"
+      ref="input"
+      type="text"
       inputmode="numeric"
-      min="0"
-      :max="max"
+      autocomplete="off"
       placeholder="0"
-      :aria-label="label"
-      :value="value"
-      class="h-10 w-full bg-transparent pr-3 small-normal text-gray-900 placeholder-gray-700 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      @input="onInput"
+      :aria-label="`${label} (${unit})`"
+      :value="draft"
+      :data-snap="snapped"
+      class="h-10 min-w-0 flex-1 bg-transparent text-right small-normal text-gray-900 tabular-nums placeholder-gray-700 focus:outline-none"
+      @input="draft = ($event.target as HTMLInputElement).value"
+      @focus="selectAll"
+      @blur="commit"
+      @keydown="onKeydown"
+      @animationend="snapped = undefined"
     />
+
+    <span class="shrink-0 small-normal text-gray-700 select-none" aria-hidden="true">
+      {{ unit }}
+    </span>
   </div>
 </template>
+
+<style scoped>
+/* A committed value that landed on a different step than the one typed is
+   replaced rather than edited, so it arrives as its own number: it fades in and
+   travels the way the value moved -- up for a higher one, down for a lower. */
+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);
+  }
+}
+
+/* The number itself is the feedback; without motion there is nothing left to
+   say that the swap needs, so it just appears. Not `animation: none`: that fires
+   no `animationend`, so the attribute would stay on and the next snap in the
+   same direction would have nothing to retrigger. A 1ms no-op keeps the event. */
+@media (prefers-reduced-motion: reduce) {
+  input[data-snap] {
+    animation: snap-hold 1ms;
+  }
+
+  @keyframes snap-hold {
+    from,
+    to {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components.json

@@ -73,6 +73,7 @@
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+  "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
   "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/src/index.ts

@@ -56,6 +56,11 @@ export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
 } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { EDITOR_MAX_WIDTH_STEPS } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
+export type {
+  EditorMaxWidthMessages,
+  EditorMaxWidthValue,
+} from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
@@ -87,6 +92,7 @@ export { default as NexxtEditorFlexDirection } from './components/editor/molecul
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'