@nexxtmove/ui 1.51.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/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue

@@ -0,0 +1,213 @@
+<script lang="ts">
+export interface NexxtEditorOverrideStatusProps {
+  /** Whether the setting differs from where its value comes from without an override. */
+  overridden: boolean
+  /**
+   * The status while the setting is not overridden, such as `'Volgt huisstijl'`
+   * or `'Grootte 100% (origineel)'`. With `hideWhenDefault` it is not shown,
+   * but it is still announced when a reset brings the setting back.
+   */
+  label: string
+  /**
+   * The status while the setting is overridden, shown next to a dot. Defaults
+   * to the Dutch `'Aangepast'`; a value such as `'Grootte 150%'` works too.
+   */
+  overriddenLabel?: string
+  /**
+   * Text of the reset button, shown only while overridden, such as
+   * `'Terug naar huisstijl'`.
+   */
+  resetLabel: string
+  /** Render no status line at all while the setting is not overridden. */
+  hideWhenDefault?: boolean
+  /**
+   * A selector, matched inside the default slot, for the element that takes the
+   * focus after a reset. Defaults to the first focusable element in the slot.
+   * When it matches nothing focusable, the first focusable element is used, and
+   * without one the component itself takes the focus.
+   */
+  focusTarget?: string
+}
+
+/** Everything that can take the focus; `tabIndex` and state are checked per element. */
+const FOCUSABLE =
+  'a[href], button, input, select, textarea, [tabindex], [contenteditable="true"], [contenteditable=""]'
+
+/** How long an announcement stays in the live region before it is cleared again. */
+const ANNOUNCEMENT_MS = 1000
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+defineOptions({ name: 'NexxtEditorOverrideStatus' })
+
+const {
+  overridden,
+  label,
+  overriddenLabel = 'Aangepast',
+  resetLabel,
+  hideWhenDefault = false,
+  focusTarget,
+} = defineProps<NexxtEditorOverrideStatusProps>()
+
+const emit = defineEmits<{
+  /** The reset button was pressed. The parent clears the override. */
+  reset: []
+}>()
+
+defineSlots<{
+  /** The control the status belongs to, rendered above the status line. */
+  default?: () => unknown
+}>()
+
+const root = useTemplateRef<HTMLElement>('root')
+const row = useTemplateRef<HTMLElement>('row')
+
+const status = computed(() => (overridden ? overriddenLabel : label))
+
+const showRow = computed(() => overridden || !hideWhenDefault)
+
+/**
+ * Whether an element can take the focus right now. `tabIndex` is -1 for the
+ * cells a roving tabindex skips, so only the tab stop of such a group counts.
+ */
+const canFocus = (el: Element): el is HTMLElement =>
+  el instanceof HTMLElement &&
+  el.tabIndex >= 0 &&
+  !el.matches(':disabled') &&
+  !el.closest('[inert]') &&
+  // Not in jsdom; a real browser also skips elements that are not rendered.
+  (typeof el.checkVisibility !== 'function' || el.checkVisibility())
+
+/**
+ * Candidates in the slot only: the status line itself is about to go. An
+ * invalid selector matches nothing rather than throwing, so a typo in
+ * `focusTarget` cannot stop the reset.
+ */
+const inSlot = (selector: string) => {
+  let matches: Element[]
+  try {
+    matches = [...(root.value?.querySelectorAll(selector) ?? [])]
+  } catch {
+    // `process.env.NODE_ENV` stays in the library build, so the consumer's
+    // bundler decides whether this runs (as in NexxtTabs).
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `[NexxtEditorOverrideStatus] \`focusTarget\` is not a valid selector: "${selector}". The focus goes to the first focusable element instead.`,
+      )
+    }
+    return []
+  }
+  return matches.filter((el): el is HTMLElement => !row.value?.contains(el) && canFocus(el))
+}
+
+/** The last resort: the component itself, focusable for this one move only. */
+const focusRoot = () => {
+  const el = root.value
+  if (!el) return
+  const release = () => el.removeAttribute('tabindex')
+  el.setAttribute('tabindex', '-1')
+  el.addEventListener('blur', release, { once: true })
+  el.focus()
+  // Without the focus there is no blur to wait for: take the tabindex off now.
+  if (document.activeElement !== el) {
+    el.removeEventListener('blur', release)
+    release()
+  }
+}
+
+const focusControl = () => {
+  const target = (focusTarget ? inSlot(focusTarget)[0] : undefined) ?? inSlot(FOCUSABLE)[0]
+  target?.focus()
+  if (!target || document.activeElement !== target) focusRoot()
+}
+
+const focusIsLost = () => {
+  const active = document.activeElement
+  return !active || active === document.body || !root.value?.contains(active)
+}
+
+/**
+ * The reset button goes with the override, which would drop the focus on
+ * `body`. The focus moves to the control first, while the button still
+ * exists; after the update it is checked again, in case the reset replaced the
+ * control it landed on. The reset is emitted whatever the focus move does.
+ */
+const onReset = async () => {
+  try {
+    focusControl()
+  } finally {
+    emit('reset')
+  }
+  await nextTick()
+  if (focusIsLost()) focusControl()
+}
+
+/**
+ * Only the switch between overridden and not is announced, with the status
+ * that belongs to the new state. A new `overriddenLabel` within the override,
+ * such as "Grootte 110%" on every arrow key, stays silent: the control already
+ * announces its own value. And only while the focus is inside: then the switch
+ * follows from what the user just did (a reset, a change in the control).
+ * Switching to another element in the editor changes every status at once,
+ * and that stays silent. Cleared afterwards, so the copy is not read twice
+ * when browsing.
+ */
+const announcement = ref('')
+let clearTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+  () => overridden,
+  () => {
+    if (!root.value?.contains(document.activeElement)) return
+    announcement.value = status.value
+    clearTimeout(clearTimer)
+    clearTimer = setTimeout(() => (announcement.value = ''), ANNOUNCEMENT_MS)
+  },
+)
+
+onBeforeUnmount(() => clearTimeout(clearTimer))
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rounded-sm outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+  >
+    <!--
+      `rounded-sm` and the outline only show when the root itself holds the
+      focus: the fallback after a reset when the slot has nothing focusable.
+    -->
+    <slot />
+
+    <div
+      v-if="showRow"
+      ref="row"
+      :class="['flex items-center justify-between gap-3', $slots.default && 'pt-2']"
+    >
+      <span
+        v-if="overridden"
+        class="flex items-center gap-1.5 extra-small-normal text-cornflower-blue-700"
+      >
+        <span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-cornflower-blue-500" />
+        {{ status }}
+      </span>
+      <span v-else class="extra-small-normal text-gray-700">{{ status }}</span>
+
+      <!-- No `focus:outline-none`: in Tailwind v4 it hides the focus-visible ring. -->
+      <button
+        v-if="overridden"
+        type="button"
+        class="shrink-0 cursor-pointer rounded-sm extra-small-link text-gray-800 hover:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-600"
+        @click="onReset"
+      >
+        {{ resetLabel }}
+      </button>
+    </div>
+
+    <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+      {{ announcement }}
+    </div>
+  </div>
+</template>

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",
@@ -91,6 +92,7 @@
   "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
   "NexxtEditorLineStyle": "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
+  "NexxtEditorOverrideStatus": "components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
   "NexxtEditorShadow": "components/editor/molecules/EditorShadow/EditorShadow.vue",