@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/editor/molecules/EditorColor/EditorColorGradient.test.ts

@@ -0,0 +1,793 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import NexxtEditorColor from './EditorColor.vue'
+import type { EditorColorValue, NexxtEditorColorProps } from './EditorColor.vue'
+
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+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: () => () => {},
+  }
+})
+
+const THEME_ROLES = [
+  { role: 'main' as const, label: 'Hoofdkleur', hex: '#1777ea' },
+  { role: 'text' as const, label: 'Tekst', hex: '#111111' },
+]
+
+let wrapper: VueWrapper | undefined
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = undefined
+  document.body.innerHTML = ''
+})
+
+/** Mounts with a working v-model and opens the panel. */
+const setup = async (
+  modelValue: string,
+  props: Partial<NexxtEditorColorProps> = {},
+): Promise<{ w: VueWrapper; values: string[] }> => {
+  const values: string[] = []
+  const w = mount(NexxtEditorColor, {
+    attachTo: document.body,
+    props: {
+      modes: ['solid', 'gradient'],
+      themeRoles: THEME_ROLES,
+      ...props,
+      modelValue: modelValue as EditorColorValue,
+      'onUpdate:modelValue': async (value: EditorColorValue) => {
+        values.push(value)
+        await w.setProps({ modelValue: value })
+      },
+    },
+  })
+  wrapper = w
+  await w.find('button[aria-haspopup]').trigger('click')
+  await flushPromises()
+  await nextTick()
+  return { w, values }
+}
+
+const settle = async () => {
+  await flushPromises()
+  await nextTick()
+}
+
+const button = (w: VueWrapper, text: string) => {
+  const found = w.findAll('button').find((candidate) => candidate.text() === text)
+  if (!found) throw new Error(`No button "${text}"`)
+  return found
+}
+
+const stopHandles = (w: VueWrapper) => w.findAll('[data-gradient-bar] [role="slider"]')
+
+const key = async (w: VueWrapper, selector: string, keyName: string, init = {}) => {
+  await w.find(selector).trigger('keydown', { key: keyName, ...init })
+  await settle()
+}
+
+const rows = (w: VueWrapper) => w.findAll('[data-gradient-row]')
+
+/** jsdom has no PointerEvent; a MouseEvent carries the same coordinates. */
+const pointer = (target: Element, type: string, clientX: number, clientY: number) =>
+  target.dispatchEvent(new MouseEvent(type, { clientX, clientY, button: 0, bubbles: true }))
+
+/** Gives the preview square a layout: 176px at the origin, as in the editor column. */
+const mockSquare = (w: VueWrapper) =>
+  vi
+    .spyOn(w.find('[data-gradient-preview]').element, 'getBoundingClientRect')
+    .mockReturnValue(new DOMRect(0, 0, 176, 176))
+
+const openPopover = async (w: VueWrapper, index: number) => {
+  const swatch = rows(w)[index]?.find('button[aria-label="Kleur kiezen"]')
+  await swatch?.trigger('pointerdown')
+  await swatch?.trigger('click')
+  await settle()
+}
+
+describe('NexxtEditorColor gradient', () => {
+  describe('opt-in', () => {
+    it('has no mode switch without gradient', async () => {
+      const { w } = await setup('bg-[#7f56d9]', { modes: ['solid'] })
+      expect(w.find('[role="toolbar"]').exists()).toBe(false)
+    })
+
+    it('ignores gradient for a text colour', async () => {
+      const { w } = await setup('text-[#7f56d9]', { property: 'text' })
+      expect(w.find('[role="toolbar"]').exists()).toBe(false)
+    })
+
+    it('shows the mode switch with gradient', async () => {
+      const { w } = await setup('bg-[#7f56d9]')
+      expect(w.find('[role="toolbar"]').attributes('aria-labelledby')).toBeTruthy()
+      expect(w.text()).toContain('Effen')
+      expect(w.text()).toContain('Verloop')
+    })
+  })
+
+  describe('describedby', () => {
+    it('sets no attribute without the prop', async () => {
+      const { w } = await setup('bg-[#7f56d9]', { modes: ['solid'], switchable: true })
+      expect(w.find('[aria-describedby]').exists()).toBe(false)
+    })
+
+    it('describes the trigger', async () => {
+      const { w } = await setup('bg-[#7f56d9]', { describedby: 'hint' })
+      expect(w.find('button[aria-haspopup]').attributes('aria-describedby')).toBe('hint')
+    })
+
+    it('describes the switch as well when switchable', async () => {
+      const { w } = await setup('bg-[#7f56d9]', { describedby: 'hint', switchable: true })
+      expect(w.find('button[aria-haspopup]').attributes('aria-describedby')).toBe('hint')
+      expect(w.find('[role="switch"]').attributes('aria-describedby')).toBe('hint')
+    })
+  })
+
+  describe('gradient only', () => {
+    it('has no Effen | Verloop switch and opens on the gradient', async () => {
+      const { w } = await setup('', { modes: ['gradient'] })
+      expect(w.findAll('button').some((b) => b.text() === 'Effen')).toBe(false)
+      expect(w.find('[data-gradient-bar]').exists()).toBe(true)
+    })
+
+    it('opens a solid colour as its fade, without writing until the first change', async () => {
+      const { w, values } = await setup('bg-[#7f56d9]', { modes: ['gradient'] })
+      expect(values).toEqual([])
+      // The trigger shows the stored colour, as the solid trigger does.
+      const trigger = w.find('button[aria-haspopup]')
+      expect(trigger.text()).toContain('#7f56d9')
+      expect(trigger.find('[aria-label="Geselecteerde kleur: #7f56d9"]').exists()).toBe(true)
+      expect(rows(w).map((row) => row.find('input[aria-label="Hex"]').element)).toEqual([
+        expect.objectContaining({ value: '#7f56d9' }),
+        expect.objectContaining({ value: '#7f56d900' }),
+      ])
+      expect(w.find('[data-angle-end]').attributes('aria-valuenow')).toBe('180')
+      await key(w, '[data-gradient-bar] [role="slider"]', 'ArrowRight')
+      expect(values).toEqual(['bg-linear-180 from-[#7f56d9] from-1% to-[#7f56d900]'])
+    })
+
+    it('opens a role as its fade, and an empty value on the default', async () => {
+      const { w, values } = await setup('bg-theme-main', { modes: ['gradient'] })
+      expect(w.find('button[aria-haspopup]').text()).toContain('Hoofdkleur')
+      await w.find('button[aria-label="Kleurstops omdraaien"]').trigger('click')
+      await settle()
+      expect(values).toEqual(['bg-linear-180 from-[#1777ea00] to-theme-main'])
+
+      const { w: empty, values: none } = await setup('', { modes: ['gradient'] })
+      expect(none).toEqual([])
+      expect(empty.find('button[aria-haspopup]').text()).toContain('Kies kleur...')
+      expect(empty.find('[aria-label="Geen kleur geselecteerd"]').exists()).toBe(true)
+      await key(empty, '[data-angle-end]', 'ArrowUp')
+      expect(none).toEqual(['bg-linear-181 from-[#00000000] to-[#00000099]'])
+    })
+
+    it('reads a stored gradient as usual', async () => {
+      const { w } = await setup('bg-radial from-[#000000] to-[#ffffff]', { modes: ['gradient'] })
+      expect(w.find('button[aria-haspopup]').text()).toContain('Radiaal verloop')
+      expect(w.find('[data-gradient-center]').exists()).toBe(true)
+    })
+
+    it('falls back to the solid colour for another property', async () => {
+      const { w } = await setup('text-[#7f56d9]', { modes: ['gradient'], property: 'text' })
+      expect(w.find('[data-gradient-bar]').exists()).toBe(false)
+      expect(w.find('input[placeholder="#000000"]').exists()).toBe(true)
+    })
+  })
+
+  describe('switching modes', () => {
+    it('turns a hex into a fade to the same hex at 00', async () => {
+      const { w, values } = await setup('bg-[#7f56d9]')
+      await button(w, 'Verloop').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-180 from-[#7f56d9] to-[#7f56d900]')
+    })
+
+    it('turns a role into a fade from the role to its hex at 00', async () => {
+      const { w, values } = await setup('bg-theme-main')
+      await button(w, 'Verloop').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-180 from-theme-main to-[#1777ea00]')
+    })
+
+    it('writes the default fade without a colour', async () => {
+      const { w, values } = await setup('')
+      await button(w, 'Verloop').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-180 from-[#00000000] to-[#00000099]')
+    })
+
+    it('turns the selected stop into the solid colour, and back within the session', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-[#432e7380]', {
+        showAlpha: true,
+      })
+      await stopHandles(w)[1]?.trigger('focus')
+      await button(w, 'Effen').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-[#432e7380]')
+
+      await button(w, 'Verloop').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-theme-main to-[#432e7380]')
+    })
+
+    it('drops the alpha of the stop without showAlpha', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-[#432e7380]')
+      await stopHandles(w)[1]?.trigger('focus')
+      await button(w, 'Effen').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-[#432e73]')
+    })
+
+    it('uses the clamped selection after a change from outside with fewer stops', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')
+      await stopHandles(w)[2]?.trigger('focus')
+      await settle()
+      // An undo in the consumer: back to two stops while the third was selected.
+      await w.setProps({ modelValue: 'bg-linear-90 from-[#111111] to-[#222222]' })
+      await settle()
+      expect(stopHandles(w)[1]?.attributes('data-selected')).toBeDefined()
+      await button(w, 'Effen').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-[#222222]')
+    })
+
+    it('writes nothing when switching away from a gradient it cannot show', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-accent to-[#432e73]')
+      await button(w, 'Effen').trigger('click')
+      await settle()
+      expect(values).toEqual([])
+    })
+
+    it('turns a gradient into the solid colour of its selected stop when property leaves bg', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#432e7380]', {
+        showAlpha: true,
+      })
+      await stopHandles(w)[1]?.trigger('focus')
+      await settle()
+      await w.setProps({ property: 'text' })
+      await settle()
+      expect(values.at(-1)).toBe('text-[#432e7380]')
+      expect(w.find('[role="toolbar"]').exists()).toBe(false)
+    })
+
+    it('drops the alpha on that rewrite without showAlpha, and keeps a role', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#00000080] to-[#ffffff]')
+      await w.setProps({ property: 'text' })
+      await settle()
+      expect(values.at(-1)).toBe('text-[#000000]')
+
+      const { w: roleField, values: roleValues } = await setup(
+        'bg-linear-90 from-theme-main to-[#ffffff]',
+      )
+      await roleField.setProps({ property: 'text' })
+      await settle()
+      expect(roleValues.at(-1)).toBe('text-theme-main')
+    })
+
+    it('keeps the role of the selected stop', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-[#432e73]')
+      await button(w, 'Effen').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-theme-main')
+    })
+
+    it('shows the gradient type in the trigger', async () => {
+      const { w } = await setup('bg-radial from-[#000000] to-[#ffffff]')
+      const trigger = w.find('button[aria-haspopup]')
+      expect(trigger.text()).toContain('Radiaal verloop')
+      expect(trigger.find('[role="img"]').attributes('aria-label')).toBe(
+        'Geselecteerd verloop: radiaal, 2 kleuren',
+      )
+    })
+
+    it('shows the placeholder for an unreadable gradient and writes nothing on open', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-brand to-[#ffffff]')
+      const trigger = w.find('button[aria-haspopup]')
+      expect(trigger.text()).toContain('Kies kleur...')
+      const swatch = trigger.find('[role="img"]')
+      expect(swatch.attributes('aria-label')).toBe('Geen kleur geselecteerd')
+      expect(swatch.attributes('style') ?? '').not.toContain('background-image')
+      expect(stopHandles(w)).toHaveLength(2)
+      expect(values).toEqual([])
+    })
+  })
+
+  describe('stop handles', () => {
+    it('are sliders with a name and a value text', async () => {
+      const { w } = await setup('bg-linear-90 from-theme-main to-[#432e73cc] to-80%')
+      const [first, second] = stopHandles(w)
+      expect(first?.attributes()).toMatchObject({
+        role: 'slider',
+        'aria-label': 'Kleurstop 1 van 2',
+        'aria-valuenow': '0',
+        'aria-valuetext': '0 %, Hoofdkleur',
+      })
+      expect(second?.attributes('aria-valuetext')).toBe('80 %, #432e73, dekking 80 %')
+    })
+
+    it('move with the arrows, Shift, Home and End', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      const selector = '[data-gradient-bar] [role="slider"]'
+      await key(w, selector, 'ArrowRight')
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#000000] from-1% to-[#ffffff]')
+      await key(w, selector, 'ArrowUp', { shiftKey: true })
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#000000] from-11% to-[#ffffff]')
+      await key(w, selector, 'Home')
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#000000] to-[#ffffff]')
+    })
+
+    it('keep colour, selection and focus when one passes another', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff] to-60%')
+      const first = stopHandles(w)[0]
+      ;(first?.element as HTMLElement).focus()
+      await first?.trigger('focus')
+      await first?.trigger('keydown', { key: 'End' })
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#ffffff] from-60% to-[#000000]')
+      const handles = stopHandles(w)
+      expect(handles[1]?.attributes('aria-valuetext')).toBe('100 %, #000000')
+      expect(document.activeElement).toBe(handles[1]?.element)
+      expect(handles[1]?.attributes('data-selected')).toBeDefined()
+    })
+  })
+
+  describe('adding and removing', () => {
+    it('adds a stop halfway in the colour already there, and focuses its row', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#00000000] to-[#ff0000]')
+      await w.find('[data-gradient-add]').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#00000000] via-[#ff000080] to-[#ff0000]')
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Positie (%)')
+      expect(document.activeElement?.closest('[role="group"]')?.getAttribute('aria-label')).toBe(
+        'Kleurstop 2 van 3',
+      )
+    })
+
+    it('gives a new stop the role when both ends share it', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-theme-main to-80%')
+      await w.find('[data-gradient-add]').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe(
+        'bg-linear-90 from-theme-main via-theme-main via-40% to-theme-main to-80%',
+      )
+    })
+
+    it('adds a stop where the bar is clicked, and focuses its handle', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      const bar = w.find('[data-gradient-bar]')
+      vi.spyOn(bar.element, 'getBoundingClientRect').mockReturnValue(new DOMRect(100, 0, 200, 20))
+      pointer(bar.element, 'pointerdown', 150, 10)
+      await settle()
+      expect(values.at(-1)).toMatch(
+        /^bg-linear-90 from-\[#000000\] via-\[#[0-9a-f]{6}\] via-25% to-\[#ffffff\]$/,
+      )
+      expect(document.activeElement?.getAttribute('aria-valuenow')).toBe('25')
+    })
+
+    it('marks add as unavailable at three stops, with the reason', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')
+      const add = w.find('[data-gradient-add]')
+      expect(add.attributes('aria-disabled')).toBe('true')
+      expect(add.attributes('aria-label')).toBe('Kleurstop toevoegen')
+      expect(add.text()).toBe('Toevoegen')
+      const reason = document.getElementById(add.attributes('aria-describedby') ?? '')
+      expect(reason?.textContent).toBe('Een verloop heeft maximaal 3 kleurstops.')
+      expect(w.text()).toContain('max. 3')
+      await add.trigger('click')
+      await settle()
+      expect(values).toEqual([])
+    })
+
+    it('removes with Delete on a handle, focusing the neighbour above', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')
+      const middle = stopHandles(w)[1]
+      await middle?.trigger('focus')
+      await middle?.trigger('keydown', { key: 'Delete' })
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#000000] to-[#ffffff]')
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('Positie (%)')
+      expect((document.activeElement as HTMLInputElement).value).toBe('0')
+
+      const removes = w.findAll('button[aria-label="Verwijderen"]')
+      expect(removes).toHaveLength(2)
+      removes.forEach((remove) => expect(remove.attributes('disabled')).toBeDefined())
+      await stopHandles(w)[0]?.trigger('keydown', { key: 'Backspace' })
+      await settle()
+      expect(values).toHaveLength(1)
+    })
+
+    it('removes the first stop from its row, keeping the others in place', async () => {
+      const { w, values } = await setup(
+        'bg-linear-90 from-[#000000] via-[#888888] via-30% to-[#ffffff]',
+      )
+      await rows(w)[0]?.find('button[aria-label="Verwijderen"]').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#888888] from-30% to-[#ffffff]')
+      expect((document.activeElement as HTMLInputElement).value).toBe('30')
+    })
+  })
+
+  it('reverses positions and order, and writes nothing for a mirror image', async () => {
+    const { w, values } = await setup('bg-linear-45 from-[#000000] from-20% to-[#ffffff]')
+    const reverse = w.find('button[aria-label="Kleurstops omdraaien"]')
+    await reverse.trigger('click')
+    await settle()
+    expect(values.at(-1)).toBe('bg-linear-45 from-[#ffffff] to-[#000000] to-80%')
+
+    const { w: symmetric, values: none } = await setup(
+      'bg-linear-45 from-[#000000] via-[#ffffff] to-[#000000]',
+    )
+    await symmetric.find('button[aria-label="Kleurstops omdraaien"]').trigger('click')
+    await settle()
+    expect(none).toEqual([])
+  })
+
+  describe('stop list', () => {
+    it('has a group per stop with position, colour, hex, opacity and remove', async () => {
+      const { w } = await setup('bg-linear-90 from-theme-main to-[#432e73cc] to-80%')
+      const [first, second] = rows(w)
+      expect(first?.attributes('aria-label')).toBe('Kleurstop 1 van 2')
+      expect(first?.find('input[aria-label="Hex"]').element).toHaveProperty('value', 'Hoofdkleur')
+      expect(first?.find('input[aria-label="Hex"]').attributes('readonly')).toBeDefined()
+      const names = second?.findAll('input, button').map((el) => el.attributes('aria-label'))
+      expect(names).toEqual(['Positie (%)', 'Kleur kiezen', 'Hex', 'Verwijderen'])
+      // The opacity shows in the hex, eight digits below 100 %, as in the picker.
+      expect(second?.find('input[aria-label="Hex"]').element).toHaveProperty('value', '#432e73cc')
+    })
+
+    it('moves a stop with its position field, keeping the focus through a re-sort', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff] to-60%')
+      const input = rows(w)[0]?.find('input[aria-label="Positie (%)"]')
+      ;(input?.element as HTMLInputElement).focus()
+      await input?.setValue('80')
+      await input?.trigger('keydown', { key: 'Enter' })
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#ffffff] from-60% to-[#000000] to-80%')
+      expect(document.activeElement).toBe(input?.element)
+      expect(rows(w)[1]?.find('input[aria-label="Positie (%)"]').element).toBe(input?.element)
+    })
+
+    it('keeps typing in a field when the value changes from outside', async () => {
+      const { w } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      const hex = rows(w)[0]?.find('input[aria-label="Hex"]')
+      ;(hex?.element as HTMLInputElement).focus()
+      await hex?.setValue('#12')
+      await w.setProps({ modelValue: 'bg-linear-90 from-[#ff0000] to-[#ffffff]' })
+      await settle()
+      expect(hex?.element).toHaveProperty('value', '#12')
+
+      // An unfocused field follows the new value.
+      const other = rows(w)[1]?.find('input[aria-label="Hex"]')
+      await w.setProps({ modelValue: 'bg-linear-90 from-[#ff0000] to-[#00ff00]' })
+      await settle()
+      expect(other?.element).toHaveProperty('value', '#00ff00')
+    })
+
+    it('reverts a position above 100 and Escape without writing', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      const input = rows(w)[0]?.find('input[aria-label="Positie (%)"]')
+      await input?.setValue('140')
+      await input?.trigger('blur')
+      expect(values).toEqual([])
+      expect(input?.element).toHaveProperty('value', '0')
+      await input?.setValue('45')
+      await input?.trigger('keydown', { key: 'Escape' })
+      expect(input?.element).toHaveProperty('value', '0')
+    })
+
+    it('applies a six- or eight-digit hex; an invalid hex is marked, then reverted', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#00000080] to-[#ffffff]')
+      const row = rows(w)[0]
+      const hex = row?.find('input[aria-label="Hex"]')
+      expect(hex?.element).toHaveProperty('value', '#00000080')
+
+      await hex?.setValue('FF000040')
+      await hex?.trigger('keydown', { key: 'Enter' })
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#ff000040] to-[#ffffff]')
+
+      // Six digits is fully opaque, and so is an explicit ff pair.
+      await hex?.setValue('#00ff00')
+      await hex?.trigger('blur')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#00ff00] to-[#ffffff]')
+      await hex?.setValue('#0000ffFF')
+      await hex?.trigger('blur')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#0000ff] to-[#ffffff]')
+
+      await hex?.setValue('#zzz')
+      await hex?.trigger('keydown', { key: 'Enter' })
+      expect(row?.find('.ring-brick-400').exists()).toBe(true)
+      await hex?.trigger('blur')
+      expect(hex?.element).toHaveProperty('value', '#0000ff')
+      expect(row?.find('.ring-brick-400').exists()).toBe(false)
+    })
+
+    it('has no opacity field and no hint in the panel itself', async () => {
+      const { w } = await setup('bg-linear-90 from-theme-main to-[#ffffff]')
+      expect(w.find('input[aria-label="Dekking (%)"]').exists()).toBe(false)
+      expect(w.text()).not.toContain('Huisstijlkleuren zijn altijd dekkend.')
+    })
+  })
+
+  describe('colour popover', () => {
+    it('opens the colour editor for the stop and closes alone on Escape', async () => {
+      const { w } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      const swatch = rows(w)[1]?.find('button[aria-label="Kleur kiezen"]')
+      expect(swatch?.attributes('aria-haspopup')).toBe('dialog')
+      await swatch?.trigger('pointerdown')
+      await swatch?.trigger('click')
+      await settle()
+      expect(swatch?.attributes('aria-expanded')).toBe('true')
+      const dialog = w.find('[role="dialog"]')
+      expect(dialog.attributes('aria-label')).toBe('Kleur van kleurstop 2')
+      expect(dialog.find('input[placeholder="#000000"]').attributes('aria-label')).toBe('Hex')
+      expect(dialog.text()).toContain('Dekking')
+      expect(dialog.text()).not.toContain('HEX')
+
+      await dialog.trigger('keydown', { key: 'Escape' })
+      await settle()
+      expect(w.find('[role="dialog"]').exists()).toBe(false)
+      expect(document.activeElement).toBe(swatch?.element)
+      expect(w.find('[data-gradient-bar]').exists()).toBe(true)
+    })
+
+    it('binds the stop to a role from the theme swatches in the popover', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      await openPopover(w, 0)
+      await w.find('[role="dialog"] button[aria-label="Tekst"]').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-90 from-theme-text to-[#ffffff]')
+      expect(w.find('[role="dialog"] button[aria-label="Tekst"]').attributes('aria-pressed')).toBe(
+        'true',
+      )
+      const thumb = w.find('[role="dialog"] [aria-disabled="true"][role="slider"]')
+      expect(thumb.attributes('aria-valuenow')).toBe('100')
+      expect(
+        document.getElementById(thumb.attributes('aria-describedby') ?? '')?.textContent?.trim(),
+      ).toBe('Huisstijlkleuren zijn altijd dekkend.')
+    })
+
+    it('shows the role hint next to the locked opacity of a role stop only', async () => {
+      const { w } = await setup('bg-linear-90 from-theme-main to-[#ffffff]')
+      await openPopover(w, 0)
+      const dialog = w.find('[role="dialog"]')
+      const thumb = dialog.find('[aria-disabled="true"][role="slider"]')
+      const hint = dialog.find(`#${thumb.attributes('aria-describedby')}`)
+      expect(hint.text()).toBe('Huisstijlkleuren zijn altijd dekkend.')
+
+      await dialog.trigger('keydown', { key: 'Escape' })
+      await settle()
+      await openPopover(w, 1)
+      expect(w.find('[role="dialog"]').text()).not.toContain('Huisstijlkleuren')
+      expect(w.find('[role="dialog"] [aria-disabled="true"][role="slider"]').exists()).toBe(false)
+    })
+
+    it('offers the neighbouring stop first among the suggestions', async () => {
+      const { w } = await setup('bg-linear-90 from-[#111111] to-[#222222]', {
+        suggestions: ['#ff0000'],
+      })
+      await openPopover(w, 0)
+      const labels = w
+        .findAll('[role="dialog"] button[aria-label^="Kies kleur #"]')
+        .map((b) => b.attributes('aria-label'))
+      expect(labels).toEqual(['Kies kleur #222222', 'Kies kleur #ff0000'])
+    })
+  })
+
+  describe('angle', () => {
+    it('turns with the keyboard on the angle point, keeping the positions', async () => {
+      const { w, values } = await setup('bg-linear-355 from-[#000000] to-[#ffffff] to-80%')
+      const handle = '[data-angle-end]'
+      expect(w.find(handle).attributes('aria-valuetext')).toBe('355 graden')
+      await key(w, handle, 'ArrowUp', { shiftKey: true })
+      expect(values.at(-1)).toBe('bg-linear-10 from-[#000000] to-[#ffffff] to-80%')
+      await key(w, handle, 'ArrowLeft')
+      expect(values.at(-1)).toMatch(/^bg-linear-9 /)
+      await key(w, handle, 'Home')
+      expect(values.at(-1)).toMatch(/^bg-linear-0 /)
+    })
+
+    it('hides the other points from the keyboard', async () => {
+      const { w } = await setup('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')
+      const points = w.findAll('[data-stop-point]')
+      expect(points).toHaveLength(3)
+      expect(points.filter((p) => p.attributes('role') === 'slider')).toHaveLength(1)
+      points
+        .filter((p) => p.attributes('role') !== 'slider')
+        .forEach((p) => {
+          expect(p.attributes('aria-hidden')).toBe('true')
+          expect(p.attributes('tabindex')).toBe('-1')
+        })
+    })
+
+    it('sets the angle and both positions by dragging the to-point', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      mockSquare(w)
+      const to = w.find('[data-angle-end]').element
+      pointer(to, 'pointerdown', 176, 88)
+      pointer(to, 'pointermove', 88, 0)
+      pointer(to, 'pointerup', 88, 0)
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-45 from-[#000000] from-25% to-[#ffffff] to-75%')
+    })
+
+    it('clamps a drag beyond the square onto its edge', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      mockSquare(w)
+      const to = w.find('[data-angle-end]').element
+      pointer(to, 'pointerdown', 176, 88)
+      // far beyond the right edge: the point lands on (176, 88)
+      pointer(to, 'pointermove', 400, 88)
+      pointer(to, 'pointerup', 400, 88)
+      await settle()
+      expect(values.at(-1) ?? 'bg-linear-90 from-[#000000] to-[#ffffff]').toBe(
+        'bg-linear-90 from-[#000000] to-[#ffffff]',
+      )
+      // and up past the top-right corner: the point lands on the corner (176, 0)
+      pointer(to, 'pointerdown', 176, 88)
+      pointer(to, 'pointermove', 500, -300)
+      pointer(to, 'pointerup', 500, -300)
+      await settle()
+      expect(values.at(-1)).toBe('bg-linear-63 from-[#000000] from-17% to-[#ffffff]')
+      w.findAll('[data-stop-point]').forEach((point) => {
+        const style = (point.element as HTMLElement).style
+        expect(parseFloat(style.left)).toBeGreaterThanOrEqual(0)
+        expect(parseFloat(style.left)).toBeLessThanOrEqual(100)
+        expect(parseFloat(style.top)).toBeGreaterThanOrEqual(0)
+        expect(parseFloat(style.top)).toBeLessThanOrEqual(100)
+      })
+    })
+
+    it('draws the handles of 0 % and 100 % on the edge at 22°', async () => {
+      const { w } = await setup('bg-linear-22 from-[#000000] to-[#ffffff]')
+      const [from, to] = w.findAll('[data-stop-point]').map((point) => {
+        const style = (point.element as HTMLElement).style
+        return { x: parseFloat(style.left), y: parseFloat(style.top) }
+      })
+      expect(to?.y).toBeCloseTo(0)
+      expect(from?.y).toBeCloseTo(100)
+      for (const point of [from, to]) {
+        expect(point?.x).toBeGreaterThanOrEqual(0)
+        expect(point?.x).toBeLessThanOrEqual(100)
+      }
+    })
+
+    it('ends a drag when the pointer loses its capture', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      mockSquare(w)
+      const to = w.find('[data-angle-end]').element
+      pointer(to, 'pointerdown', 176, 88)
+      to.dispatchEvent(new MouseEvent('lostpointercapture', { bubbles: true }))
+      pointer(to, 'pointermove', 88, 0)
+      await settle()
+      expect(values).toEqual([])
+    })
+
+    it('puts the selected point where the zone is clicked without a drag', async () => {
+      const { w, values } = await setup('bg-linear-90 from-[#000000] to-[#ffffff]')
+      mockSquare(w)
+      const zone = w.find('[data-gradient-zone]').element
+      pointer(zone, 'pointerdown', 132, 88)
+      pointer(zone, 'pointerup', 132, 88)
+      await settle()
+      // The from-stop is selected; its point lands three quarters along the line.
+      expect(values.at(-1)).toBe('bg-linear-90 from-[#000000] from-75% to-[#ffffff]')
+    })
+  })
+
+  describe('radial', () => {
+    it('switches type, moves the centre and remembers the angle', async () => {
+      const { w, values } = await setup('bg-linear-45 from-[#000000] to-[#ffffff]')
+      await button(w, 'Radiaal').trigger('click')
+      await settle()
+      expect(values.at(-1)).toBe('bg-radial from-[#000000] to-[#ffffff]')
+
+      const handle = w.find('[role="slider"][aria-label="Middelpunt"]')
+      await handle.trigger('keydown', { key: 'ArrowLeft', shiftKey: true })
+      await handle.trigger('keydown', { key: 'ArrowUp' })
+      await settle()
+      expect(values.at(-1)).toBe('bg-radial-[at_40%_49%] from-[#000000] to-[#ffffff]')
+      expect(handle.attributes('aria-valuetext')).toBe('40 % van links, 49 % van boven')
+
+      await button(w, 'Lineair').trigger('click')
+      await settle()
+      expect(values.at(-1)).toMatch(/^bg-linear-45 /)
+    })
+
+    it('reads a centre at 0 or 100 clamped to 1–99, writing nothing', async () => {
+      const { w, values } = await setup('bg-radial-[at_0%_100%] from-[#000000] to-[#ffffff]')
+      const center = w.find('[data-gradient-center]')
+      expect(center.attributes('aria-valuetext')).toBe('1 % van links, 99 % van boven')
+      const style = (center.element as HTMLElement).style
+      expect([style.left, style.top]).toEqual(['1%', '99%'])
+      expect(values).toEqual([])
+      // The first change writes the clamped centre.
+      await key(w, '[data-gradient-center]', 'ArrowRight')
+      expect(values).toEqual(['bg-radial-[at_2%_99%] from-[#000000] to-[#ffffff]'])
+    })
+
+    it('clamps the centre to 1–99', async () => {
+      const { w, values } = await setup('bg-radial-[at_2%_50%] from-[#000000] to-[#ffffff]')
+      await key(w, '[data-gradient-center]', 'ArrowLeft', { shiftKey: true })
+      expect(values.at(-1)).toBe('bg-radial-[at_1%_50%] from-[#000000] to-[#ffffff]')
+    })
+
+    /** Where a point is drawn, in px of the 176px square. */
+    const pointAt = (w: VueWrapper, selector: string) => {
+      const style = (w.find(selector).element as HTMLElement).style
+      return { x: (parseFloat(style.left) / 100) * 176, y: (parseFloat(style.top) / 100) * 176 }
+    }
+    const expectInside = (point: { x: number; y: number }) => {
+      expect(point.x).toBeGreaterThanOrEqual(-0.01)
+      expect(point.y).toBeGreaterThanOrEqual(-0.01)
+      expect(point.x).toBeLessThanOrEqual(176.01)
+      expect(point.y).toBeLessThanOrEqual(176.01)
+    }
+
+    it('keeps the end point inside the square after dragging via off the corner ray', async () => {
+      const { w } = await setup(
+        'bg-radial-[at_30%_70%] from-[#ff0000] via-[#00ff00] via-40% to-[#0000ff]',
+      )
+      mockSquare(w)
+      const via = w.findAll('[data-stop-point]')[1]?.element as HTMLElement
+      pointer(via, 'pointerdown', 80, 90)
+      pointer(via, 'pointermove', 60, 100)
+      pointer(via, 'pointerup', 60, 100)
+      await settle()
+      const to = w.findAll('[data-stop-point]')[2]?.attributes('data-stop-point')
+      expectInside(pointAt(w, `[data-stop-point="${to}"]`))
+    })
+
+    it('drops a kept ray that no longer fits after the centre changes from outside', async () => {
+      const { w, values } = await setup('bg-radial-[at_30%_70%] from-[#ff0000] to-[#0000ff]')
+      mockSquare(w)
+      const to = w.findAll('[data-stop-point]')[1]?.element as HTMLElement
+      pointer(to, 'pointerdown', 176, 0)
+      pointer(to, 'pointermove', 20, 170)
+      pointer(to, 'pointerup', 20, 170)
+      await settle()
+      const dragged = values.at(-1) ?? ''
+      expect(dragged).toMatch(/to-\d+%$/)
+      await w.setProps({ modelValue: dragged.replace('at_30%_70%', 'at_80%_80%') })
+      await settle()
+      w.findAll('[data-stop-point]').forEach((point) => {
+        const id = point.attributes('data-stop-point')
+        expectInside(pointAt(w, `[data-stop-point="${id}"]`))
+      })
+    })
+
+    it('sets a stop position by its distance from the centre', async () => {
+      const { w, values } = await setup('bg-radial from-[#000000] to-[#ffffff]')
+      mockSquare(w)
+      const to = w.findAll('[data-stop-point]')[1]?.element as HTMLElement
+      pointer(to, 'pointerdown', 176, 176)
+      // half the radius (√2·88) to the right of the centre
+      pointer(to, 'pointermove', 88 + 62.2, 88)
+      pointer(to, 'pointerup', 88 + 62.2, 88)
+      await settle()
+      expect(values.at(-1)).toBe('bg-radial from-[#000000] to-[#ffffff] to-50%')
+    })
+  })
+})