@nexxtmove/ui 1.52.0 → 1.53.0

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

@@ -99,7 +99,8 @@ const MIDDLE = 4
 </script>
 
 <script lang="ts" setup>
-import { computed, useId, useTemplateRef } from 'vue'
+import { computed, useId } from 'vue'
+import { useRadioGrid } from '../../composables/useRadioGrid'
 
 defineOptions({ name: 'NexxtEditorAnchor', inheritAttrs: false })
 
@@ -118,8 +119,6 @@ const model = defineModel<EditorAnchorValue | null>({ required: true })
 
 const labelId = useId()
 
-const cellEls = useTemplateRef<HTMLButtonElement[]>('cellButtons')
-
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
 const selectedIndex = computed(() => {
@@ -129,8 +128,28 @@ const selectedIndex = computed(() => {
   return index === -1 ? null : index
 })
 
-/** Roving tabindex: one tab stop, on the chosen cell or else on the middle. */
-const tabStop = computed(() => selectedIndex.value ?? MIDDLE)
+const choose = (index: number) => {
+  const cell = EDITOR_ANCHOR_OPTIONS[index]
+
+  if (disabled || !cell || index === selectedIndex.value) return
+
+  model.value = { x: cell.x, y: cell.y }
+}
+
+/**
+ * The radio pattern in two dimensions: an arrow moves and chooses at once and
+ * stops at the edge; Home and End jump to the first and the last cell. One tab
+ * stop, on the chosen cell or else on the middle. Modifier keys are left to the
+ * browser.
+ */
+const { tabStop, cellRef, onKeydown } = useRadioGrid({
+  rows: ROWS,
+  columns: COLUMNS,
+  selected: selectedIndex,
+  preferred: () => MIDDLE,
+  homeEnd: 'grid',
+  onChoose: choose,
+})
 
 const cells = computed(() =>
   EDITOR_ANCHOR_OPTIONS.map(({ x, y }, index) => {
@@ -155,41 +174,6 @@ const cells = computed(() =>
 const groupName = computed(() =>
   showLabel ? { 'aria-labelledby': labelId } : { 'aria-label': label },
 )
-
-const choose = (index: number) => {
-  const cell = EDITOR_ANCHOR_OPTIONS[index]
-
-  if (disabled || !cell || index === selectedIndex.value) return
-
-  model.value = { x: cell.x, y: cell.y }
-}
-
-/**
- * The radio pattern in two dimensions: an arrow moves and chooses at once and
- * stops at the edge; Home and End jump to the first and the last cell. A key
- * with a modifier belongs to the browser or the OS (Alt+Left is back, Cmd+Left
- * is line start), so it is left alone: no choice, no preventDefault.
- */
-const onKeydown = (event: KeyboardEvent, index: number) => {
-  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-
-  const row = Math.floor(index / COLUMNS)
-  const column = index % COLUMNS
-  const next = {
-    ArrowLeft: column > 0 ? index - 1 : index,
-    ArrowRight: column < COLUMNS - 1 ? index + 1 : index,
-    ArrowUp: row > 0 ? index - COLUMNS : index,
-    ArrowDown: row < ROWS - 1 ? index + COLUMNS : index,
-    Home: 0,
-    End: EDITOR_ANCHOR_OPTIONS.length - 1,
-  }[event.key]
-
-  if (next === undefined) return
-
-  event.preventDefault()
-  choose(next)
-  cellEls.value?.[next]?.focus()
-}
 </script>
 
 <template>
@@ -216,7 +200,7 @@ const onKeydown = (event: KeyboardEvent, index: number) => {
     <button
       v-for="cell in cells"
       :key="cell.index"
-      ref="cellButtons"
+      :ref="cellRef(cell.index)"
       type="button"
       role="radio"
       :aria-checked="cell.checked"

package/src/components/editor/molecules/EditorAnchor/__snapshots__/EditorAnchor.test.ts.snap

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorAnchor markup > renders unchanged with a chosen cell 1`] = `
+"<!--v-if-->
+<!--
+    \`w-fit\`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+<div role="radiogroup" aria-label="Plek van de afbeelding" aria-describedby="hint" class="grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200">
+  <!--
+      No \`focus:outline-none\` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    --><button type="button" role="radio" aria-checked="false" aria-label="Linksboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Boven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Links" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Midden" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechts" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Linksonder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Onder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="true" aria-label="Rechtsonder" tabindex="0" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none bg-cornflower-blue-600 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-2.5 bg-white"></span></button>
+</div>"
+`;
+
+exports[`EditorAnchor markup > renders unchanged with a visible label 1`] = `
+"<p id="v-0" class="mb-1.5 small-normal text-gray-900">Plek van de afbeelding</p>
+<!--
+    \`w-fit\`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+<div role="radiogroup" aria-labelledby="v-0" aria-describedby="hint" class="grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200">
+  <!--
+      No \`focus:outline-none\` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    --><button type="button" role="radio" aria-checked="false" aria-label="Linksboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Boven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Links" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="true" aria-label="Midden" tabindex="0" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none bg-cornflower-blue-600 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-2.5 bg-white"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechts" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Linksonder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Onder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsonder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button>
+</div>"
+`;
+
+exports[`EditorAnchor markup > renders unchanged with disabled 1`] = `
+"<!--v-if-->
+<!--
+    \`w-fit\`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+<div role="radiogroup" aria-label="Plek van de afbeelding" aria-describedby="hint" aria-disabled="true" class="grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200 opacity-50">
+  <!--
+      No \`focus:outline-none\` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    --><button type="button" role="radio" aria-checked="true" aria-label="Linksboven" tabindex="0" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none bg-cornflower-blue-600 cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-2.5 bg-white"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Boven" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsboven" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Links" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Midden" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechts" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Linksonder" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Onder" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsonder" tabindex="-1" disabled="" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none cursor-not-allowed"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button>
+</div>"
+`;
+
+exports[`EditorAnchor markup > renders unchanged with no choice 1`] = `
+"<!--v-if-->
+<!--
+    \`w-fit\`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+<div role="radiogroup" aria-label="Plek van de afbeelding" aria-describedby="hint" class="grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200">
+  <!--
+      No \`focus:outline-none\` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    --><button type="button" role="radio" aria-checked="false" aria-label="Linksboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Boven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsboven" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Links" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Midden" tabindex="0" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechts" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Linksonder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Onder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button><button type="button" role="radio" aria-checked="false" aria-label="Rechtsonder" tabindex="-1" class="flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none hover:bg-gray-100 cursor-pointer"><span aria-hidden="true" class="rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none size-1.5 bg-gray-400"></span></button>
+</div>"
+`;

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

@@ -33,10 +33,25 @@ export const EDITOR_GAP_STEPS = [
  */
 export type EditorGapValue = `gap-${(typeof EDITOR_GAP_STEPS)[number]['token']}`
 
-/** Overridable copy of the value readout. Every key is optional. */
+/** Overridable copy. Every key is optional. */
 export interface EditorGapMessages {
   /** Unit shown behind the value. Defaults to `'px'`. */
   unit?: string
+  /** The fixed option, with the `auto` model bound. Defaults to `'Vast'`. */
+  fixed?: string
+  /** The auto option, with the `auto` model bound. Defaults to `'Auto'`. */
+  auto?: string
+  /**
+   * Name of the slider while Auto is on, when the gap is a minimum rather than
+   * the gap itself. Defaults to `'Tussenruimte, minimaal'`; on Vast the slider
+   * is named by `label`.
+   */
+  minimumName?: string
+  /**
+   * Name of the Vast | Auto toolbar, so it is not named like the slider.
+   * Defaults to `'Soort tussenruimte'`.
+   */
+  modeName?: string
 }
 
 export interface NexxtEditorGapProps {
@@ -55,6 +70,10 @@ export interface NexxtEditorGapProps {
 
 const DEFAULT_MESSAGES = {
   unit: 'px',
+  fixed: 'Vast',
+  auto: 'Auto',
+  minimumName: 'Tussenruimte, minimaal',
+  modeName: 'Soort tussenruimte',
 } satisfies Required<EditorGapMessages>
 </script>
 
@@ -62,6 +81,7 @@ const DEFAULT_MESSAGES = {
 import { computed } from 'vue'
 import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
 
 defineOptions({ name: 'NexxtEditorGap' })
 
@@ -70,6 +90,38 @@ const { label = 'Tussenruimte', messages } = defineProps<NexxtEditorGapProps>()
 /** The selected gap, as the Tailwind class to apply. */
 const model = defineModel<EditorGapValue>({ required: true })
 
+/**
+ * Optional: whether the main axis distributes the space (Auto). Only when it
+ * is bound does the block offer Vast | Auto above the slider; the slider then
+ * sets the minimum gap. The component writes nothing else for Auto, and the
+ * gap model does not change when it is switched.
+ */
+// `default: undefined` on purpose: a boolean prop without a default is cast to
+// `false` when it is absent, and then an unbound model could not be told apart
+// from Auto switched off.
+const auto = defineModel<boolean>('auto', { default: undefined })
+
+/**
+ * Bound by the consumer: an unbound model stays `undefined`. The template
+ * renders two whole branches rather than `v-if`s inside one, so without it the
+ * markup is exactly what it always was, without even an empty comment node.
+ */
+const offersAuto = computed(() => auto.value !== undefined)
+
+const autoOptions = computed(() => [
+  { value: 'fixed', label: copy.value.fixed },
+  { value: 'auto', label: copy.value.auto },
+])
+
+const autoChoice = computed({
+  get: () => (auto.value ? 'auto' : 'fixed'),
+  set: (value: string) => {
+    auto.value = value === 'auto'
+  },
+})
+
+const sliderName = computed(() => (auto.value ? copy.value.minimumName : label))
+
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
 const maxIndex = EDITOR_GAP_STEPS.length - 1
@@ -101,7 +153,29 @@ const displayValue = computed(() => `${EDITOR_GAP_STEPS[stepIndex.value].px} ${c
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <div class="flex items-center gap-4">
+    <div v-if="offersAuto" class="flex flex-col gap-3">
+      <NexxtToggleGroup v-model="autoChoice" :options="autoOptions" :aria-label="copy.modeName" />
+
+      <!--
+        The slider and readout exactly as below, see the notes there, so they
+        keep their width and place on Vast, on Auto and without the model. Only
+        the slider's name changes with Auto.
+      -->
+      <div class="flex items-center gap-4">
+        <NexxtSlider
+          v-model="sliderValue"
+          :min="0"
+          :max="maxIndex"
+          :step="1"
+          :aria-label="sliderName"
+          :aria-valuetext="displayValue"
+        />
+        <span class="min-w-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">
+          {{ displayValue }}
+        </span>
+      </div>
+    </div>
+    <div v-else class="flex items-center gap-4">
       <!--
         Slider's own `showValue` prints its model, which here is the step index
         rather than the gap, so the readout is rendered next to it instead. The

package/src/components/editor/molecules/EditorGap/__snapshots__/EditorGap.test.ts.snap

@@ -0,0 +1,103 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorGap markup without auto > renders unchanged with a value on the scale 1`] = `
+"<div class="py-4">
+  <!--
+      Switch.vue sets \`inheritAttrs: false\` and binds \`$attrs\` on its sr-only
+      input, so a class on <Switch> never reaches its root <label>. The child
+      variant below styles that label from the header instead, which keeps the
+      whole row clickable and the accessible name on the real <label>. The gap
+      has to go on that label too: the header has a single child in both modes,
+      so its own \`gap\` would never apply and the spacing would silently fall
+      back to the \`gap-2\` that Switch.vue sets for itself.
+    -->
+  <div class="flex items-center [&amp;>label]:flex [&amp;>label]:w-full [&amp;>label]:gap-3">
+    <p class="small-normal text-gray-900">Tussenruimte</p>
+  </div>
+  <div class="grid grid-rows-[1fr]">
+    <!--
+        \`overflow-hidden\` is what makes the 0fr collapse clip, but it also clips
+        a focus ring on a full-width control in the slot, and the block has no
+        horizontal padding of its own. \`-mx-1\` widens the clipping box by 4px on
+        each side and the \`px-1\` below pushes the content back, so the ring has
+        room while the content keeps the same x position as the label.
+      -->
+    <div class="-mx-1 min-h-0 overflow-hidden opacity-100">
+      <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+      <div class="px-1 pt-1.5 pb-1">
+        <div class="flex items-center gap-4">
+          <!--
+        Slider's own \`showValue\` prints its model, which here is the step index
+        rather than the gap, 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 a <p>,
+        not a <label>, so the name goes on the thumb explicitly.
+      -->
+          <div class="flex w-full flex-col gap-2">
+            <!--v-if-->
+            <div class="flex items-center gap-4"><span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex w-full touch-none items-center select-none cursor-pointer" aria-disabled="false"><span data-orientation="horizontal" class="relative w-full grow rounded-full bg-gray-200 h-1"><span data-orientation="horizontal" style="left: 0%; right: 57.14285714285714%;" class="absolute h-full rounded-full bg-cornflower-blue-500"></span></span><span data-reka-collection-item="" aria-label="Tussenruimte" aria-valuetext="24 px" class="block size-4 rounded-full border shadow-sm transition-colors border-gray-200 bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="14" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px); display: none;"></span>
+              <!--v-if--></span>
+              <!--v-if-->
+            </div>
+          </div>
+          <!--
+        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-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">24 px</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`EditorGap markup without auto > renders unchanged with a value outside the scale 1`] = `
+"<div class="py-4">
+  <!--
+      Switch.vue sets \`inheritAttrs: false\` and binds \`$attrs\` on its sr-only
+      input, so a class on <Switch> never reaches its root <label>. The child
+      variant below styles that label from the header instead, which keeps the
+      whole row clickable and the accessible name on the real <label>. The gap
+      has to go on that label too: the header has a single child in both modes,
+      so its own \`gap\` would never apply and the spacing would silently fall
+      back to the \`gap-2\` that Switch.vue sets for itself.
+    -->
+  <div class="flex items-center [&amp;>label]:flex [&amp;>label]:w-full [&amp;>label]:gap-3">
+    <p class="small-normal text-gray-900">Tussenruimte</p>
+  </div>
+  <div class="grid grid-rows-[1fr]">
+    <!--
+        \`overflow-hidden\` is what makes the 0fr collapse clip, but it also clips
+        a focus ring on a full-width control in the slot, and the block has no
+        horizontal padding of its own. \`-mx-1\` widens the clipping box by 4px on
+        each side and the \`px-1\` below pushes the content back, so the ring has
+        room while the content keeps the same x position as the label.
+      -->
+    <div class="-mx-1 min-h-0 overflow-hidden opacity-100">
+      <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+      <div class="px-1 pt-1.5 pb-1">
+        <div class="flex items-center gap-4">
+          <!--
+        Slider's own \`showValue\` prints its model, which here is the step index
+        rather than the gap, 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 a <p>,
+        not a <label>, so the name goes on the thumb explicitly.
+      -->
+          <div class="flex w-full flex-col gap-2">
+            <!--v-if-->
+            <div class="flex items-center gap-4"><span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex w-full touch-none items-center select-none cursor-pointer" aria-disabled="false"><span data-orientation="horizontal" class="relative w-full grow rounded-full bg-gray-200 h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute h-full rounded-full bg-cornflower-blue-500"></span></span><span data-reka-collection-item="" aria-label="Tussenruimte" aria-valuetext="0 px" class="block size-4 rounded-full border shadow-sm transition-colors border-gray-200 bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="14" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px); display: none;"></span>
+              <!--v-if--></span>
+              <!--v-if-->
+            </div>
+          </div>
+          <!--
+        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-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">0 px</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/src/components.json

@@ -77,6 +77,7 @@
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorSettingsGroup": "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorAlignmentGrid": "components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue",
   "NexxtEditorAnchor": "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",

package/src/index.ts

@@ -34,6 +34,14 @@ export type {
   NexxtPlaceholderInputMessages,
   NexxtPlaceholderInputProps,
 } from './components/molecules/PlaceholderInput/PlaceholderInput.vue'
+export { EDITOR_ALIGNMENT_POSITIONS } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue'
+export type {
+  EditorAlignmentDirection,
+  EditorAlignmentGridMessages,
+  EditorAlignmentMode,
+  EditorAlignmentPosition,
+  EditorAlignmentValue,
+} from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue'
 export { EDITOR_ALIGN_ITEMS_OPTIONS } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export type {
   EditorAlignItemsMessages,
@@ -211,6 +219,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
 export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { default as NexxtEditorAlignmentGrid } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue'
 export { default as NexxtEditorAnchor } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'