@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/editor/molecules/EditorFontSize/EditorFontSize.stories.ts

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
+import { computed, ref } from 'vue'
+import EditorFontSize, { EDITOR_FONT_SIZE_STEPS } from './EditorFontSize.vue'
+import type { EditorFontSizeValue } from './EditorFontSize.vue'
+
+const NBSP = ' '
+
+const TOKENS = EDITOR_FONT_SIZE_STEPS.map(({ token }) => token)
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Font Size',
+  component: EditorFontSize,
+  // 312px: the content width of the editor's settings panel
+  decorators: [() => ({ template: '<div class="mx-auto w-78"><story /></div>' })],
+  args: {
+    onPointerup: fn(),
+    onReset: fn(),
+  },
+  argTypes: {
+    label: { control: 'text' },
+    // moves the slider while the model is null, and is the sample's size then
+    defaultToken: { control: 'select', options: TOKENS },
+  },
+} satisfies Meta<typeof EditorFontSize>
+
+type Story = StoryObj<typeof EditorFontSize>
+
+/**
+ * The control with a sample paragraph under it. The sample carries the class the app would put
+ * on the element: the model, or the default size while the model is `null`. It is the real
+ * class, so the sample only changes size when that class compiles.
+ */
+const renderSize = (initial: EditorFontSizeValue | null) => (args: Story['args']) => ({
+  components: { EditorFontSize },
+  setup() {
+    const size = ref<EditorFontSizeValue | null>(initial)
+    const sampleClass = computed(() => size.value ?? args?.defaultToken ?? 'text-sm')
+    return { args, size, sampleClass }
+  },
+  template: `
+    <div>
+      <EditorFontSize v-bind="args" v-model="size" />
+      <p class="extra-small-normal text-gray-700">
+        model: <code data-testid="model">{{ size ?? 'null' }}</code>
+      </p>
+      <!-- \`wrap-break-word\`: at 9xl a single word is wider than the 312px column -->
+      <p data-testid="sample" class="mt-4 text-gray-900 wrap-break-word" :class="sampleClass">
+        Een licht appartement op loopafstand van het centrum, met een ruim balkon op het zuiden.
+      </p>
+    </div>
+  `,
+})
+
+const thumbOf = (canvasElement: HTMLElement) => within(canvasElement).getByRole('slider')
+
+/** The font size the sample renders at, in px, as Chromium computes it. */
+const sampleSize = (canvasElement: HTMLElement) =>
+  parseFloat(getComputedStyle(within(canvasElement).getByTestId('sample')).fontSize)
+
+/**
+ * No size of its own: the slider sits on the default step, `text-sm`. The ends of the list are
+ * 12 and 128px; every step writes its class, the default one too.
+ */
+export const Default: Story = {
+  render: renderSize(null),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const thumb = thumbOf(canvasElement)
+
+    await expect(thumb).toHaveAccessibleName('Grootte')
+    await expect(thumb).toHaveAttribute('aria-valuetext', `14${NBSP}px`)
+    await expect(sampleSize(canvasElement)).toBe(14)
+    // invisible, so out of the accessibility tree and its name: found by its label attribute
+    const reset = canvasElement.querySelector<HTMLElement>(
+      'button[aria-label="Terug naar standaard"]',
+    )!
+    await expect(reset).not.toBeVisible()
+
+    thumb.focus()
+    await userEvent.keyboard('{End}')
+    await expect(thumb).toHaveAttribute('aria-valuetext', `128${NBSP}px`)
+    await expect(canvas.getByTestId('model')).toHaveTextContent('text-9xl')
+    await expect(sampleSize(canvasElement)).toBe(128)
+
+    // the sample wraps inside the column instead of running out of it
+    const sample = canvas.getByTestId('sample')
+    const column = canvasElement.querySelector('.w-78')!.getBoundingClientRect()
+    await expect(sample.scrollWidth).toBeLessThanOrEqual(sample.clientWidth)
+    await expect(sample.getBoundingClientRect().right).toBeLessThanOrEqual(column.right)
+
+    await userEvent.keyboard('{Home}')
+    await expect(sampleSize(canvasElement)).toBe(12)
+
+    // back onto the default step by keyboard: an explicit class, not null
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(canvas.getByTestId('model')).toHaveTextContent('text-sm')
+    await expect(reset).toBeVisible()
+  },
+}
+
+/** A default other than `text-sm`: the slider and the sample follow it while the model is null. */
+export const OtherDefault: Story = {
+  args: { defaultToken: 'text-base' },
+  render: renderSize(null),
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', `16${NBSP}px`)
+    await expect(sampleSize(canvasElement)).toBe(16)
+  },
+}
+
+/**
+ * The reset button is invisible while the model is null, and so out of the tab order, while it
+ * keeps its place. Using it sets the model to `null`, emits `reset`, leaves focus on the thumb, and
+ * the sample falls back to the default size.
+ */
+export const Reset: Story = {
+  render: renderSize('text-xl'),
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    const reset = canvas.getByRole('button', { name: 'Terug naar standaard' })
+    const thumb = thumbOf(canvasElement)
+
+    await expect(sampleSize(canvasElement)).toBe(20)
+    await expect(reset).toBeVisible()
+    const trackWidth = thumb.parentElement!.getBoundingClientRect().width
+
+    await userEvent.click(reset)
+    await expect(args.onReset).toHaveBeenCalledOnce()
+    await expect(canvas.getByTestId('model')).toHaveTextContent('null')
+    await expect(thumb).toHaveFocus()
+    await expect(sampleSize(canvasElement)).toBe(14)
+
+    // `visibility: hidden` keeps its room, so the slider keeps its width, and takes it out of the
+    // tab order
+    await expect(getComputedStyle(reset).visibility).toBe('hidden')
+    await expect(thumb.parentElement!.getBoundingClientRect().width).toBe(trackWidth)
+  },
+}
+
+/**
+ * One drag is one undo step: the app merges the changes while dragging and closes the step on
+ * `pointerup`. A reset always gets a step of its own. The log shows what the app would see.
+ */
+export const UndoEvents: Story = {
+  render: (args) => ({
+    components: { EditorFontSize },
+    setup() {
+      const size = ref<EditorFontSizeValue | null>(null)
+      const log = ref<string[]>([])
+      const onUpdate = (value: EditorFontSizeValue | null) => {
+        size.value = value
+        log.value.push(`change ${value ?? 'null'}`)
+      }
+      const onPointerup = () => log.value.push('pointerup: end of step')
+      const onReset = () => log.value.push('reset: own step')
+      return { args, size, log, onUpdate, onPointerup, onReset }
+    },
+    template: `
+      <div>
+        <EditorFontSize
+          v-bind="args"
+          :model-value="size"
+          @update:model-value="onUpdate"
+          @pointerup="onPointerup"
+          @reset="onReset"
+        />
+        <ol data-testid="log" class="extra-small-normal text-gray-700">
+          <li v-for="(entry, index) in log" :key="index">{{ entry }}</li>
+        </ol>
+      </div>
+    `,
+  }),
+  // The drag itself is a real pointer gesture and is left to the unit test (pointerup) and to
+  // trying it here by hand; the play covers the keyboard step and the reset
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const entries = () =>
+      Array.from(canvas.getByTestId('log').querySelectorAll('li')).map((li) => li.textContent)
+
+    thumbOf(canvasElement).focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(entries()).toEqual(['change text-base'])
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Terug naar standaard' }))
+    await expect(entries()).toEqual(['change text-base', 'change null', 'reset: own step'])
+  },
+}
+
+/**
+ * The readout is as wide at "14 px" as at "128 px", so the slider beside it keeps its width over
+ * the whole list.
+ */
+export const ReadoutWidth: Story = {
+  render: renderSize(null),
+  play: async ({ canvasElement }) => {
+    const thumb = thumbOf(canvasElement)
+    const readout = within(canvasElement).getByText(`14 px`)
+    // the slider root, which the thumb is placed in
+    const slider = thumb.parentElement!
+    const textWidth = () => {
+      const range = document.createRange()
+      range.selectNodeContents(readout)
+      return range.getBoundingClientRect().width
+    }
+    const measure = () => ({
+      readout: readout.getBoundingClientRect().width,
+      text: textWidth(),
+      slider: slider.getBoundingClientRect().width,
+    })
+
+    const narrow = measure()
+    thumb.focus()
+    await userEvent.keyboard('{End}')
+    await expect(readout).toHaveTextContent('128 px')
+    const wide = measure()
+
+    // the widest label still fits inside the minimum width, so nothing moved
+    // `min-w-14`: 56px, with at least 8px to spare around the widest label
+    await expect(wide.readout).toBe(56)
+    await expect(wide.readout - wide.text).toBeGreaterThanOrEqual(8)
+    await expect(wide.readout).toBe(narrow.readout)
+    await expect(wide.slider).toBe(narrow.slider)
+  },
+}
+
+/** Every step, one control each, so the whole readout range is in view. */
+export const AllSteps: Story = {
+  render: () => ({
+    components: { EditorFontSize },
+    setup() {
+      return { tokens: TOKENS }
+    },
+    template: `
+      <div>
+        <EditorFontSize v-for="token in tokens" :key="token" :label="token" :model-value="token" />
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Size',
+    messages: { unit: 'pt', reset: 'Back to default' },
+  },
+  render: renderSize('text-lg'),
+}

package/src/components/editor/molecules/EditorFontSize/EditorFontSize.test.ts

@@ -0,0 +1,288 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorFontSize, { EDITOR_FONT_SIZE_STEPS } from './EditorFontSize.vue'
+import type { EditorFontSizeValue } from './EditorFontSize.vue'
+import Slider from '../../../atoms/Slider/Slider.vue'
+
+// jsdom ships no ResizeObserver, and reka-ui's slider observes its track to place the thumbs
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+// jsdom implements no pointer capture either, and reka-ui captures the pointer on thumb pointerdown
+Element.prototype.setPointerCapture ??= () => {}
+Element.prototype.releasePointerCapture ??= () => {}
+Element.prototype.hasPointerCapture ??= () => false
+
+const NBSP = ' '
+
+const mounted: VueWrapper[] = []
+
+const mountSize = (props: Record<string, unknown> = {}) => {
+  const wrapper = mount(EditorFontSize, {
+    props: { modelValue: null, ...props },
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+/** The index the slider sits on, read from the model handed to the slider. */
+const sliderIndex = (wrapper: VueWrapper) => wrapper.findComponent(Slider).props('modelValue')
+
+const thumbOf = (wrapper: VueWrapper) => wrapper.find('[role="slider"]')
+const resetOf = (wrapper: VueWrapper) => wrapper.find('button[type="button"]')
+
+const indexOf = (token: EditorFontSizeValue) =>
+  EDITOR_FONT_SIZE_STEPS.findIndex((step) => step.token === token)
+
+describe('EditorFontSize', () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+  })
+
+  // No assertions on typography utilities: the label and the value are found by
+  // text or by structure, so restyling the block or the slider cannot turn
+  // these red.
+  it('renders the Dutch default label', () => {
+    expect(mountSize().find('p').text()).toBe('Grootte')
+  })
+
+  it('renders a custom label, also on the thumb', () => {
+    const wrapper = mountSize({ label: 'Lettergrootte' })
+
+    expect(wrapper.find('p').text()).toBe('Lettergrootte')
+    expect(thumbOf(wrapper).attributes('aria-label')).toBe('Lettergrootte')
+  })
+
+  // The consumer stores these classes and lists them in an `@source inline`
+  // rule, so the list is a contract: any change here is a breaking change.
+  it('offers exactly the agreed steps', () => {
+    expect(EDITOR_FONT_SIZE_STEPS).toEqual([
+      { token: 'text-xs', px: 12 },
+      { token: 'text-sm', px: 14 },
+      { token: 'text-base', px: 16 },
+      { token: 'text-lg', px: 18 },
+      { token: 'text-xl', px: 20 },
+      { token: 'text-2xl', px: 24 },
+      { token: 'text-3xl', px: 30 },
+      { token: 'text-4xl', px: 36 },
+      { token: 'text-5xl', px: 48 },
+      { token: 'text-6xl', px: 60 },
+      { token: 'text-7xl', px: 72 },
+      { token: 'text-8xl', px: 96 },
+      { token: 'text-9xl', px: 128 },
+    ])
+  })
+
+  it('spans the whole step list', () => {
+    const slider = mountSize().findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(12)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  describe('default step', () => {
+    it('puts null on text-sm without a defaultToken', () => {
+      const wrapper = mountSize()
+
+      expect(sliderIndex(wrapper)).toEqual([indexOf('text-sm')])
+      expect(wrapper.text()).toContain(`14${NBSP}px`)
+    })
+
+    it('treats an unset model as null', () => {
+      const wrapper = mount(EditorFontSize)
+      mounted.push(wrapper)
+
+      expect(sliderIndex(wrapper)).toEqual([indexOf('text-sm')])
+    })
+
+    it('puts null on the step of defaultToken', () => {
+      const wrapper = mountSize({ defaultToken: 'text-lg' })
+
+      expect(sliderIndex(wrapper)).toEqual([indexOf('text-lg')])
+      expect(wrapper.text()).toContain(`18${NBSP}px`)
+    })
+
+    it('falls back to text-sm for a defaultToken that is not on the list', () => {
+      const wrapper = mountSize({ defaultToken: 'text-10xl' as unknown as EditorFontSizeValue })
+
+      expect(sliderIndex(wrapper)).toEqual([indexOf('text-sm')])
+    })
+
+    it.each([
+      ['an unknown value', 'text-10xl'],
+      ['a size from another scale', 'text-[15px]'],
+    ])('sits on the default step for %s', (_, value) => {
+      // The type rules these out, which is exactly why the runtime fallback is
+      // worth a test: a stored value gets past the types.
+      const wrapper = mountSize({
+        defaultToken: 'text-base',
+        modelValue: value as unknown as EditorFontSizeValue,
+      })
+
+      expect(sliderIndex(wrapper)).toEqual([indexOf('text-base')])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  // The fallback is for faulty or old data; a development build says so, once per value
+  describe('development warnings', () => {
+    const spyWarn = () => vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+
+    it('warns once for an unknown defaultToken and reads out text-sm', async () => {
+      const warn = spyWarn()
+      const wrapper = mountSize({ defaultToken: 'text-10xl' as unknown as EditorFontSizeValue })
+
+      expect(wrapper.text()).toContain(`14${NBSP}px`)
+      await wrapper.setProps({ label: 'Opnieuw renderen' })
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain('text-10xl')
+    })
+
+    it('warns once for a model value off the list, reads out the default and keeps reset', async () => {
+      const warn = spyWarn()
+      const wrapper = mountSize({ modelValue: 'text-[15px]' as unknown as EditorFontSizeValue })
+
+      expect(wrapper.text()).toContain(`14${NBSP}px`)
+      expect(resetOf(wrapper).classes()).not.toContain('invisible')
+
+      await wrapper.setProps({ label: 'Opnieuw renderen' })
+      await wrapper.setProps({ modelValue: 'text-[15px]' as unknown as EditorFontSizeValue })
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain('text-[15px]')
+    })
+
+    it('warns again for another value off the list', async () => {
+      const warn = spyWarn()
+      const wrapper = mountSize({ modelValue: 'text-[15px]' as unknown as EditorFontSizeValue })
+
+      await wrapper.setProps({ modelValue: 'text-[16px]' as unknown as EditorFontSizeValue })
+
+      expect(warn).toHaveBeenCalledTimes(2)
+      expect(warn.mock.calls[1][0]).toContain('text-[16px]')
+    })
+
+    it.each([[{ modelValue: null }], [{ modelValue: 'text-xl', defaultToken: 'text-base' }]])(
+      'stays silent for valid values: %o',
+      (props) => {
+        const warn = spyWarn()
+
+        mountSize(props)
+
+        expect(warn).not.toHaveBeenCalled()
+      },
+    )
+  })
+
+  it.each(EDITOR_FONT_SIZE_STEPS.map((step) => [step]))(
+    'puts the slider on %o and reads out its px',
+    (step) => {
+      const wrapper = mountSize({ modelValue: step.token })
+
+      expect(sliderIndex(wrapper)).toEqual([EDITOR_FONT_SIZE_STEPS.indexOf(step)])
+      expect(wrapper.text()).toContain(`${step.px}${NBSP}px`)
+      // aria-valuenow is the step index, which is meaningless read aloud
+      expect(thumbOf(wrapper).attributes('aria-valuetext')).toBe(`${step.px}${NBSP}px`)
+    },
+  )
+
+  it('renders custom copy for the unit and the reset button', () => {
+    const wrapper = mountSize({ modelValue: 'text-xl', messages: { unit: 'pt', reset: 'Reset' } })
+
+    expect(wrapper.text()).toContain(`20${NBSP}pt`)
+    expect(resetOf(wrapper).attributes('aria-label')).toBe('Reset')
+  })
+
+  // Only the reset button writes null: moving onto the default step is a choice of its own
+  it('emits the token of every step, the default step included', async () => {
+    const wrapper = mountSize({ modelValue: 'text-xl' })
+    const slider = wrapper.findComponent(Slider)
+
+    slider.vm.$emit('update:modelValue', [indexOf('text-sm')])
+    slider.vm.$emit('update:modelValue', [indexOf('text-xs')])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-sm'], ['text-xs']])
+  })
+
+  it('passes the release of the slider on as pointerup', async () => {
+    const wrapper = mountSize({ modelValue: 'text-lg' })
+
+    await thumbOf(wrapper).trigger('pointerup')
+
+    expect(wrapper.emitted('pointerup')).toHaveLength(1)
+  })
+
+  describe('reset', () => {
+    // `invisible` is `visibility: hidden`, which takes the button out of the tab order
+    // while it keeps its width, so the slider does not move
+    it('is rendered but invisible while the model is null', () => {
+      const reset = resetOf(mountSize({ modelValue: null }))
+
+      expect(reset.exists()).toBe(true)
+      expect(reset.classes()).toContain('invisible')
+      expect(reset.attributes('aria-label')).toBe('Terug naar standaard')
+    })
+
+    it('is visible for any token, the default step included', () => {
+      expect(resetOf(mountSize({ modelValue: 'text-sm' })).classes()).not.toContain('invisible')
+      expect(resetOf(mountSize({ modelValue: 'text-xl' })).classes()).not.toContain('invisible')
+    })
+
+    it.each(['text-sm', 'text-xl'] as const)(
+      'from %s: sets the model to null, then emits reset, then focuses the thumb',
+      async (token) => {
+        const order: string[] = []
+        const wrapper = mountSize({
+          modelValue: token,
+          'onUpdate:modelValue': (value: unknown) => order.push(`model:${value}`),
+          onReset: () => order.push('reset'),
+        })
+        // reka shows the thumb (display: none until then) in the render after mount; a user
+        // cannot click before it, and jsdom 30 refuses focus to an element that is not rendered.
+        await wrapper.vm.$nextTick()
+
+        await resetOf(wrapper).trigger('click')
+
+        expect(order).toEqual(['model:null', 'reset'])
+        expect(document.activeElement).toBe(thumbOf(wrapper).element)
+      },
+    )
+  })
+
+  describe('keyboard', () => {
+    const press = async (wrapper: VueWrapper, key: string) => {
+      await thumbOf(wrapper).trigger('keydown', { key })
+    }
+
+    it('writes text-base on ArrowRight from null', async () => {
+      const wrapper = mountSize({ modelValue: null })
+
+      await press(wrapper, 'ArrowRight')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['text-base']])
+    })
+
+    it.each([
+      ['Home', 'text-xs'],
+      ['End', 'text-9xl'],
+    ])('writes the end of the list on %s', async (key, token) => {
+      const wrapper = mountSize({ modelValue: 'text-lg' })
+
+      await press(wrapper, key)
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[token]])
+    })
+  })
+})

package/src/components/editor/molecules/EditorGap/EditorGap.stories.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorGap from './EditorGap.vue'
+import type { EditorGapValue } from './EditorGap.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Gap',
+  component: EditorGap,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorGap>
+
+type Story = StoryObj<typeof EditorGap>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      return { args, gap }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorGap v-bind="args" v-model="gap" />
+        <p class="small-normal text-gray-700">{{ gap }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Gap',
+    messages: { unit: 'px' },
+  },
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      return { args, gap }
+    },
+    template: `<EditorGap v-bind="args" v-model="gap" />`,
+  }),
+}
+
+/**
+ * axe in error mode on the Auto stories. The toolbar is NexxtToggleGroup, whose
+ * chosen label fails color-contrast on its own (cornflower-600 text, 4.31:1 on
+ * white); that is ToggleGroup's, not this block's, so it is left out here.
+ */
+const AUTO_A11Y = { a11y: { test: 'error', context: { exclude: ['[role="toolbar"]'] } } }
+
+/** The slider and the readout of one EditorGap, by the readout's text. */
+const sliderRow = (block: HTMLElement) => {
+  const readout = within(block).getByText(/\d+ px/)
+  const slider = readout.parentElement!.firstElementChild!
+  const box = (el: Element) => {
+    const { left, width } = el.getBoundingClientRect()
+    return { left, width }
+  }
+  return { slider: box(slider), readout: box(readout) }
+}
+
+/**
+ * With the auto model bound: Vast | Auto above the slider, on Vast. Below it,
+ * for comparison, the same block without the model: the slider and the readout
+ * keep their width and place in all three.
+ */
+export const WithAuto: Story = {
+  parameters: AUTO_A11Y,
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-4')
+      const auto = ref(false)
+      return { args, gap, auto }
+    },
+    template: `
+      <div>
+        <EditorGap v-bind="args" v-model="gap" v-model:auto="auto" data-variant="auto" />
+        <EditorGap v-bind="args" v-model="gap" data-variant="plain" />
+        <p class="small-normal text-gray-700">{{ gap }}, auto: {{ auto }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const block = (variant: string) =>
+      canvasElement.querySelector(`[data-variant="${variant}"]`) as HTMLElement
+    const settle = () =>
+      new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+
+    await document.fonts.ready
+    await settle()
+    const plain = sliderRow(block('plain'))
+    const vast = sliderRow(block('auto'))
+    await expect(vast).toEqual(plain)
+    await expect(
+      within(block('auto')).getByRole('slider', { name: 'Tussenruimte' }),
+    ).toBeInTheDocument()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Auto' }))
+    await settle()
+
+    await expect(sliderRow(block('auto'))).toEqual(plain)
+    await expect(
+      within(block('auto')).getByRole('slider', { name: 'Tussenruimte, minimaal' }),
+    ).toBeInTheDocument()
+    await expect(canvas.getByText('gap-4, auto: true')).toBeInTheDocument()
+  },
+}
+
+/** Auto on: the slider sets the minimum gap. */
+export const AutoOn: Story = {
+  parameters: AUTO_A11Y,
+  render: (args) => ({
+    components: { EditorGap },
+    setup() {
+      const gap = ref<EditorGapValue>('gap-6')
+      const auto = ref(true)
+      return { args, gap, auto }
+    },
+    template: `<EditorGap v-bind="args" v-model="gap" v-model:auto="auto" />`,
+  }),
+}