@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,689 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import { colorToString, normalizeColor, setChannelValue } from 'reka-ui'
+import EditorColor from './EditorColor.vue'
+import type { EditorColorThemeRole, EditorColorValue } from './EditorColor.vue'
+import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+
+// jsdom ships neither ResizeObserver, which reka-ui's colour primitives use
+// internally, nor a layout engine for floating-ui to measure -- same setup as
+// ColorPicker's own test.
+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: () => () => {},
+  }
+})
+
+/** 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: only the role class may tell them apart.
+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' },
+]
+
+const trigger = (wrapper: VueWrapper) => wrapper.findComponent(NexxtColorPicker).find('button')
+
+/** The panel content only exists while the picker is open. */
+const open = async (wrapper: VueWrapper) => {
+  await trigger(wrapper).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'))
+
+/**
+ * The slider is named by its visible label, through `aria-labelledby`; it only
+ * exists while the panel is open.
+ */
+const alphaThumb = (wrapper: VueWrapper, label = 'Dekking') => {
+  const id = wrapper
+    .findAll('span')
+    .find((span) => span.text() === label)
+    ?.attributes('id')
+  // Without the label, look for any labelled slider: only the alpha slider is
+  // one, so this is empty exactly when the slider is not rendered.
+  return wrapper.find(
+    id ? `[role="slider"][aria-labelledby="${id}"]` : '[role="slider"][aria-labelledby]',
+  )
+}
+
+/** The picker's own hex field: what it holds is the colour the picker works with. */
+const hexField = (wrapper: VueWrapper) => wrapper.find<HTMLInputElement>('[placeholder="#000000"]')
+
+describe('EditorColor', () => {
+  // No assertions on typography utilities: the label is found by text or by
+  // structure, so restyling the block or the picker cannot turn these red.
+  it('renders the default label', () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    expect(wrapper.find('p').text()).toBe('Kleur')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', label: 'Achtergrondkleur' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Achtergrondkleur')
+  })
+
+  it('renders a switch when switchable is set', () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', switchable: true },
+    })
+
+    expect(wrapper.find('[role="switch"], input[type="checkbox"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Kleur')
+  })
+
+  it('renders no switch by default', () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    expect(wrapper.find('[role="switch"], input[type="checkbox"]').exists()).toBe(false)
+  })
+
+  it('hands the hex of the model to the picker', () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    expect(pickerValue(wrapper)).toBe('#1777EA')
+  })
+
+  it('reads an eight-digit hex as well', () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA80]' } })
+
+    expect(pickerValue(wrapper)).toBe('#1777EA80')
+  })
+
+  // A stored value from before this component, a token class, or a property this
+  // component does not own -- `border` belongs to the border component, colour
+  // and width together -- must leave the picker empty (its placeholder shows)
+  // instead of being written back.
+  it.each(['red', 'bg-red-500', 'border-[#1777EA]', ''])(
+    'leaves the picker empty for %p',
+    (value) => {
+      const wrapper = mount(EditorColor, { props: { modelValue: value as 'bg-[#000000]' } })
+
+      expect(pickerValue(wrapper)).toBe('')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    },
+  )
+
+  it('emits the picked hex as a bg class', async () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#00FF00')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#00FF00]']])
+  })
+
+  it('uses the property prop as the prefix of the class it writes', async () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'text-[#1777EA]', property: 'text' },
+    })
+
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#00FF00')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-[#00FF00]']])
+  })
+
+  it('keeps the colour when the picker reports an empty value', async () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('rewrites the prefix when the property prop changes', async () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    await wrapper.setProps({ property: 'text' })
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-[#1777EA]']])
+  })
+
+  it('writes nothing when the property changes without a parseable colour', async () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-red-500' as 'bg-[#000000]' } })
+
+    await wrapper.setProps({ property: 'text' })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('follows the model when the parent changes it', async () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    await wrapper.setProps({ modelValue: 'bg-[#123456]' })
+
+    expect(pickerValue(wrapper)).toBe('#123456')
+  })
+
+  it('emits update:enabled when the switch is toggled', async () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', switchable: true, 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(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', switchable: true, enabled: false },
+    })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeDefined()
+  })
+
+  it('keeps the content interactive when enabled is true', () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', switchable: true, enabled: true },
+    })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeUndefined()
+  })
+
+  // The panel is sized against the trigger rather than the picker's own w-70;
+  // the rendered widths are asserted in Chromium, in the Default story.
+  it('opens the picker panel at the width of its trigger', () => {
+    const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+    expect(wrapper.findComponent(NexxtColorPicker).props('matchWidth')).toBe(true)
+  })
+
+  it('passes a custom placeholder to the picker', () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-red-500' as 'bg-[#000000]', messages: { placeholder: 'Pick one' } },
+    })
+
+    expect(wrapper.text()).toContain('Pick one')
+  })
+  it('passes reusable colour suggestions to the picker', () => {
+    const wrapper = mount(EditorColor, {
+      props: { modelValue: 'bg-[#1777EA]', suggestions: ['#1777EA', '#F0F4F8'] },
+    })
+
+    expect(wrapper.findComponent(NexxtColorPicker).props('suggestions')).toEqual({
+      hex: ['#1777EA', '#F0F4F8'],
+    })
+  })
+
+  describe('theme roles', () => {
+    it('renders no theme section without roles', async () => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+      await open(wrapper)
+
+      expect(wrapper.text()).not.toContain('Huisstijl')
+      expect(roleButtons(wrapper)).toHaveLength(0)
+    })
+
+    it('offers the passed roles under the default section title', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES },
+      })
+
+      expect(roleButtons(wrapper)).toHaveLength(0)
+
+      await open(wrapper)
+
+      expect(wrapper.text()).toContain('Huisstijl')
+      expect(roleLabels(wrapper)).toEqual(THEME_ROLES.map(({ label }) => label))
+    })
+
+    // The label is not printed next to the swatch; that it shows on hover is
+    // asserted in Chromium, in the WithThemeRoles story.
+    it('renders each role as a bare swatch inside a tooltip', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES },
+      })
+
+      await open(wrapper)
+
+      expect(wrapper.findAllComponents(NexxtTooltip)).toHaveLength(THEME_ROLES.length)
+      roleButtons(wrapper).forEach((button) => expect(button.text()).toBe(''))
+    })
+
+    it('offers only the roles the consumer passes', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES.slice(0, 2) },
+      })
+
+      await open(wrapper)
+
+      expect(roleLabels(wrapper)).toEqual(['Hoofdkleur', 'Accentkleur'])
+    })
+
+    it('renders the section above the suggestions', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES, suggestions: ['#00FF00'] },
+      })
+
+      await open(wrapper)
+
+      const text = wrapper.text()
+      expect(text.indexOf('Huisstijl')).toBeGreaterThan(-1)
+      expect(text.indexOf('Huisstijl')).toBeLessThan(text.indexOf('Gebruikte kleuren'))
+    })
+
+    it('takes the section title from messages', async () => {
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: 'bg-[#1777EA]',
+          themeRoles: THEME_ROLES,
+          messages: { themeLabel: 'Brand' },
+        },
+      })
+
+      await open(wrapper)
+
+      expect(wrapper.text()).toContain('Brand')
+      expect(wrapper.text()).not.toContain('Huisstijl')
+    })
+
+    it('writes the role class for a bg property', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES },
+      })
+
+      await open(wrapper)
+      await roleButton(wrapper, 'Hoofdkleur').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-theme-main']])
+    })
+
+    it('writes the role class for a text property', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'text-[#1777EA]', property: 'text', themeRoles: THEME_ROLES },
+      })
+
+      await open(wrapper)
+      await roleButton(wrapper, 'Koppen').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['text-theme-heading']])
+    })
+
+    // The hex reaches the picker in its 8-digit form; see `pickerHex` in the component.
+    it('reads a stored role back as selected, with its label and hex', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'text-theme-heading', property: 'text', themeRoles: THEME_ROLES },
+      })
+
+      expect(pickerValue(wrapper)).toBe('#1F2937ff')
+      expect(trigger(wrapper).text()).toBe('Koppen')
+
+      await open(wrapper)
+
+      // `text` has the same hex as `heading`; only the stored role is selected.
+      expect(pressedLabels(wrapper)).toEqual(['Koppen'])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it.each(
+      (['bg', 'text'] as const).flatMap((prefix) =>
+        THEME_ROLES.map(({ role, label }) => [`${prefix}-theme-${role}`, label] as const),
+      ),
+    )('reads %s as %s', (value, label) => {
+      const wrapper = mount(EditorColor, { props: { modelValue: value, themeRoles: THEME_ROLES } })
+
+      expect(trigger(wrapper).text()).toBe(label)
+    })
+
+    it('keeps a literal that equals the hex of a role a literal', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA]', themeRoles: THEME_ROLES },
+      })
+
+      expect(trigger(wrapper).text()).not.toContain('Hoofdkleur')
+
+      await open(wrapper)
+
+      expect(pressedLabels(wrapper)).toEqual([])
+    })
+
+    it('writes a literal when a colour is picked while a role is selected', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES },
+      })
+
+      wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#00FF00')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#00FF00]']])
+    })
+
+    // The way to detach a colour from the theme without changing how it looks.
+    it('writes a literal when the suggestion with the hex of the selected role is picked', async () => {
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: 'bg-theme-main',
+          themeRoles: [{ role: 'main', label: 'Hoofdkleur', hex: '#1777ea' }],
+          suggestions: ['#1777ea'],
+        },
+      })
+
+      await open(wrapper)
+      await wrapper.find('button[aria-label="Kies kleur #1777ea"]').trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777ea]']])
+    })
+
+    it('follows the model from a role to a literal and back', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES },
+      })
+
+      await wrapper.setProps({ modelValue: 'bg-[#123456]' })
+
+      expect(pickerValue(wrapper)).toBe('#123456')
+      expect(trigger(wrapper).text()).not.toContain('Hoofdkleur')
+
+      await wrapper.setProps({ modelValue: 'bg-theme-accent' })
+
+      expect(pickerValue(wrapper)).toBe('#F59E0Bff')
+      expect(trigger(wrapper).text()).toBe('Accentkleur')
+    })
+
+    it('rewrites the prefix of a role when the property prop changes', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES },
+      })
+
+      await wrapper.setProps({ property: 'text' })
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['text-theme-main']])
+    })
+
+    // No label and no hex to show it with, so it reads like any other value the
+    // component cannot show -- but it is a valid class and must not be replaced.
+    it.each([
+      ['a role that is not offered', THEME_ROLES.slice(1)],
+      ['no roles at all', undefined],
+    ])('shows the placeholder for a stored role with %s', async (_, themeRoles) => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-theme-main', themeRoles } })
+
+      expect(pickerValue(wrapper)).toBe('')
+      expect(trigger(wrapper).text()).toBe('Kies kleur...')
+
+      await open(wrapper)
+
+      expect(pressedLabels(wrapper)).toEqual([])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it.each([
+      'bg-theme-main/10',
+      'bg-theme-secondary',
+      'bg-theme-on-main',
+      'border-theme-main',
+      'theme-main',
+    ])('leaves the picker empty for %p', async (value) => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: value as 'bg-theme-main', themeRoles: THEME_ROLES },
+      })
+
+      expect(pickerValue(wrapper)).toBe('')
+
+      await open(wrapper)
+
+      expect(pressedLabels(wrapper)).toEqual([])
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    // The picker throws on a colour it cannot read, so such a role never reaches it.
+    it.each(['', 'red', '#FFF', 'var(--nm-theme-main)'])(
+      'leaves out a role whose hex is %p',
+      async (hex) => {
+        const wrapper = mount(EditorColor, {
+          props: {
+            modelValue: 'bg-theme-main',
+            themeRoles: [
+              { role: 'main', label: 'Hoofdkleur', hex },
+              { role: 'accent', label: 'Accentkleur', hex: '#F59E0B' },
+            ],
+          },
+        })
+
+        expect(pickerValue(wrapper)).toBe('')
+
+        await open(wrapper)
+
+        expect(roleLabels(wrapper)).toEqual(['Accentkleur'])
+      },
+    )
+  })
+
+  describe('opacity', () => {
+    // The 8-digit output below comes straight from reka; nothing in the
+    // component converts alpha to hex itself. This pins that behaviour.
+    it('relies on reka writing #rrggbbaa below full opacity and #rrggbb at full', () => {
+      const opaque = normalizeColor('#1777EA')
+
+      expect(colorToString(opaque, 'hex')).toBe('#1777ea')
+      expect(colorToString(setChannelValue(opaque, 'alpha', 50), 'hex')).toBe('#1777ea80')
+      expect(colorToString(normalizeColor('#1777EA80'), 'hex')).toBe('#1777ea80')
+      expect(colorToString(normalizeColor('#1777EAff'), 'hex')).toBe('#1777ea')
+    })
+
+    it('opens the picker without an alpha channel by default', async () => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]' } })
+
+      expect(wrapper.findComponent(NexxtColorPicker).props('showAlpha')).toBe(false)
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).exists()).toBe(false)
+    })
+
+    it('offers the slider when showAlpha is set', async () => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]', showAlpha: true } })
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('100%')
+    })
+
+    it('takes the slider label from messages', async () => {
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: 'bg-[#1777EA]',
+          showAlpha: true,
+          messages: { alphaLabel: 'Transparantie' },
+        },
+      })
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper, 'Transparantie').exists()).toBe(true)
+      expect(wrapper.text()).not.toContain('Dekking')
+    })
+
+    it('writes an 8-digit hex when the slider is moved', async () => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA]', showAlpha: true } })
+
+      await open(wrapper)
+      await alphaThumb(wrapper).trigger('keydown', { key: 'ArrowLeft' })
+
+      // 99% of 255 rounds to 0xfc.
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777eafc]']])
+    })
+
+    it.each([
+      ['#1777ea80', 'bg-[#1777ea80]'],
+      ['#1777ea', 'bg-[#1777ea]'],
+      // An alpha that rounds to ff is opaque; the pair is dropped.
+      ['#1777eaff', 'bg-[#1777ea]'],
+    ])('writes the picked %s as %s', async (picked, written) => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#000000]', showAlpha: true } })
+
+      wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', picked)
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[written]])
+    })
+
+    it('loads a stored 8-digit hex with the slider at its opacity', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA80]', showAlpha: true },
+      })
+
+      expect(trigger(wrapper).text()).toBe('#1777ea80')
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('50%')
+      expect(hexField(wrapper).element.value).toBe('#1777ea80')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    // Without the slider the picker strips the alpha on read instead of
+    // throwing; the stored value is left alone until a colour is picked.
+    it('shows a stored 8-digit hex opaque without showAlpha, and keeps it', async () => {
+      const wrapper = mount(EditorColor, { props: { modelValue: 'bg-[#1777EA80]' } })
+
+      expect(trigger(wrapper).text()).toBe('#1777ea')
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).exists()).toBe(false)
+      expect(hexField(wrapper).element.value).toBe('#1777ea')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+
+      wrapper.findComponent(NexxtColorPicker).vm.$emit('update:modelValue', '#00ff00')
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#00ff00]']])
+    })
+
+    it('writes the opaque hex at once when showAlpha is turned off', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#1777EA80]', showAlpha: true },
+      })
+
+      await wrapper.setProps({ showAlpha: false })
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777ea]']])
+    })
+
+    // A role carries no opacity, so its hex reaches the picker opaque; otherwise
+    // the picker drops the alpha itself and writes a literal over the role.
+    it('keeps a role whose own hex is translucent', async () => {
+      const translucent: EditorColorValue = 'bg-[#00FF0080]'
+      const themeRoles: EditorColorThemeRole[] = [
+        { role: 'main', label: 'Hoofdkleur', hex: '#1777EA80' },
+      ]
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: translucent,
+          themeRoles,
+          showAlpha: true,
+          'onUpdate:modelValue': (value: EditorColorValue) =>
+            wrapper.setProps({ modelValue: value }),
+        },
+      })
+
+      await open(wrapper)
+      await roleButton(wrapper, 'Hoofdkleur').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-theme-main']])
+      expect(pickerValue(wrapper)).toBe('#1777EAff')
+    })
+
+    it('hides the slider while a theme role is selected', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES, showAlpha: true },
+      })
+
+      expect(wrapper.findComponent(NexxtColorPicker).props('showAlpha')).toBe(false)
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).exists()).toBe(false)
+    })
+
+    // Picking the role flips the picker's value and its alpha channel at once;
+    // the picker must not write the old colour back, stripped, over the role.
+    it('writes only the role when one is picked over a translucent literal', async () => {
+      // Typed up front: the handler refers to `wrapper`, which stops inference
+      // from narrowing an inline literal to the model's type.
+      const translucent: EditorColorValue = 'bg-[#00FF0080]'
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: translucent,
+          themeRoles: THEME_ROLES,
+          showAlpha: true,
+          'onUpdate:modelValue': (value: EditorColorValue) =>
+            wrapper.setProps({ modelValue: value }),
+        },
+      })
+
+      await open(wrapper)
+      expect(alphaThumb(wrapper).exists()).toBe(true)
+
+      await roleButton(wrapper, 'Hoofdkleur').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-theme-main']])
+      expect(alphaThumb(wrapper).exists()).toBe(false)
+      expect(trigger(wrapper).text()).toBe('Hoofdkleur')
+      expect(hexField(wrapper).element.value).toBe('#1777ea')
+    })
+
+    it('offers the slider again once a literal replaces the role', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES, showAlpha: true },
+      })
+
+      await wrapper.setProps({ modelValue: 'bg-[#1777EA80]' })
+
+      expect(wrapper.findComponent(NexxtColorPicker).props('showAlpha')).toBe(true)
+      expect(trigger(wrapper).text()).toBe('#1777ea80')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+})