@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/ColorPicker/ColorPicker.test.ts

@@ -0,0 +1,638 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import NexxtColorPicker from './ColorPicker.vue'
+
+// jsdom does not ship ResizeObserver; reka-ui uses it internally (e.g. ColorSwatch useSize)
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
+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 open = async (wrapper: ReturnType<typeof mount>) => {
+  await wrapper.find('button').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+describe('NexxtColorPicker', () => {
+  // ── Rendering ─────────────────────────────────────────────────────────────
+
+  it('renders with default placeholder', () => {
+    const wrapper = mount(NexxtColorPicker)
+    expect(wrapper.text()).toContain('Kies kleur...')
+  })
+
+  it('renders a label when the label prop is set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { label: 'Merkkleur' },
+    })
+    expect(wrapper.text()).toContain('Merkkleur')
+  })
+
+  it('renders required asterisk when required is true', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { label: 'Kleur', required: true },
+    })
+    const asterisk = wrapper.find('.text-brick-500')
+    expect(asterisk.exists()).toBe(true)
+    expect(asterisk.text()).toBe('*')
+  })
+
+  it('shows error ring on the trigger when error is true', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { error: true, errorMessage: 'Kies een kleur' },
+    })
+    expect(wrapper.find('.ring-brick-400').exists()).toBe(true)
+  })
+
+  it('shows error message when error + errorMessage are set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { error: true, errorMessage: 'Kies een kleur om door te gaan' },
+    })
+    expect(wrapper.text()).toContain('Kies een kleur om door te gaan')
+  })
+
+  it('does not show error message when error is false', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { error: false, errorMessage: 'Kies een kleur om door te gaan' },
+    })
+    expect(wrapper.text()).not.toContain('Kies een kleur om door te gaan')
+  })
+
+  // ── modelValue ─────────────────────────────────────────────────────────────
+
+  it('displays the hex value in the trigger when modelValue is set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#6366f1', formats: ['hex'] },
+    })
+    expect(wrapper.text()).toContain('#6366f1')
+  })
+
+  it('shows placeholder when modelValue is empty', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '', placeholder: 'Kies een kleur' },
+    })
+    expect(wrapper.text()).toContain('Kies een kleur')
+  })
+  it('shows the value label in the trigger in place of the colour', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#6366f1', valueLabel: 'Hoofdkleur' },
+    })
+
+    expect(wrapper.find('button').text()).toBe('Hoofdkleur')
+    expect(wrapper.find('[aria-label="Geselecteerde kleur: Hoofdkleur"]').exists()).toBe(true)
+  })
+
+  it('keeps the placeholder over the value label while no colour is set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '', valueLabel: 'Hoofdkleur' },
+    })
+
+    expect(wrapper.find('button').text()).toBe('Kies kleur...')
+  })
+
+  it('renders the presets slot in the panel, above the suggestions', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { suggestions: { hex: ['#ff0000'] } },
+      slots: { presets: '<div data-test="presets">Huisstijl</div>' },
+    })
+
+    expect(wrapper.find('[data-test="presets"]').exists()).toBe(false)
+
+    await open(wrapper)
+
+    const presets = wrapper.find('[data-test="presets"]').element
+    const suggestion = wrapper.find('button[aria-label="Kies kleur #ff0000"]').element
+
+    expect(
+      presets.compareDocumentPosition(suggestion) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+  })
+
+  it('shows unique valid colour suggestions only after opening and selects one', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { suggestions: { hex: ['#ff0000', '#ff0000', 'not-a-colour'] } },
+    })
+
+    expect(wrapper.findAll('button[aria-label="Kies kleur #ff0000"]')).toHaveLength(0)
+
+    await open(wrapper)
+
+    expect(wrapper.findAll('button[aria-label="Kies kleur #ff0000"]')).toHaveLength(1)
+    expect(wrapper.text()).toContain('Gebruikte kleuren')
+
+    await wrapper.find('button[aria-label="Kies kleur #ff0000"]').trigger('click')
+
+    const updates = wrapper.emitted()['update:modelValue']
+    expect(updates?.at(-1)).toEqual(['#ff0000'])
+  })
+  it('shows suggestions for the active format only', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: {
+        formats: ['hsl', 'hex'],
+        suggestions: {
+          hex: ['#ff0000'],
+          hsl: ['hsl(0, 100%, 50%)'],
+        },
+      },
+    })
+
+    await open(wrapper)
+
+    expect(wrapper.find('button[aria-label="Kies kleur hsl(0, 100%, 50%)"]').exists()).toBe(true)
+    expect(wrapper.find('button[aria-label="Kies kleur #ff0000"]').exists()).toBe(false)
+  })
+
+  it('rejects alpha input when showAlpha is false', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#3b82f6', formats: ['hex'], showAlpha: false },
+    })
+    await open(wrapper)
+
+    const hexInput = wrapper.find('[placeholder="#000000"]')
+    await hexInput.setValue('#ff000080')
+    await hexInput.trigger('input')
+    await nextTick()
+
+    expect(wrapper.findAll('.ring-brick-400').length).toBeGreaterThan(0)
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
+  })
+
+  it('drops the alpha of the current colour when showAlpha is turned off', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { modelValue: '#00aa00e6', showAlpha: true } })
+
+    await wrapper.setProps({ showAlpha: false })
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['#00aa00']])
+  })
+
+  // A wrapper such as EditorColor swaps the value and turns the alpha channel off in
+  // one update. `show-alpha` goes first here, so its watcher runs before the
+  // model's: it must judge the new value, not the colour it still holds.
+  it('leaves a value the parent swaps in while turning showAlpha off', async () => {
+    const color = ref('#00aa00e6')
+    const alpha = ref(true)
+    const wrapper = mount({
+      components: { NexxtColorPicker },
+      setup: () => ({ color, alpha }),
+      template: '<NexxtColorPicker :show-alpha="alpha" v-model="color" />',
+    })
+
+    alpha.value = false
+    color.value = '#1777eaff'
+    await flushPromises()
+
+    expect(wrapper.findComponent(NexxtColorPicker).emitted('update:modelValue')).toBeUndefined()
+    expect(color.value).toBe('#1777eaff')
+  })
+
+  // ── Accessibility ──────────────────────────────────────────────────────────
+
+  it('trigger button has aria-expanded=false when closed', () => {
+    const wrapper = mount(NexxtColorPicker)
+    expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
+  })
+
+  it('trigger button has aria-expanded=true when open', async () => {
+    const wrapper = mount(NexxtColorPicker)
+    await open(wrapper)
+    expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
+  })
+
+  it('trigger button has aria-haspopup', () => {
+    const wrapper = mount(NexxtColorPicker)
+    expect(wrapper.find('button').attributes('aria-haspopup')).toBeTruthy()
+  })
+
+  it('label is linked to trigger button via for/id', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { label: 'Primaire kleur' },
+    })
+    const label = wrapper.find('label')
+    const btn = wrapper.find('button')
+    expect(label.attributes('for')).toBe(btn.attributes('id'))
+  })
+
+  it('trigger has aria-label fallback when no label prop is set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { placeholder: 'Kies kleur...' },
+    })
+    expect(wrapper.find('button').attributes('aria-label')).toBe('Kies kleur...')
+  })
+
+  it('trigger does not have aria-label when label prop is set', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { label: 'Merkkleur' },
+    })
+    expect(wrapper.find('button').attributes('aria-label')).toBeUndefined()
+  })
+
+  it('color swatch has a descriptive aria-label with selected color', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#6366f1' },
+    })
+    const swatch = wrapper.find('[aria-label*="Geselecteerde kleur"]')
+    expect(swatch.exists()).toBe(true)
+    expect(swatch.attributes('aria-label')).toContain('#6366f1')
+  })
+
+  it('color swatch has aria-label indicating no selection when empty', () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '' },
+    })
+    const swatch = wrapper.find('[aria-label="Geen kleur geselecteerd"]')
+    expect(swatch.exists()).toBe(true)
+  })
+
+  // ── Panel & formats ────────────────────────────────────────────────────────
+
+  it('opens the panel on trigger click', async () => {
+    const wrapper = mount(NexxtColorPicker)
+    expect(wrapper.find('[placeholder="#000000"]').exists()).toBe(false)
+    await open(wrapper)
+    expect(wrapper.find('[placeholder="#000000"]').exists()).toBe(true)
+  })
+
+  it('shows HEX input when formats includes hex', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { formats: ['hex'] } })
+    await open(wrapper)
+    expect(wrapper.find('[placeholder="#000000"]').exists()).toBe(true)
+  })
+
+  it('shows H/S/L inputs when format is hsl', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { formats: ['hsl'] } })
+    await open(wrapper)
+    expect(wrapper.find('[placeholder="H"]').exists()).toBe(true)
+    expect(wrapper.find('[placeholder="S"]').exists()).toBe(true)
+    expect(wrapper.find('[placeholder="L"]').exists()).toBe(true)
+  })
+
+  it('shows R/G/B inputs when format is rgb', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { formats: ['rgb'] } })
+    await open(wrapper)
+    expect(wrapper.find('[placeholder="R"]').exists()).toBe(true)
+    expect(wrapper.find('[placeholder="G"]').exists()).toBe(true)
+    expect(wrapper.find('[placeholder="B"]').exists()).toBe(true)
+  })
+
+  it('shows format cycle buttons when multiple formats are provided', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { formats: ['hex', 'hsl', 'rgb'] },
+    })
+    await open(wrapper)
+    expect(wrapper.find('[aria-label="Vorig formaat"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Volgend formaat"]').exists()).toBe(true)
+  })
+
+  it('does not show cycle buttons when only one format is provided', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { formats: ['hex'] } })
+    await open(wrapper)
+    expect(wrapper.find('[aria-label="Volgend formaat"]').exists()).toBe(false)
+  })
+
+  it('cycles to next format when cycle-down button is clicked', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { formats: ['hex', 'hsl'] },
+    })
+    await open(wrapper)
+    expect(wrapper.find('[placeholder="#000000"]').exists()).toBe(true)
+    await wrapper.find('[aria-label="Volgend formaat"]').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[placeholder="H"]').exists()).toBe(true)
+  })
+
+  it('does not show alpha slider by default', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { showAlpha: false } })
+    await open(wrapper)
+    const sliderThumbs = wrapper.findAll('.cursor-grab.rounded-full.bg-white')
+    expect(sliderThumbs.length).toBe(1)
+  })
+
+  it('shows alpha slider when showAlpha is true', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { showAlpha: true } })
+    await open(wrapper)
+    const sliderThumbs = wrapper.findAll('.cursor-grab.rounded-full.bg-white')
+    expect(sliderThumbs.length).toBe(2)
+  })
+
+  // The name is asserted in Chromium as well, in the WithAlpha story.
+  it('labels the alpha slider with a visible label', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { showAlpha: true } })
+    await open(wrapper)
+
+    const label = wrapper.findAll('span').find((span) => span.text() === 'Dekking')
+    expect(label, 'visible "Dekking" label').toBeDefined()
+    const slider = wrapper.find(`[aria-labelledby="${label?.attributes('id')}"]`)
+
+    expect(slider.attributes('role')).toBe('slider')
+    expect(slider.attributes('aria-label')).toBeUndefined()
+  })
+
+  it('takes the alpha label from alphaLabel', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { showAlpha: true, alphaLabel: 'Opacity' } })
+    await open(wrapper)
+
+    expect(wrapper.text()).toContain('Opacity')
+    expect(wrapper.text()).not.toContain('Dekking')
+  })
+
+  // `#…80` is 128/255, so reka reports 50.196; only the announcement is rounded.
+  it('announces the alpha as a whole number without changing the colour', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { modelValue: '#3b82f680', showAlpha: true } })
+    await open(wrapper)
+
+    const slider = wrapper.find('[role="slider"][aria-labelledby]')
+
+    expect(slider.attributes('aria-valuenow')).toBe('50')
+    expect(slider.attributes('aria-valuetext')).toBe('50%')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  // ── Hex input live update ──────────────────────────────────────────────────
+
+  it('updates modelValue immediately on valid hex input', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#3b82f6', formats: ['hex'] },
+    })
+    await open(wrapper)
+    const hexInput = wrapper.find('[placeholder="#000000"]')
+    await hexInput.setValue('#ff0000')
+    await hexInput.trigger('input')
+    await nextTick()
+    const emitted = wrapper.emitted()['update:modelValue']
+    expect(emitted).toBeTruthy()
+    expect((emitted![emitted!.length - 1] as string[])[0]).toBe('#ff0000')
+  })
+
+  it('shows error ring on hex input when value is invalid', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#3b82f6', formats: ['hex'] },
+    })
+    await open(wrapper)
+    const hexInput = wrapper.find('[placeholder="#000000"]')
+    await hexInput.setValue('notacolor')
+    await hexInput.trigger('input')
+    await nextTick()
+    // The hex field wrapper should have the brick ring
+    const errorRings = wrapper.findAll('.ring-brick-400')
+    expect(errorRings.length).toBeGreaterThan(0)
+  })
+
+  it('clears hex error ring when a valid color is entered after an invalid one', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { modelValue: '#3b82f6', formats: ['hex'] },
+    })
+    await open(wrapper)
+    const hexInput = wrapper.find('[placeholder="#000000"]')
+    await hexInput.setValue('bad')
+    await hexInput.trigger('input')
+    await nextTick()
+    await hexInput.setValue('#00ff00')
+    await hexInput.trigger('input')
+    await nextTick()
+    // No brick rings should remain (error prop is false, hex is now valid)
+    expect(wrapper.findAll('.ring-brick-400').length).toBe(0)
+  })
+
+  // ── fullWidth & matchWidth ─────────────────────────────────────────────────
+
+  it('adds w-full to the outer wrapper when fullWidth is true', () => {
+    const wrapper = mount(NexxtColorPicker, { props: { fullWidth: true } })
+    expect(wrapper.find('.w-full').exists()).toBe(true)
+  })
+
+  it('does not add w-full to the outer wrapper when fullWidth is false', () => {
+    const wrapper = mount(NexxtColorPicker, { props: { fullWidth: false } })
+    // The outer div should not have w-full
+    const outer = wrapper.find('div')
+    expect(outer.classes()).not.toContain('w-full')
+  })
+
+  it('trigger button has w-full class when fullWidth is true', () => {
+    const wrapper = mount(NexxtColorPicker, { props: { fullWidth: true } })
+    expect(wrapper.find('button').classes()).toContain('w-full')
+  })
+
+  it('trigger button has min-w-60 class when fullWidth is false', () => {
+    const wrapper = mount(NexxtColorPicker, { props: { fullWidth: false } })
+    expect(wrapper.find('button').classes()).toContain('min-w-60')
+  })
+
+  it('panel content has w-full class when matchWidth is true', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { matchWidth: true },
+    })
+    await open(wrapper)
+    // The panel content div switches from w-70 to w-full
+    expect(wrapper.find('.w-full').exists()).toBe(true)
+  })
+
+  it('panel content has w-70 class when matchWidth is false', async () => {
+    const wrapper = mount(NexxtColorPicker, {
+      props: { matchWidth: false },
+    })
+    await open(wrapper)
+    expect(wrapper.find('.w-70').exists()).toBe(true)
+  })
+
+  // ── Gradient mode ──────────────────────────────────────────────────────────
+
+  describe('gradient', () => {
+    beforeAll(() => {
+      Object.defineProperty(document, 'fonts', {
+        value: { ready: Promise.resolve() },
+        configurable: true,
+      })
+    })
+
+    it('adds nothing without the gradient prop', async () => {
+      const wrapper = mount(NexxtColorPicker, { props: { modelValue: '#6366f1' } })
+      await open(wrapper)
+      expect(wrapper.find('[role="toolbar"]').exists()).toBe(false)
+      expect(wrapper.find('[data-gradient-bar]').exists()).toBe(false)
+    })
+
+    it('offers only the gradient with modes gradient, whatever mode says', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modes: ['gradient'], mode: 'solid', modelValue: '#6366f1' },
+      })
+      await open(wrapper)
+      expect(wrapper.findAll('button').some((b) => b.text() === 'Effen')).toBe(false)
+      expect(wrapper.find('[data-gradient-bar]').exists()).toBe(true)
+      // A bound mode that disagrees with the one offered fill is corrected once.
+      expect(wrapper.emitted('update:mode')).toEqual([['gradient']])
+      expect(wrapper.emitted('update:gradientValue')).toBeUndefined()
+    })
+
+    it('emits no mode when it already matches the one offered fill', async () => {
+      const gradientOnly = mount(NexxtColorPicker, {
+        props: { modes: ['gradient'], mode: 'gradient' },
+      })
+      const solidOnly = mount(NexxtColorPicker, { props: { modelValue: '#6366f1' } })
+      await open(gradientOnly)
+      await open(solidOnly)
+      expect(gradientOnly.emitted('update:mode')).toBeUndefined()
+      expect(solidOnly.emitted('update:mode')).toBeUndefined()
+    })
+
+    it('clamps a selected stop from outside and reports the clamped index', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: {
+          modes: ['gradient'],
+          selectedStop: 7,
+          gradientValue: {
+            type: 'linear',
+            angle: 90,
+            centerX: 50,
+            centerY: 50,
+            stops: [
+              { color: '#000000', position: 0 },
+              { color: '#888888', position: 50 },
+              { color: '#ffffff', position: 100 },
+            ],
+          },
+        },
+      })
+      await open(wrapper)
+      expect(wrapper.emitted('update:selectedStop')?.at(-1)).toEqual([2])
+      expect(
+        wrapper.findAll('[data-gradient-bar] [role="slider"]')[2]?.attributes('data-selected'),
+      ).toBeDefined()
+
+      // A later out-of-range index from outside is clamped and reported back too.
+      const before = wrapper.emitted('update:selectedStop')?.length ?? 0
+      await wrapper.setProps({ selectedStop: 9 })
+      expect(wrapper.emitted('update:selectedStop')).toHaveLength(before + 1)
+      expect(wrapper.emitted('update:selectedStop')?.at(-1)).toEqual([2])
+    })
+
+    it('shows gradientStart while there is no gradient, and writes it on the first change', async () => {
+      const start = {
+        type: 'linear' as const,
+        angle: 90,
+        centerX: 50,
+        centerY: 50,
+        stops: [
+          { color: '#111111', position: 0 },
+          { color: '#22222200', position: 100 },
+        ],
+      }
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modes: ['gradient'], gradientStart: start },
+      })
+      await open(wrapper)
+      await wrapper.find('[data-angle-end]').trigger('keydown', { key: 'ArrowUp' })
+      expect(wrapper.emitted('update:gradientValue')?.[0]).toEqual([{ ...start, angle: 91 }])
+    })
+
+    it('reports a switch of mode and leaves the colour alone', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modelValue: '#6366f1', modes: ['solid', 'gradient'] },
+      })
+      await open(wrapper)
+      const verloop = wrapper.findAll('button').find((b) => b.text() === 'Verloop')
+      await verloop?.trigger('click')
+      expect(wrapper.emitted('update:mode')?.[0]).toEqual(['gradient'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('shows the default without a gradient, and writes it all on the first change', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modes: ['solid', 'gradient'], mode: 'gradient' },
+      })
+      expect(wrapper.find('button').text()).toContain('Kies kleur...')
+      await open(wrapper)
+      expect(wrapper.emitted('update:gradientValue')).toBeUndefined()
+      await wrapper.find('[data-gradient-bar] [role="slider"]').trigger('keydown', {
+        key: 'ArrowRight',
+      })
+      expect(wrapper.emitted('update:gradientValue')?.[0]).toEqual([
+        {
+          type: 'linear',
+          angle: 180,
+          centerX: 50,
+          centerY: 50,
+          stops: [
+            { color: '#00000000', position: 1 },
+            { color: '#00000099', position: 100 },
+          ],
+        },
+      ])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('takes its copy from gradientMessages', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: {
+          modes: ['solid', 'gradient'],
+          mode: 'gradient',
+          gradientMessages: {
+            stops: 'Stops',
+            addName: 'Add stop',
+            add: 'Add',
+            swatchEmpty: 'No colour',
+          },
+        },
+      })
+      await open(wrapper)
+      expect(wrapper.text()).toContain('Stops')
+      expect(wrapper.find('button[aria-haspopup] [role="img"]').attributes('aria-label')).toBe(
+        'No colour',
+      )
+      const add = wrapper.find('button[aria-label="Add stop"]')
+      expect(add.text()).toBe('Add')
+      expect(wrapper.find('button[aria-label="Kleurstops omdraaien"]').exists()).toBe(true)
+    })
+
+    it('keeps the colour editor out of the panel until a stop opens it', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modes: ['solid', 'gradient'], mode: 'gradient' },
+        attachTo: document.body,
+      })
+      await open(wrapper)
+      expect(wrapper.find('input[placeholder="#000000"]').exists()).toBe(false)
+      await wrapper.find('button[aria-label="Kleur kiezen"]').trigger('click')
+      await flushPromises()
+      await nextTick()
+      const dialog = wrapper.find('[role="dialog"]')
+      expect(dialog.find('input[placeholder="#000000"]').exists()).toBe(true)
+      wrapper.unmount()
+    })
+
+    it('emits close when the panel closes', async () => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: { modes: ['solid', 'gradient'] },
+        attachTo: document.body,
+      })
+      await open(wrapper)
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.emitted('close')).toHaveLength(1)
+      wrapper.unmount()
+    })
+  })
+
+  it('names the hex field next to its visible format label', async () => {
+    const wrapper = mount(NexxtColorPicker, { props: { modelValue: '#6366f1' } })
+    await open(wrapper)
+    expect(wrapper.find('input[placeholder="#000000"]').attributes('aria-label')).toBe('Hex')
+    expect(wrapper.text()).toContain('HEX')
+  })
+})