@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorBorder from './EditorBorder.vue'
+import type { EditorColorThemeRole } from '../EditorColor/colorClass'
+
+/**
+ * The collapsing wrapper, found by the grid row it animates rather than by any
+ * styling class, so restyling the block cannot quietly break the assertions.
+ */
+const contentWrapper = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[class*="grid-rows-"]') as HTMLElement
+
+/**
+ * The roles as a consumer would pass them, with the hex each role has in the
+ * customer's theme right now. Heading and text share a hex, so both swatches
+ * are pressed by that one colour.
+ */
+const THEME_ROLES: EditorColorThemeRole[] = [
+  { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+  { role: 'accent', label: 'Accentkleur', hex: '#F59E0B' },
+  { role: 'background', label: 'Achtergrond', hex: '#F0F4F8' },
+  { role: 'heading', label: 'Koppen', hex: '#1F2937' },
+  { role: 'text', label: 'Tekst', hex: '#1F2937' },
+]
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Border',
+  component: EditorBorder,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    switchable: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorBorder>
+
+type Story = StoryObj<typeof EditorBorder>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorBorder },
+    setup() {
+      const border = ref('border border-[#1777EA]')
+      const enabled = ref(true)
+      return { args, border, enabled }
+    },
+    // The value is shown as-is: it is the Tailwind classes the editor applies.
+    template: `
+      <div>
+        <EditorBorder v-bind="args" v-model="border" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ border }}</p>
+        <p class="small-normal text-gray-700">{{ enabled }}</p>
+      </div>
+    `,
+  }),
+  // Two things jsdom cannot see: the collapse leaves the value alone, and the
+  // panel is sized against its trigger rather than the picker's fixed w-70.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const content = contentWrapper(canvasElement)
+    // The picker trigger is the only button; the switch has the switch role.
+    const trigger = canvas.getByRole('button')
+
+    await userEvent.click(trigger)
+
+    // The floating container is found by the inline position it is given, not by
+    // a styling class: it is the only fixed-positioned ancestor of the panel.
+    await waitFor(() => {
+      const panel = canvasElement
+        .querySelector('[placeholder="#000000"]')!
+        .closest<HTMLElement>('div[style*="position: fixed"]')!
+
+      expect(panel.getBoundingClientRect().width).toBe(trigger.getBoundingClientRect().width)
+    })
+
+    await userEvent.keyboard('{Escape}')
+
+    expect(content).not.toHaveAttribute('inert')
+
+    await userEvent.click(canvas.getByRole('switch'))
+
+    await waitFor(() => {
+      expect(content).toHaveAttribute('inert')
+      expect(canvas.getByText('false')).toBeInTheDocument()
+    })
+
+    // Width and colour survive the collapse: only the switch state changed.
+    expect(canvas.getByText('border border-[#1777EA]')).toBeInTheDocument()
+  },
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { EditorBorder },
+    setup() {
+      const border = ref('border-2 border-[#1777EA]')
+      const enabled = ref(false)
+      return { args, border, enabled }
+    },
+    template: `
+      <div>
+        <EditorBorder v-bind="args" v-model="border" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ border }}</p>
+      </div>
+    `,
+  }),
+}
+
+/** A value without a colour class leaves the picker on its placeholder. */
+export const NoColor: Story = {
+  render: (args) => ({
+    components: { EditorBorder },
+    setup() {
+      const border = ref('border-2')
+      return { args, border }
+    },
+    template: `
+      <div>
+        <EditorBorder v-bind="args" v-model="border" />
+        <p class="small-normal text-gray-700">{{ border }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Border',
+    messages: { unit: 'pixels', placeholder: 'Pick a colour...', width: 'Thickness' },
+  },
+  render: (args) => ({
+    components: { EditorBorder },
+    setup() {
+      const border = ref('border-4')
+      return { args, border }
+    },
+    template: `<EditorBorder v-bind="args" v-model="border" />`,
+  }),
+}
+
+/**
+ * The theme roles are a shortcut to a hex: picking one writes `border-[#hex]`,
+ * exactly as a colour picked by hand does, and a swatch is pressed while the
+ * border has its hex.
+ */
+export const WithThemeRoles: Story = {
+  args: { themeRoles: THEME_ROLES },
+  render: (args) => ({
+    components: { EditorBorder },
+    setup() {
+      const border = ref('border-2 border-[#1777ea]')
+      return { args, border }
+    },
+    template: `
+      <div>
+        <EditorBorder v-bind="args" v-model="border" />
+        <p class="small-normal text-gray-700">{{ border }}</p>
+      </div>
+    `,
+  }),
+  // Reached and picked with the keyboard alone, through the panel's real tab order.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Kies kleur...' }))
+
+    const main = await canvas.findByRole('button', { name: 'Hoofdkleur' })
+    const accent = canvas.getByRole('button', { name: 'Accentkleur' })
+
+    // The stored hex is lowercase, the role's uppercase: still the same colour.
+    expect(main).toHaveAttribute('aria-pressed', 'true')
+    expect(accent).toHaveAttribute('aria-pressed', 'false')
+
+    for (let step = 0; step < 20 && document.activeElement !== accent; step++) {
+      await userEvent.tab()
+    }
+    expect(accent).toHaveFocus()
+
+    await userEvent.keyboard('{Enter}')
+
+    await waitFor(() => {
+      expect(canvas.getByText('border-2 border-[#F59E0B]')).toBeInTheDocument()
+      expect(accent).toHaveAttribute('aria-pressed', 'true')
+      expect(main).toHaveAttribute('aria-pressed', 'false')
+    })
+  },
+}

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

@@ -0,0 +1,456 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import EditorBorder, { EDITOR_BORDER_STEPS } from './EditorBorder.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+import type { EditorColorThemeRole } from '../EditorColor/colorClass'
+
+// jsdom ships neither ResizeObserver -- reka-ui's slider observes its track and
+// its colour primitives use it internally -- nor a layout engine for
+// floating-ui to measure, nor pointer capture, which the slider thumb takes on
+// pointerdown.
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
+Element.prototype.setPointerCapture ??= () => {}
+Element.prototype.releasePointerCapture ??= () => {}
+Element.prototype.hasPointerCapture ??= () => false
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+/** The index the slider sits on, read from the model handed to the slider. */
+const sliderIndex = (wrapper: VueWrapper) => wrapper.findComponent(NexxtSlider).props('modelValue')
+
+/** The value the block hands to the picker, before the picker normalises it. */
+const pickerValue = (wrapper: VueWrapper) =>
+  wrapper.findComponent(NexxtColorPicker).props('modelValue')
+
+/** The collapsing wrapper, found by the grid row it animates, not by styling. */
+const contentWrapper = (wrapper: VueWrapper) => wrapper.find('[class*="grid-rows-"]')
+
+// Heading and text share a hex on purpose: a role is a shortcut to its hex here,
+// so both swatches are pressed by the same colour.
+const THEME_ROLES: EditorColorThemeRole[] = [
+  { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+  { role: 'accent', label: 'Accentkleur', hex: '#F59E0B' },
+  { role: 'heading', label: 'Koppen', hex: '#1F2937' },
+  { role: 'text', label: 'Tekst', hex: '#1F2937' },
+]
+
+/** The panel content only exists while the picker is open. */
+const open = async (wrapper: VueWrapper) => {
+  await wrapper.findComponent(NexxtColorPicker).find('button').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+/** The role buttons are the only pressable buttons in the block. */
+const roleButtons = (wrapper: VueWrapper) => wrapper.findAll('button[aria-pressed]')
+
+/** A role is a bare swatch, so its label is its accessible name. */
+const roleLabels = (wrapper: VueWrapper) =>
+  roleButtons(wrapper).map((button) => button.attributes('aria-label'))
+
+const roleButton = (wrapper: VueWrapper, label: string) =>
+  roleButtons(wrapper).find((button) => button.attributes('aria-label') === label)!
+
+const pressedLabels = (wrapper: VueWrapper) =>
+  roleButtons(wrapper)
+    .filter((button) => button.attributes('aria-pressed') === 'true')
+    .map((button) => button.attributes('aria-label'))
+
+describe('EditorBorder', () => {
+  // No assertions on typography utilities: the label and the readout are found
+  // by text or by structure, so restyling the block, the slider or the picker
+  // cannot turn these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border border-[#1777EA]' } })
+
+    expect(wrapper.text()).toContain('Rand')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border border-[#1777EA]', label: 'Border' },
+    })
+
+    expect(wrapper.text()).toContain('Border')
+  })
+
+  it('reads the width and the colour out of the model', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    expect(sliderIndex(wrapper)).toEqual([1])
+    expect(pickerValue(wrapper)).toBe('#1777EA')
+    expect(wrapper.text()).toContain('2 px')
+  })
+
+  // The two halves are independent tokens, so a consumer -- or an earlier
+  // version of this component -- may have stored them the other way round.
+  it('reads the halves in either order', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-[#1777EA] border-4' } })
+
+    expect(sliderIndex(wrapper)).toEqual([2])
+    expect(pickerValue(wrapper)).toBe('#1777EA')
+  })
+
+  it('leaves the picker empty when the model carries no colour', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2' } })
+
+    expect(sliderIndex(wrapper)).toEqual([1])
+    expect(pickerValue(wrapper)).toBe('')
+  })
+
+  // Unparseable tokens are not reported as a problem: the thumb sits on the
+  // first step and the first change writes a valid string back.
+  it('falls back to the first step for a string it cannot parse', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'rubbish' } })
+
+    expect(sliderIndex(wrapper)).toEqual([0])
+    expect(pickerValue(wrapper)).toBe('')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('spans the whole width scale', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border' } })
+    const slider = wrapper.findComponent(NexxtSlider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(3)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  it('writes the new width and keeps the colour when the slider moves', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    wrapper.findComponent(NexxtSlider).vm.$emit('update:modelValue', [3])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border-8 border-[#1777EA]']])
+  })
+
+  it('writes the picked colour and keeps the width', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#00FF00')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border-2 border-[#00FF00]']])
+  })
+
+  // Without a colour the width stands alone, rather than gaining an empty
+  // `border-[]` that Tailwind would not understand.
+  it('writes the width alone when there is no colour', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border' } })
+
+    wrapper.findComponent(NexxtSlider).vm.$emit('update:modelValue', [2])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border-4']])
+  })
+
+  it('keeps the colour when the picker reports an empty value', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('follows the model when the parent changes it', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    await wrapper.setProps({ modelValue: 'border-8' })
+
+    expect(sliderIndex(wrapper)).toEqual([3])
+    expect(pickerValue(wrapper)).toBe('')
+  })
+
+  it('emits update:enabled when the switch is toggled', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', enabled: true },
+    })
+
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+
+    expect(wrapper.emitted('update:enabled')).toEqual([[false]])
+  })
+
+  it('makes the content inert when enabled is false', () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', enabled: false },
+    })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeDefined()
+  })
+
+  it('keeps the content interactive when enabled is true', () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', enabled: true },
+    })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeUndefined()
+  })
+
+  // Switchable by default here, unlike the other blocks: a border is off as
+  // often as it is on.
+  it('renders the switch by default', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  it('renders no switch when switchable is false', () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', switchable: false },
+    })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+
+  // aria-valuenow is the step index, which is meaningless read aloud; the text
+  // the readout shows is what the thumb announces instead. The header names the
+  // whole setting, so the thumb is named after the width alone.
+  it('announces the width in pixels on the thumb', () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-4' } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(thumb.attributes('aria-valuetext')).toBe('4 px')
+    expect(thumb.attributes('aria-label')).toBe('Dikte')
+  })
+
+  it('renders custom messages', () => {
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-4',
+        messages: { unit: 'pixels', placeholder: 'Pick one', width: 'Thickness' },
+      },
+    })
+
+    expect(wrapper.text()).toContain('4 pixels')
+    expect(wrapper.text()).toContain('Pick one')
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Thickness')
+  })
+})
+
+describe('EditorBorder theme roles', () => {
+  it('renders no theme section without roles', async () => {
+    const wrapper = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+
+    await open(wrapper)
+
+    expect(wrapper.text()).not.toContain('Huisstijl')
+    expect(roleButtons(wrapper)).toHaveLength(0)
+  })
+
+  // An empty list is the default, so it must render what no prop renders.
+  it('renders the same markup for an empty list as without the prop', async () => {
+    const without = mount(EditorBorder, { props: { modelValue: 'border-2 border-[#1777EA]' } })
+    const empty = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', themeRoles: [] },
+    })
+
+    expect(empty.html()).toBe(without.html())
+
+    await open(without)
+    await open(empty)
+
+    expect(empty.html()).toBe(without.html())
+    expect(roleButtons(empty)).toHaveLength(0)
+  })
+
+  it('offers the passed roles under the default section title', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1777EA]', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+
+    expect(wrapper.text()).toContain('Huisstijl')
+    expect(roleLabels(wrapper)).toEqual(THEME_ROLES.map(({ label }) => label))
+  })
+
+  it('renders each role as a bare swatch inside a tooltip', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+
+    expect(wrapper.findAllComponents(NexxtTooltip)).toHaveLength(THEME_ROLES.length)
+    roleButtons(wrapper).forEach((button) => expect(button.text()).toBe(''))
+  })
+
+  it('takes the section title from messages', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-2',
+        themeRoles: THEME_ROLES,
+        messages: { themeLabel: 'Brand' },
+      },
+    })
+
+    await open(wrapper)
+
+    expect(wrapper.text()).toContain('Brand')
+    expect(wrapper.text()).not.toContain('Huisstijl')
+  })
+
+  // The picker throws on a colour it cannot read.
+  it('leaves out a role with an unreadable hex', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-2',
+        themeRoles: [
+          { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+          { role: 'accent', label: 'Accentkleur', hex: 'orange' },
+          { role: 'background', label: 'Achtergrond', hex: '#FFF' },
+          { role: 'heading', label: 'Koppen', hex: '#1F293780' },
+        ],
+      },
+    })
+
+    await open(wrapper)
+
+    expect(roleLabels(wrapper)).toEqual(['Hoofdkleur', 'Koppen'])
+  })
+
+  // The picker has no alpha channel here, so a role's alpha would be stored
+  // but never shown: the role stands for its opaque colour, both ways.
+  it('writes a role without its alpha, and matches it by its opaque colour', async () => {
+    const roles: EditorColorThemeRole[] = [
+      { role: 'heading', label: 'Koppen', hex: '#1F293780' },
+      { role: 'main', label: 'Hoofdkleur', hex: '#1777EA' },
+    ]
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-2 border-[#000000]',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value }),
+        themeRoles: roles,
+      },
+    })
+
+    await open(wrapper)
+    await roleButton(wrapper, 'Koppen').trigger('click')
+    await nextTick()
+
+    // Role to border: six digits, and the role with alpha shows as selected.
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border-2 border-[#1F2937]']])
+    expect(pressedLabels(wrapper)).toEqual(['Koppen'])
+
+    // Border to role: a hand-picked opaque colour selects the role with alpha.
+    await wrapper.setProps({ modelValue: 'border-2 border-[#000000]' })
+    expect(pressedLabels(wrapper)).toEqual([])
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#1f2937')
+    await nextTick()
+
+    expect(wrapper.props('modelValue')).toBe('border-2 border-[#1f2937]')
+    expect(pressedLabels(wrapper)).toEqual(['Koppen'])
+  })
+
+  it('renders no theme section when every role is unreadable', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-2',
+        themeRoles: [{ role: 'main', label: 'Hoofdkleur', hex: '' }],
+      },
+    })
+
+    await open(wrapper)
+
+    expect(wrapper.text()).not.toContain('Huisstijl')
+    expect(roleButtons(wrapper)).toHaveLength(0)
+  })
+
+  // A role is a shortcut to its hex: the back-end only takes a hex for a
+  // border, so no role class is ever written.
+  it('writes the role hex as a picked colour, keeping the width', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-4 border-[#000000]', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+    await roleButton(wrapper, 'Accentkleur').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border-4 border-[#F59E0B]']])
+  })
+
+  it('writes the first step with the role hex when the model has no width', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: '', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+    await roleButton(wrapper, 'Hoofdkleur').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['border border-[#1777EA]']])
+  })
+
+  it('presses the roles whose hex equals the border colour, whatever the case', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#1f2937]', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+
+    expect(pressedLabels(wrapper)).toEqual(['Koppen', 'Tekst'])
+  })
+
+  it('presses no role for a colour no role has', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: { modelValue: 'border-2 border-[#00FF00]', themeRoles: THEME_ROLES },
+    })
+
+    await open(wrapper)
+
+    expect(pressedLabels(wrapper)).toEqual([])
+  })
+
+  it('moves the pressed state with the model', async () => {
+    const wrapper = mount(EditorBorder, {
+      props: {
+        modelValue: 'border-2 border-[#000000]',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value }),
+        themeRoles: THEME_ROLES,
+      },
+    })
+
+    await open(wrapper)
+    await roleButton(wrapper, 'Hoofdkleur').trigger('click')
+    await nextTick()
+
+    expect(pressedLabels(wrapper)).toEqual(['Hoofdkleur'])
+  })
+})
+
+// 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_BORDER_STEPS', () => {
+  it('offers exactly the agreed steps', () => {
+    expect(EDITOR_BORDER_STEPS).toEqual([
+      { token: 'border', px: 1 },
+      { token: 'border-2', px: 2 },
+      { token: 'border-4', px: 4 },
+      { token: 'border-8', px: 8 },
+    ])
+  })
+})