@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,712 @@
+import { describe, it, expect } from 'vitest'
+import { flushPromises, mount, type DOMWrapper, type VueWrapper } from '@vue/test-utils'
+import EditorPadding, { EDITOR_PADDING_STEPS } from './EditorPadding.vue'
+import PaddingIcon from './_PaddingIcon.vue'
+import type { PaddingIconSide } from './_PaddingIcon.vue'
+
+const render = (modelValue: string, props: Record<string, unknown> = {}) =>
+  mount(EditorPadding, { props: { modelValue, ...props } })
+
+/**
+ * Every field, including the two in the collapsed second row: that row stays
+ * mounted so its height can be animated.
+ */
+const inputs = (wrapper: VueWrapper) => wrapper.findAll('input')
+
+/** The fields a user can actually reach -- the collapsed row is `inert`. */
+const activeInputs = (wrapper: VueWrapper) =>
+  inputs(wrapper).filter((input) => input.element.closest('[inert]') === null)
+
+const secondaryRow = (wrapper: VueWrapper) =>
+  wrapper.get('[data-testid="editor-padding-secondary-row"]')
+
+/** Value in px, as the user sees it; a 0 shows as an empty field with a `0` placeholder. */
+const values = (wrapper: VueWrapper) =>
+  activeInputs(wrapper).map((input) => (input.element as HTMLInputElement).value)
+
+const toggle = (wrapper: VueWrapper) => wrapper.get('button')
+
+/** The last class string the component wrote back. */
+const lastEmit = (wrapper: VueWrapper) => wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+
+/** Type without confirming: the field keeps the text to itself until it commits. */
+const type = async (input: DOMWrapper<Element>, typed: string) => {
+  await input.setValue(typed)
+  await flushPromises()
+}
+
+/** Type and confirm, the way leaving the field does. */
+const commit = async (input: DOMWrapper<Element>, typed: string) => {
+  await type(input, typed)
+  await input.trigger('blur')
+  await flushPromises()
+}
+
+const press = async (input: DOMWrapper<Element>, key: string) => {
+  await input.trigger('keydown', { key })
+  await flushPromises()
+}
+
+/** Keydowns that make it out of the block, so a surrounding popover would see them. */
+const bubbled = (wrapper: VueWrapper) => {
+  const seen: KeyboardEvent[] = []
+  wrapper.element.addEventListener('keydown', (event: KeyboardEvent) => seen.push(event))
+
+  return seen
+}
+
+describe('EditorPadding', () => {
+  // No assertions on typography utilities: fields are found by role/structure
+  // and by their accessible name, so restyling cannot turn these red.
+  describe('parsing', () => {
+    it('shows one field per axis for a value that both axes share', () => {
+      const wrapper = render('p-4')
+
+      expect(values(wrapper)).toEqual(['16', '16'])
+      expect(toggle(wrapper).attributes('aria-pressed')).toBe('false')
+    })
+
+    it('splits px/py over the two collapsed fields', () => {
+      const wrapper = render('px-4 py-2')
+
+      expect(values(wrapper)).toEqual(['16', '8'])
+    })
+
+    it('opens the four fields when the two axes are not symmetrical', () => {
+      const wrapper = render('pt-4 pr-2 pb-6 pl-2')
+
+      expect(values(wrapper)).toEqual(['16', '8', '24', '8'])
+      expect(toggle(wrapper).attributes('aria-pressed')).toBe('true')
+    })
+
+    it('shows the top of the scale in px', () => {
+      expect(values(render('p-96'))).toEqual(['384', '384'])
+    })
+
+    it('falls back to zero on all sides for a string it cannot read', () => {
+      const wrapper = render('rounded-lg p-13 nonsense')
+
+      expect(values(wrapper)).toEqual(['', ''])
+    })
+
+    it('lets a later token win over an earlier one', () => {
+      const wrapper = render('p-4 pt-2')
+
+      expect(values(wrapper)).toEqual(['8', '16', '16', '16'])
+    })
+
+    it('re-reads a value that changes from outside', async () => {
+      const wrapper = render('p-4')
+
+      await wrapper.setProps({ modelValue: 'p-8' })
+
+      expect(values(wrapper)).toEqual(['32', '32'])
+    })
+  })
+
+  describe('toggle', () => {
+    it('opens the four fields without touching the value', async () => {
+      const wrapper = render('p-4')
+
+      await toggle(wrapper).trigger('click')
+
+      expect(values(wrapper)).toEqual(['16', '16', '16', '16'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('keeps the second row mounted but collapsed and inert while closed', () => {
+      const wrapper = render('p-4')
+
+      expect(inputs(wrapper)).toHaveLength(4)
+      expect(secondaryRow(wrapper).classes()).toContain('grid-rows-[0fr]')
+      expect(secondaryRow(wrapper).attributes('inert')).toBeDefined()
+    })
+
+    it('expands the second row and hands it back to the tab order', async () => {
+      const wrapper = render('p-4')
+
+      await toggle(wrapper).trigger('click')
+
+      expect(secondaryRow(wrapper).classes()).toContain('grid-rows-[1fr]')
+      expect(secondaryRow(wrapper).attributes('inert')).toBeUndefined()
+    })
+
+    it('collapses back to two fields without touching a symmetrical value', async () => {
+      const wrapper = render('p-4')
+
+      await toggle(wrapper).trigger('click')
+      await toggle(wrapper).trigger('click')
+
+      expect(values(wrapper)).toEqual(['16', '16'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    // The two fields that stay on screen win, and the value follows at once:
+    // what is shown and what is on the element must not disagree.
+    it('rewrites the value from the two visible fields when it closes', async () => {
+      const wrapper = render('pt-4 pr-2 pb-6 pl-2')
+
+      await toggle(wrapper).trigger('click')
+
+      expect(lastEmit(wrapper)).toBe('px-2 py-4')
+      // Horizontal now reads what Rechts said, vertical what Boven said.
+      expect(values(wrapper)).toEqual(['8', '16'])
+    })
+
+    it('leaves the value alone when it opens', async () => {
+      const wrapper = render('px-2 py-4')
+
+      await toggle(wrapper).trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(values(wrapper)).toEqual(['16', '8', '16', '8'])
+    })
+  })
+
+  describe('editing', () => {
+    it('writes both horizontal sides from the collapsed field', async () => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], '24')
+
+      expect(lastEmit(wrapper)).toBe('px-6 py-4')
+    })
+
+    it('writes both vertical sides from the collapsed field', async () => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[1], '24')
+
+      expect(lastEmit(wrapper)).toBe('px-4 py-6')
+    })
+
+    it('writes a single side from the expanded fields', async () => {
+      const wrapper = render('p-4')
+
+      await toggle(wrapper).trigger('click')
+      await commit(activeInputs(wrapper)[1], '8')
+
+      expect(lastEmit(wrapper)).toBe('pt-4 pr-2 pb-4 pl-4')
+    })
+
+    it('collapses back to the short class once all four sides match again', async () => {
+      const wrapper = render('pt-4 pr-2 pb-4 pl-4')
+
+      await commit(activeInputs(wrapper)[1], '16')
+
+      expect(lastEmit(wrapper)).toBe('p-4')
+    })
+
+    it('keeps the typed text and the value to itself until the field is left', async () => {
+      const wrapper = render('p-4')
+
+      await type(activeInputs(wrapper)[0], '30')
+
+      expect(values(wrapper)).toEqual(['30', '16'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('snaps on commit and shows the value it landed on', async () => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], '30')
+
+      expect(lastEmit(wrapper)).toBe('px-7 py-4')
+      expect(values(wrapper)).toEqual(['28', '16'])
+    })
+
+    it.each([
+      // A tie goes down: 14 px sits between 12 and 16.
+      ['14', 'p-3', '12'],
+      ['26', 'p-6', '24'],
+      // Above the ceiling, and onto a step the scale skips.
+      ['500', 'p-96', '384'],
+      ['100', 'p-24', '96'],
+      // Clearing the field is how a zero is entered.
+      ['', 'p-0', ''],
+    ])('commits %s as %s', async (typed, expected, shown) => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], typed)
+      await commit(activeInputs(wrapper)[1], typed)
+
+      expect(lastEmit(wrapper)).toBe(expected)
+      expect(values(wrapper)).toEqual([shown, shown])
+    })
+
+    it.each([
+      ['-3'],
+      // Not Number.parseInt: that reads "1e2" as 1 and "12abc" as 12.
+      ['1e2'],
+      ['12abc'],
+    ])('drops %s and shows the value from before', async (typed) => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], typed)
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(values(wrapper)).toEqual(['16', '16'])
+    })
+
+    it('commits on Enter and leaves the value selected for the next one', async () => {
+      const wrapper = render('p-4')
+      const input = activeInputs(wrapper)[0]
+
+      await type(input, '24')
+      await press(input, 'Enter')
+
+      expect(lastEmit(wrapper)).toBe('px-6 py-4')
+
+      const element = input.element as HTMLInputElement
+      expect([element.selectionStart, element.selectionEnd]).toEqual([0, element.value.length])
+    })
+
+    it('restores the value on Escape without writing anything', async () => {
+      const wrapper = render('p-4')
+      const seen = bubbled(wrapper)
+
+      await type(activeInputs(wrapper)[0], '30')
+      await press(activeInputs(wrapper)[0], 'Escape')
+
+      expect(values(wrapper)).toEqual(['16', '16'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      // Swallowed, so the popover the field sits in does not close on the undo.
+      expect(seen).toHaveLength(0)
+    })
+
+    it('leaves Escape to the surrounding UI when there is nothing to undo', async () => {
+      const wrapper = render('p-4')
+      const seen = bubbled(wrapper)
+
+      await press(activeInputs(wrapper)[0], 'Escape')
+
+      expect(seen).toHaveLength(1)
+    })
+
+    it('lets a change from outside overwrite text that is still being typed', async () => {
+      const wrapper = render('p-4')
+
+      await type(activeInputs(wrapper)[0], '30')
+      await wrapper.setProps({ modelValue: 'p-8' })
+
+      // Deliberate: the model is the source of truth, and an editor that moves
+      // the value under the caret has already taken the field off the user.
+      expect(values(wrapper)).toEqual(['32', '32'])
+    })
+
+    it('animates the number that landed on another step than the one typed', async () => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], '30')
+
+      expect(activeInputs(wrapper)[0].attributes('data-snap')).toBe('down')
+    })
+
+    it('does not animate a value that only looks different', async () => {
+      const wrapper = render('p-4')
+
+      await commit(activeInputs(wrapper)[0], '016')
+
+      expect(activeInputs(wrapper)[0].attributes('data-snap')).toBeUndefined()
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('writes nothing when a commit lands back on the same step', async () => {
+      const wrapper = render('p-7')
+
+      await commit(activeInputs(wrapper)[0], '30')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(values(wrapper)).toEqual(['28', '28'])
+    })
+  })
+
+  describe('arrow keys', () => {
+    it('steps up the list straight away', async () => {
+      const wrapper = render('p-6')
+
+      await press(activeInputs(wrapper)[0], 'ArrowUp')
+
+      expect(lastEmit(wrapper)).toBe('px-7 py-6')
+      expect(values(wrapper)).toEqual(['28', '24'])
+    })
+
+    it('steps down the list straight away', async () => {
+      const wrapper = render('p-6')
+
+      await press(activeInputs(wrapper)[0], 'ArrowDown')
+
+      expect(lastEmit(wrapper)).toBe('px-5 py-6')
+    })
+
+    it('follows the gaps in the scale instead of counting in ones', async () => {
+      const wrapper = render('p-16')
+
+      await press(activeInputs(wrapper)[0], 'ArrowUp')
+
+      expect(lastEmit(wrapper)).toBe('px-20 py-16')
+      expect(values(wrapper)).toEqual(['80', '64'])
+    })
+
+    it('stops at the top of the list instead of wrapping', async () => {
+      const wrapper = render('p-96')
+
+      await press(activeInputs(wrapper)[0], 'ArrowUp')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(values(wrapper)).toEqual(['384', '384'])
+    })
+
+    it('stops at the bottom of the list instead of wrapping', async () => {
+      const wrapper = render('p-0')
+
+      await press(activeInputs(wrapper)[0], 'ArrowDown')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(values(wrapper)).toEqual(['', ''])
+    })
+
+    it('replaces uncommitted text with the value it stepped to', async () => {
+      const wrapper = render('p-6')
+
+      await type(activeInputs(wrapper)[0], '30')
+      await press(activeInputs(wrapper)[0], 'ArrowUp')
+
+      expect(values(wrapper)).toEqual(['28', '24'])
+    })
+  })
+
+  describe('accessible names', () => {
+    const names = (wrapper: VueWrapper) =>
+      activeInputs(wrapper).map((input) => input.attributes('aria-label'))
+
+    // The unit is only in the input as an `aria-hidden` suffix, so it has to be
+    // in the accessible name for the field to say what it measures.
+    it('names the collapsed fields in Dutch, with the unit', () => {
+      expect(names(render('p-4'))).toEqual(['Horizontaal (px)', 'Verticaal (px)'])
+    })
+
+    it('names the expanded fields in Dutch, with the unit', () => {
+      expect(names(render('pt-4 pr-2 pb-6 pl-2'))).toEqual([
+        'Boven (px)',
+        'Rechts (px)',
+        'Onder (px)',
+        'Links (px)',
+      ])
+    })
+
+    it('takes an overridden unit into the names and the suffix', () => {
+      const wrapper = render('p-4', { messages: { unit: 'pixels' } })
+
+      expect(names(wrapper)).toEqual(['Horizontaal (pixels)', 'Verticaal (pixels)'])
+      expect(wrapper.get('input ~ span').text()).toBe('pixels')
+    })
+
+    it('names the toggle in Dutch', () => {
+      expect(toggle(render('p-4')).attributes('aria-label')).toBe('Padding per zijde')
+    })
+
+    it('keeps the untouched defaults when one message is overridden', () => {
+      const wrapper = render('p-4', { messages: { horizontal: 'Horizontal' } })
+
+      expect(names(wrapper)).toEqual(['Horizontal (px)', 'Verticaal (px)'])
+      expect(toggle(wrapper).attributes('aria-label')).toBe('Padding per zijde')
+    })
+
+    it('renders the Dutch default block label', () => {
+      expect(render('p-4').find('p').text()).toBe('Padding')
+    })
+
+    it('renders a custom block label', () => {
+      expect(render('p-4', { label: 'Binnenmarge' }).find('p').text()).toBe('Binnenmarge')
+    })
+  })
+})
+
+describe("EditorPadding with sides='vertical'", () => {
+  const vertical = (modelValue: string) => render(modelValue, { sides: 'vertical' })
+
+  const names = (wrapper: VueWrapper) =>
+    activeInputs(wrapper).map((input) => input.attributes('aria-label'))
+
+  it('shows one vertical field and the toggle while collapsed', () => {
+    const wrapper = vertical('py-4')
+
+    expect(names(wrapper)).toEqual(['Verticaal (px)'])
+    expect(values(wrapper)).toEqual(['16'])
+    expect(toggle(wrapper).attributes('aria-label')).toBe('Padding per zijde')
+  })
+
+  it('renders no second row at all', () => {
+    const wrapper = vertical('py-4')
+
+    expect(wrapper.find('[data-testid="editor-padding-secondary-row"]').exists()).toBe(false)
+    expect(inputs(wrapper)).toHaveLength(1)
+  })
+
+  it('lets the single field span both field columns', () => {
+    const wrapper = vertical('py-4')
+
+    expect(inputs(wrapper)[0].element.parentElement!.classList).toContain('col-span-2')
+  })
+
+  it('writes py-N from the collapsed field', async () => {
+    const wrapper = vertical('py-4')
+
+    await commit(inputs(wrapper)[0], '32')
+
+    expect(lastEmit(wrapper)).toBe('py-8')
+  })
+
+  it('shows Boven and Onder in the same row when expanded', async () => {
+    const wrapper = vertical('py-4')
+
+    await toggle(wrapper).trigger('click')
+
+    expect(names(wrapper)).toEqual(['Boven (px)', 'Onder (px)'])
+    expect(values(wrapper)).toEqual(['16', '16'])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('writes pt-N pb-N from the expanded fields, even when they agree', async () => {
+    const wrapper = vertical('py-4')
+    await toggle(wrapper).trigger('click')
+
+    await commit(inputs(wrapper)[1], '24')
+    expect(lastEmit(wrapper)).toBe('pt-4 pb-6')
+
+    await wrapper.setProps({ modelValue: 'pt-4 pb-6' })
+    await commit(inputs(wrapper)[1], '16')
+    expect(lastEmit(wrapper)).toBe('pt-4 pb-4')
+  })
+
+  it('opens expanded when top and bottom differ', () => {
+    const wrapper = vertical('pt-2 pb-6')
+
+    expect(toggle(wrapper).attributes('aria-pressed')).toBe('true')
+    expect(values(wrapper)).toEqual(['8', '24'])
+  })
+
+  it('collapses onto the top value and writes py-N', async () => {
+    const wrapper = vertical('pt-2 pb-6')
+
+    await toggle(wrapper).trigger('click')
+
+    expect(lastEmit(wrapper)).toBe('py-2')
+    expect(values(wrapper)).toEqual(['8'])
+  })
+
+  it('ignores horizontal padding and drops it on the first write', async () => {
+    const wrapper = vertical('px-6 py-4')
+
+    // Not opened by the asymmetry of left/right: those sides are not edited here.
+    expect(toggle(wrapper).attributes('aria-pressed')).toBe('false')
+    expect(values(wrapper)).toEqual(['16'])
+
+    await press(inputs(wrapper)[0], 'ArrowUp')
+
+    expect(lastEmit(wrapper)).toBe('py-5')
+  })
+
+  it('reads p-N as its vertical part', async () => {
+    const wrapper = vertical('p-3')
+
+    expect(values(wrapper)).toEqual(['12'])
+
+    await commit(inputs(wrapper)[0], '12')
+    // Nothing changed on the sides it edits, so nothing is written.
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it("leaves the default 'all' layout alone", () => {
+    const wrapper = render('px-6 py-4', { sides: 'all' })
+
+    expect(values(wrapper)).toEqual(['24', '16'])
+    expect(inputs(wrapper)).toHaveLength(4)
+  })
+})
+
+describe("EditorPadding with sides='horizontal'", () => {
+  const horizontal = (modelValue: string, props: Record<string, unknown> = {}) =>
+    render(modelValue, { sides: 'horizontal', ...props })
+
+  const names = (wrapper: VueWrapper) =>
+    activeInputs(wrapper).map((input) => input.attributes('aria-label'))
+
+  it('shows one horizontal field and the toggle while collapsed', () => {
+    const wrapper = horizontal('px-4')
+
+    expect(names(wrapper)).toEqual(['Horizontaal (px)'])
+    expect(values(wrapper)).toEqual(['16'])
+    expect(toggle(wrapper).attributes('aria-label')).toBe('Padding per zijde')
+  })
+
+  it('names the collapsed field with messages.horizontal', () => {
+    const wrapper = horizontal('px-4', {
+      messages: { horizontal: 'Links en rechts', toggle: 'Links en rechts apart' },
+    })
+
+    expect(names(wrapper)).toEqual(['Links en rechts (px)'])
+    expect(toggle(wrapper).attributes('aria-label')).toBe('Links en rechts apart')
+  })
+
+  it('renders no second row, and lets the single field span both columns', () => {
+    const wrapper = horizontal('px-4')
+
+    expect(wrapper.find('[data-testid="editor-padding-secondary-row"]').exists()).toBe(false)
+    expect(inputs(wrapper)).toHaveLength(1)
+    expect(inputs(wrapper)[0].element.parentElement!.classList).toContain('col-span-2')
+  })
+
+  it('marks the left and right sides on the field icon', () => {
+    const wrapper = horizontal('px-4')
+
+    expect(wrapper.findAllComponents(PaddingIcon)[0].props('sides')).toEqual(['left', 'right'])
+  })
+
+  it('writes px-N from the collapsed field', async () => {
+    const wrapper = horizontal('px-4')
+
+    await commit(inputs(wrapper)[0], '32')
+
+    expect(lastEmit(wrapper)).toBe('px-8')
+  })
+
+  it('shows Links and Rechts in the same row when expanded', async () => {
+    const wrapper = horizontal('px-4')
+
+    await toggle(wrapper).trigger('click')
+
+    expect(names(wrapper)).toEqual(['Links (px)', 'Rechts (px)'])
+    expect(values(wrapper)).toEqual(['16', '16'])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('writes pl-N pr-N from the expanded fields, even when they agree', async () => {
+    const wrapper = horizontal('px-4')
+    await toggle(wrapper).trigger('click')
+
+    await commit(inputs(wrapper)[1], '24')
+    expect(lastEmit(wrapper)).toBe('pl-4 pr-6')
+
+    await wrapper.setProps({ modelValue: 'pl-4 pr-6' })
+    await commit(inputs(wrapper)[1], '16')
+    expect(lastEmit(wrapper)).toBe('pl-4 pr-4')
+  })
+
+  it('opens expanded when left and right differ', () => {
+    const wrapper = horizontal('pl-2 pr-6')
+
+    expect(toggle(wrapper).attributes('aria-pressed')).toBe('true')
+    expect(values(wrapper)).toEqual(['8', '24'])
+  })
+
+  it('collapses onto the left value and writes px-N', async () => {
+    const wrapper = horizontal('pl-2 pr-6')
+
+    await toggle(wrapper).trigger('click')
+
+    expect(lastEmit(wrapper)).toBe('px-2')
+    expect(values(wrapper)).toEqual(['8'])
+  })
+
+  it('ignores vertical padding and drops it on the first write', async () => {
+    const wrapper = horizontal('pt-2 pb-8 px-4')
+
+    // Not opened by the asymmetry of top/bottom: those sides are not edited here.
+    expect(toggle(wrapper).attributes('aria-pressed')).toBe('false')
+    expect(values(wrapper)).toEqual(['16'])
+
+    await press(inputs(wrapper)[0], 'ArrowUp')
+
+    expect(lastEmit(wrapper)).toBe('px-5')
+  })
+
+  it('reads py-N and p-N without writing anything back', async () => {
+    expect(values(horizontal('py-6'))).toEqual([''])
+
+    const wrapper = horizontal('p-3')
+    expect(values(wrapper)).toEqual(['12'])
+
+    await commit(inputs(wrapper)[0], '12')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+})
+
+describe('PaddingIcon', () => {
+  const lines = (sides: PaddingIconSide[]) =>
+    mount(PaddingIcon, { props: { sides } }).findAll('line')
+
+  /** Opacity per line, in the fixed draw order top, right, bottom, left. */
+  const opacities = (sides: PaddingIconSide[]) =>
+    lines(sides).map((line) => (line.classes().includes('opacity-100') ? 1 : 0))
+
+  it('always draws four lines and only fades the inactive ones out', () => {
+    // All four stay in the DOM, so swapping a field's icon animates instead of
+    // replacing one drawing with another.
+    expect(lines(['left', 'right'])).toHaveLength(4)
+    expect(opacities(['left', 'right'])).toEqual([0, 1, 0, 1])
+    expect(opacities(['top'])).toEqual([1, 0, 0, 0])
+    expect(opacities(['top', 'right', 'bottom', 'left'])).toEqual([1, 1, 1, 1])
+  })
+
+  it('transitions the opacity, with a reduced-motion fallback', () => {
+    const [line] = lines(['top'])
+
+    expect(line.classes()).toContain('transition-opacity')
+    expect(line.classes()).toContain('motion-reduce:transition-none')
+  })
+
+  it('draws shorter lines when all four sides are lit, so they do not touch', () => {
+    const [two] = lines(['left', 'right'])
+    const [four] = lines(['top', 'right', 'bottom', 'left'])
+
+    expect(two.attributes('y1')).toBe('4')
+    expect(four.attributes('x1')).toBe('6')
+  })
+
+  it('is hidden from the accessibility tree', () => {
+    const wrapper = mount(PaddingIcon, { props: { sides: ['top'] } })
+
+    expect(wrapper.get('svg').attributes('aria-hidden')).toBe('true')
+  })
+})
+
+// The consumer derives its class matchers from this list, so the list is a
+// contract: any change here changes what the app recognises.
+describe('EDITOR_PADDING_STEPS', () => {
+  it('offers exactly the agreed steps', () => {
+    expect(EDITOR_PADDING_STEPS).toEqual([
+      { token: 0, px: 0 },
+      { token: 1, px: 4 },
+      { token: 2, px: 8 },
+      { token: 3, px: 12 },
+      { token: 4, px: 16 },
+      { token: 5, px: 20 },
+      { token: 6, px: 24 },
+      { token: 7, px: 28 },
+      { token: 8, px: 32 },
+      { token: 9, px: 36 },
+      { token: 10, px: 40 },
+      { token: 11, px: 44 },
+      { token: 12, px: 48 },
+      { token: 14, px: 56 },
+      { token: 16, px: 64 },
+      { token: 20, px: 80 },
+      { token: 24, px: 96 },
+      { token: 28, px: 112 },
+      { token: 32, px: 128 },
+      { token: 36, px: 144 },
+      { token: 40, px: 160 },
+      { token: 44, px: 176 },
+      { token: 48, px: 192 },
+      { token: 52, px: 208 },
+      { token: 56, px: 224 },
+      { token: 60, px: 240 },
+      { token: 64, px: 256 },
+      { token: 72, px: 288 },
+      { token: 80, px: 320 },
+      { token: 96, px: 384 },
+    ])
+  })
+})