@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,161 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorJustifyContent, { EDITOR_JUSTIFY_CONTENT_OPTIONS } from './EditorJustifyContent.vue'
+
+// ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+/**
+ * The options are icon-only, so their copy lives on the button as the
+ * accessible name rather than as visible text.
+ */
+const optionNames = (wrapper: VueWrapper) =>
+  wrapper.findAll('button').map((button) => button.attributes('aria-label'))
+
+describe('EditorJustifyContent', () => {
+  // The options sit in a ToggleGroup toolbar; its name is the block label, so
+  // a screen reader announces which setting the pressed option belongs to.
+  it('names the options toolbar with the block label', async () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Uitlijning')
+
+    await wrapper.setProps({ label: 'Custom' })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Custom')
+  })
+
+  // No assertions on typography utilities: copy is found by structure or by
+  // accessible name, so restyling the block or the toggle group cannot turn
+  // these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    expect(wrapper.find('p').text()).toBe('Uitlijning')
+  })
+
+  it('renders a button for each of the four options', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    expect(wrapper.findAll('button')).toHaveLength(4)
+  })
+
+  it('names the options with the Dutch defaults', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Verdelen'])
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: { modelValue: 'justify-start', label: 'Alignment' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Alignment')
+  })
+
+  it('names the options with custom messages', () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: {
+        modelValue: 'justify-start',
+        messages: { start: 'Start', center: 'Center', end: 'End', between: 'Space between' },
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Start', 'Center', 'End', 'Space between'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: { modelValue: 'justify-start', messages: { between: 'Space between' } },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Space between'])
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked option', async () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    await wrapper.findAll('button')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['justify-end']])
+  })
+
+  it('renders only icons, no visible option text', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    // Each icon is rendered twice: once per toggle group layer.
+    expect(wrapper.findAll('i')).toHaveLength(8)
+    wrapper.findAll('button').forEach((button) => expect(button.text()).toBe(''))
+  })
+
+  it('renders no tooltip: the copy is the accessible name, not a hover overlay', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    // ToggleGroup only mounts NexxtTooltip -- and with it reka-ui's
+    // TooltipProvider and the trigger's data attribute -- for options that
+    // carry a `tooltip`.
+    expect(wrapper.findAllComponents({ name: 'TooltipProvider' })).toHaveLength(0)
+    expect(wrapper.find('[data-grace-area-trigger]').exists()).toBe(false)
+  })
+
+  it('offers all four options when `options` is not given', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Verdelen'])
+  })
+
+  it('offers only the options passed in `options`', () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: {
+        modelValue: 'justify-center',
+        options: ['justify-start', 'justify-center', 'justify-end'],
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde'])
+  })
+
+  it('keeps the canonical order whatever order `options` is in', () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: {
+        modelValue: 'justify-end',
+        options: ['justify-between', 'justify-end', 'justify-start'],
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Einde', 'Verdelen'])
+  })
+
+  it('emits the class of a clicked option from a subset', async () => {
+    const wrapper = mount(EditorJustifyContent, {
+      props: { modelValue: 'justify-start', options: ['justify-start', 'justify-end'] },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['justify-end']])
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorJustifyContent, { props: { modelValue: 'justify-start' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+})
+
+// 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_JUSTIFY_CONTENT_OPTIONS', () => {
+  it('offers exactly the agreed options', () => {
+    expect(EDITOR_JUSTIFY_CONTENT_OPTIONS).toEqual([
+      { token: 'start' },
+      { token: 'center' },
+      { token: 'end' },
+      { token: 'between' },
+    ])
+  })
+})

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

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
+import { computed, ref, watch } from 'vue'
+import EditorLetterSpacing, { EDITOR_LETTER_SPACING_STEPS } from './EditorLetterSpacing.vue'
+import type { EditorLetterSpacingValue } from './EditorLetterSpacing.vue'
+import { EDITOR_FONT_SIZE_STEPS } from '../EditorFontSize/EditorFontSize.vue'
+import type { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue'
+
+const NO_CLASS = '(geen klasse)'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Letter Spacing',
+  component: EditorLetterSpacing,
+  // 312px: the content width of the editor's settings panel
+  decorators: [() => ({ template: '<div class="mx-auto w-78"><story /></div>' })],
+  args: {
+    onPointerup: fn(),
+  },
+  argTypes: {
+    label: { control: 'text' },
+    // the base of the readout, and the size of the sample paragraph
+    fontSize: { control: 'select', options: EDITOR_FONT_SIZE_STEPS.map(({ token }) => token) },
+    // sets the model; the slider writes it back, so the two stay in step
+    modelValue: {
+      control: 'select',
+      options: EDITOR_LETTER_SPACING_STEPS.map(({ token }) => token ?? NO_CLASS),
+      mapping: { [NO_CLASS]: null },
+    },
+    messages: { control: 'object' },
+  },
+} satisfies Meta<typeof EditorLetterSpacing>
+
+type Story = StoryObj<typeof EditorLetterSpacing>
+
+/**
+ * The control with a sample paragraph under it. The sample carries the classes the app would put
+ * on the element: the `fontSize` token plus the model. They are the real classes, so the sample
+ * only changes when they compile.
+ */
+const renderLetterSpacing = (args: Story['args']) => ({
+  components: { EditorLetterSpacing },
+  setup() {
+    const letterSpacing = ref<EditorLetterSpacingValue | null>(args?.modelValue ?? null)
+    watch(
+      () => args?.modelValue,
+      (value) => (letterSpacing.value = value ?? null),
+    )
+    const sampleClass = computed(() => [args?.fontSize ?? 'text-sm', letterSpacing.value])
+    return { args, letterSpacing, sampleClass }
+  },
+  template: `
+    <div>
+      <EditorLetterSpacing v-bind="args" v-model="letterSpacing" />
+      <p class="extra-small-normal text-gray-700">
+        model: <code data-testid="model">{{ letterSpacing ?? 'null' }}</code>
+      </p>
+      <!-- \`wrap-break-word\`: at 9xl a single word is wider than the 312px column -->
+      <p data-testid="sample" class="mt-4 text-gray-900 wrap-break-word" :class="sampleClass">
+        Een licht appartement op loopafstand van het centrum, met een ruim balkon op het zuiden.
+      </p>
+    </div>
+  `,
+})
+
+const thumbOf = (canvasElement: HTMLElement) => within(canvasElement).getByRole('slider')
+
+/** The px in the readout, as the thumb announces it: `-0,7 px` is -0.7. */
+const readoutPx = (canvasElement: HTMLElement) => {
+  const text = thumbOf(canvasElement).getAttribute('aria-valuetext') ?? ''
+  return Number(/^(-?[\d,]+) px$/.exec(text)?.[1].replace(',', '.'))
+}
+
+/** The letter spacing the sample renders at, in px, as Chromium computes it; `normal` is 0. */
+const sampleLetterSpacing = (canvasElement: HTMLElement) => {
+  const { letterSpacing } = getComputedStyle(within(canvasElement).getByTestId('sample'))
+  return letterSpacing === 'normal' ? 0 : parseFloat(letterSpacing)
+}
+
+/**
+ * Walks every step by keyboard, from the tightest to the widest, and checks the readout against
+ * the spacing Chromium renders: the readout is that spacing rounded to one decimal.
+ */
+const expectEveryStepMatches = async (canvasElement: HTMLElement) => {
+  const thumb = thumbOf(canvasElement)
+  thumb.focus()
+  await userEvent.keyboard('{Home}')
+
+  for (const [index, step] of EDITOR_LETTER_SPACING_STEPS.entries()) {
+    if (index > 0) await userEvent.keyboard('{ArrowRight}')
+    await expect(within(canvasElement).getByTestId('model')).toHaveTextContent(step.token ?? 'null')
+    // 0.05 is half a decimal; the margin absorbs the float noise in the computed value
+    await expect(
+      Math.abs(sampleLetterSpacing(canvasElement) - readoutPx(canvasElement)),
+    ).toBeLessThanOrEqual(0.05 + 1e-6)
+  }
+}
+
+/**
+ * The default step: no class, zero spacing, with the thumb in the middle of the track. The play
+ * walks every step at text-sm, where they are fractions of a px.
+ */
+export const Default: Story = {
+  args: { modelValue: null },
+  render: renderLetterSpacing,
+  play: async ({ canvasElement }) => {
+    const thumb = thumbOf(canvasElement)
+
+    await expect(thumb).toHaveAccessibleName('Letterafstand')
+    await expect(thumb).toHaveAttribute('aria-valuetext', '0 px')
+    await expect(sampleLetterSpacing(canvasElement)).toBe(0)
+
+    await expectEveryStepMatches(canvasElement)
+    await expect(thumb).toHaveAttribute('aria-valuetext', '1,4 px')
+  },
+}
+
+/**
+ * A heading-sized text, tightened as a large heading usually is: the same em steps are whole px
+ * here, which a fixed px scale could never be at both sizes.
+ */
+export const LargeText: Story = {
+  args: { modelValue: 'tracking-[-0.025em]', fontSize: 'text-6xl' },
+  render: renderLetterSpacing,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', '-1,5 px')
+    await expect(sampleLetterSpacing(canvasElement)).toBe(-1.5)
+
+    await expectEveryStepMatches(canvasElement)
+    await expect(sampleLetterSpacing(canvasElement)).toBe(6)
+  },
+}
+
+/**
+ * The widest readouts, `-6,4 px` and `12,8 px` at text-9xl, fit the minimum width of the readout,
+ * so the slider beside it keeps its width over the whole list.
+ */
+export const ReadoutWidth: Story = {
+  args: { modelValue: 'tracking-[-0.05em]', fontSize: 'text-9xl' },
+  render: renderLetterSpacing,
+  play: async ({ canvasElement }) => {
+    const thumb = thumbOf(canvasElement)
+    const readout = within(canvasElement).getByText('-6,4 px')
+    // the slider root, which the thumb is placed in
+    const slider = thumb.parentElement!
+    const textWidth = () => {
+      const range = document.createRange()
+      range.selectNodeContents(readout)
+      return range.getBoundingClientRect().width
+    }
+    const measure = () => ({
+      readout: readout.getBoundingClientRect().width,
+      text: textWidth(),
+      slider: slider.getBoundingClientRect().width,
+    })
+
+    const tight = measure()
+    thumb.focus()
+    await userEvent.keyboard('{End}')
+    await expect(readout).toHaveTextContent('12,8 px')
+    const wide = measure()
+
+    // `min-w-16`: 64px, with at least 8px to spare around either label
+    await expect(wide.readout).toBe(64)
+    await expect(
+      Math.min(tight.readout - tight.text, wide.readout - wide.text),
+    ).toBeGreaterThanOrEqual(8)
+    await expect(wide.readout).toBe(tight.readout)
+    await expect(wide.slider).toBe(tight.slider)
+  },
+}
+
+/** Every step, one control and sample each, so the whole readout range is in view. */
+export const AllSteps: Story = {
+  render: (args) => ({
+    components: { EditorLetterSpacing },
+    setup() {
+      const tokens = EDITOR_LETTER_SPACING_STEPS.map(({ token }) => token)
+      const fontSize = computed<EditorFontSizeValue>(() => args?.fontSize ?? 'text-sm')
+      return { args, tokens, fontSize }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div v-for="token in tokens" :key="token ?? 'default'">
+          <EditorLetterSpacing v-bind="args" :label="token ?? '0'" :model-value="token" />
+          <p class="text-gray-900 wrap-break-word" :class="[fontSize, token]">
+            Een licht appartement op loopafstand van het centrum.
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Letter spacing',
+    modelValue: 'tracking-[-0.025em]',
+    messages: { unit: 'pt', decimalSeparator: '.' },
+  },
+  render: renderLetterSpacing,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', '-0.4 pt')
+  },
+}

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

@@ -0,0 +1,238 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EditorLetterSpacing, { EDITOR_LETTER_SPACING_STEPS } from './EditorLetterSpacing.vue'
+import type { EditorLetterSpacingValue } from './EditorLetterSpacing.vue'
+import type { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue'
+import Slider from '../../../atoms/Slider/Slider.vue'
+
+// jsdom ships no ResizeObserver, and reka-ui's slider observes its track to place the thumbs
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+// jsdom implements no pointer capture either, and reka-ui captures the pointer on thumb pointerdown
+Element.prototype.setPointerCapture ??= () => {}
+Element.prototype.releasePointerCapture ??= () => {}
+Element.prototype.hasPointerCapture ??= () => false
+
+/** The index the slider sits on, read from the model handed to the slider. */
+const sliderIndex = (wrapper: ReturnType<typeof mount>) =>
+  wrapper.findComponent(Slider).props('modelValue')
+
+/** Where the no-class step sits: the middle of the list, not the first entry. */
+const DEFAULT_INDEX = 3
+
+describe('EditorLetterSpacing', () => {
+  // No assertions on typography utilities: the label and the value are found by
+  // text or by structure, so restyling the block or the slider cannot turn
+  // these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+
+    expect(wrapper.find('p').text()).toBe('Letterafstand')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorLetterSpacing, {
+      props: { modelValue: null, label: 'Letter spacing' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Letter spacing')
+  })
+
+  // The consumer stores these classes and lists them in an `@source inline`
+  // rule, and the back end allows exactly these, so the list is a contract:
+  // any change here is a breaking change.
+  it('offers exactly the agreed steps', () => {
+    expect(EDITOR_LETTER_SPACING_STEPS).toEqual([
+      { token: 'tracking-[-0.05em]', em: -0.05 },
+      { token: 'tracking-[-0.025em]', em: -0.025 },
+      { token: 'tracking-[-0.01em]', em: -0.01 },
+      { token: null, em: 0 },
+      { token: 'tracking-[0.01em]', em: 0.01 },
+      { token: 'tracking-[0.025em]', em: 0.025 },
+      { token: 'tracking-[0.05em]', em: 0.05 },
+      { token: 'tracking-[0.075em]', em: 0.075 },
+      { token: 'tracking-[0.1em]', em: 0.1 },
+    ])
+  })
+
+  it('spans the whole step list', () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+    const slider = wrapper.findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(8)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  it('puts the default step, no class, in the middle of the track', () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+
+    expect(sliderIndex(wrapper)).toEqual([DEFAULT_INDEX])
+    expect(wrapper.text()).toContain('0 px')
+  })
+
+  it('treats an unset model as the default step', () => {
+    const wrapper = mount(EditorLetterSpacing)
+
+    expect(sliderIndex(wrapper)).toEqual([DEFAULT_INDEX])
+  })
+
+  describe('readout', () => {
+    // em times the px of `fontSize`, to one decimal, half away from zero; a comma as the decimal
+    // separator and a minus sign on the tight side. text-lg has 0.075em at 1.35px exactly, which
+    // a float makes 1.3499…: it still reads 1,4.
+    it.each([
+      ['text-sm', ['-0,7', '-0,4', '-0,1', '0', '0,1', '0,4', '0,7', '1,1', '1,4']],
+      ['text-lg', ['-0,9', '-0,5', '-0,2', '0', '0,2', '0,5', '0,9', '1,4', '1,8']],
+      ['text-xl', ['-1', '-0,5', '-0,2', '0', '0,2', '0,5', '1', '1,5', '2']],
+      ['text-6xl', ['-3', '-1,5', '-0,6', '0', '0,6', '1,5', '3', '4,5', '6']],
+      ['text-9xl', ['-6,4', '-3,2', '-1,3', '0', '1,3', '3,2', '6,4', '9,6', '12,8']],
+    ] as const)('reads every step in px at %s', (fontSize, readouts) => {
+      EDITOR_LETTER_SPACING_STEPS.forEach((step, index) => {
+        const wrapper = mount(EditorLetterSpacing, {
+          props: { modelValue: step.token, fontSize },
+        })
+
+        expect(sliderIndex(wrapper)).toEqual([index])
+        // aria-valuenow is the step index, which is meaningless read aloud
+        expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe(
+          `${readouts[index]} px`,
+        )
+      })
+    })
+
+    it('reads at text-sm without a fontSize', () => {
+      const wrapper = mount(EditorLetterSpacing, { props: { modelValue: 'tracking-[0.1em]' } })
+
+      expect(wrapper.text()).toContain('1,4 px')
+    })
+
+    it('follows a change of fontSize', async () => {
+      const wrapper = mount(EditorLetterSpacing, { props: { modelValue: 'tracking-[-0.05em]' } })
+
+      expect(wrapper.text()).toContain('-0,7 px')
+      await wrapper.setProps({ fontSize: 'text-9xl' })
+      expect(wrapper.text()).toContain('-6,4 px')
+    })
+
+    it('renders a custom unit and decimal separator', () => {
+      const wrapper = mount(EditorLetterSpacing, {
+        props: {
+          modelValue: 'tracking-[-0.025em]',
+          messages: { unit: 'pt', decimalSeparator: '.' },
+        },
+      })
+
+      expect(wrapper.text()).toContain('-0.4 pt')
+    })
+  })
+
+  it('emits update:modelValue with the Tailwind class of the new step', async () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [1])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['tracking-[-0.025em]']])
+  })
+
+  it('emits null when moved back onto the default step', async () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: 'tracking-[0.05em]' } })
+
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [DEFAULT_INDEX])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+  })
+
+  // The fallback is for old or faulty data; a development build says so, once per value
+  describe('values off the list', () => {
+    const spyWarn = () => vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+
+    // The type rules these out, which is exactly why the runtime fallback is
+    // worth a test: a stored value gets past the types. The default step, not
+    // the tightest one: an unknown value is no reason to squeeze the text.
+    it.each(['tracking-[1px]', 'tracking-wide'])(
+      'puts %s on the default step, warns once and writes nothing back',
+      async (value) => {
+        const warn = spyWarn()
+        const outOfScale = value as unknown as EditorLetterSpacingValue
+        const wrapper = mount(EditorLetterSpacing, { props: { modelValue: outOfScale } })
+
+        expect(sliderIndex(wrapper)).toEqual([DEFAULT_INDEX])
+        expect(wrapper.text()).toContain('0 px')
+
+        await wrapper.setProps({ label: 'Opnieuw renderen' })
+        await wrapper.setProps({ modelValue: outOfScale })
+        expect(warn).toHaveBeenCalledOnce()
+        expect(warn.mock.calls[0][0]).toContain(value)
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      },
+    )
+
+    it('warns again for another value off the list', async () => {
+      const warn = spyWarn()
+      const wrapper = mount(EditorLetterSpacing, {
+        props: { modelValue: 'tracking-[1px]' as unknown as EditorLetterSpacingValue },
+      })
+
+      await wrapper.setProps({
+        modelValue: 'tracking-[2px]' as unknown as EditorLetterSpacingValue,
+      })
+
+      expect(warn).toHaveBeenCalledTimes(2)
+      expect(warn.mock.calls[1][0]).toContain('tracking-[2px]')
+    })
+
+    it('reads an unknown fontSize at text-sm and warns once', async () => {
+      const warn = spyWarn()
+      const wrapper = mount(EditorLetterSpacing, {
+        props: {
+          modelValue: 'tracking-[0.1em]',
+          fontSize: 'text-10xl' as unknown as EditorFontSizeValue,
+        },
+      })
+
+      expect(wrapper.text()).toContain('1,4 px')
+      await wrapper.setProps({ label: 'Opnieuw renderen' })
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain('text-10xl')
+    })
+
+    it.each<[{ modelValue: EditorLetterSpacingValue | null; fontSize?: EditorFontSizeValue }]>([
+      [{ modelValue: null }],
+      [{ modelValue: 'tracking-[0.075em]', fontSize: 'text-6xl' }],
+    ])('stays silent for valid values: %o', (props) => {
+      const warn = spyWarn()
+
+      mount(EditorLetterSpacing, { props })
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+  })
+
+  it('passes the release of the slider on as pointerup', async () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+
+    await wrapper.find('[role="slider"]').trigger('pointerup')
+
+    expect(wrapper.emitted('pointerup')).toHaveLength(1)
+  })
+
+  it('names the thumb after the label', () => {
+    const wrapper = mount(EditorLetterSpacing, { props: { modelValue: null } })
+
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Letterafstand')
+  })
+})