@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
+import { computed, ref, watch } from 'vue'
+import EditorLineHeight, { EDITOR_LINE_HEIGHT_STEPS } from './EditorLineHeight.vue'
+import type { EditorLineHeightValue } from './EditorLineHeight.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 Line Height',
+  component: EditorLineHeight,
+  // 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_LINE_HEIGHT_STEPS.map(({ token }) => token ?? NO_CLASS),
+      mapping: { [NO_CLASS]: null },
+    },
+    messages: { control: 'object' },
+  },
+} satisfies Meta<typeof EditorLineHeight>
+
+type Story = StoryObj<typeof EditorLineHeight>
+
+/**
+ * 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 renderLineHeight = (args: Story['args']) => ({
+  components: { EditorLineHeight },
+  setup() {
+    const lineHeight = ref<EditorLineHeightValue | null>(args?.modelValue ?? null)
+    watch(
+      () => args?.modelValue,
+      (value) => (lineHeight.value = value ?? null),
+    )
+    const sampleClass = computed(() => [args?.fontSize ?? 'text-sm', lineHeight.value])
+    return { args, lineHeight, sampleClass }
+  },
+  template: `
+    <div>
+      <EditorLineHeight v-bind="args" v-model="lineHeight" />
+      <p class="extra-small-normal text-gray-700">
+        model: <code data-testid="model">{{ lineHeight ?? 'null' }}</code>
+      </p>
+      <!--
+        \`wrap-break-word\`: at 9xl a single word is wider than the 312px column. \`pt-[0.25em]\`:
+        below a factor of 1 the glyphs stick out of the first line box, by 23px at 9xl and 0.8,
+        which \`mt-4\` alone does not cover; in em, so the room grows with the text
+      -->
+      <p
+        data-testid="sample"
+        class="mt-4 pt-[0.25em] 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: `Standaard · 20 px` is 20. */
+const readoutPx = (canvasElement: HTMLElement) => {
+  const text = thumbOf(canvasElement).getAttribute('aria-valuetext') ?? ''
+  return Number(/(\d+) px$/.exec(text)?.[1])
+}
+
+/** The line height the sample renders at, in px, as Chromium computes it. */
+const sampleLineHeight = (canvasElement: HTMLElement) =>
+  parseFloat(getComputedStyle(within(canvasElement).getByTestId('sample')).lineHeight)
+
+/**
+ * The text of the sample stays below the controls. Below a factor of 1 the glyphs stick out of
+ * their line box, so the glyph box is measured (a Range over the text), not the paragraph. Inside
+ * the paragraph the lines may overlap; that is what such a tight line height does.
+ */
+const expectSampleClearsControls = async (canvasElement: HTMLElement) => {
+  const range = document.createRange()
+  range.selectNodeContents(within(canvasElement).getByTestId('sample'))
+  const controls = within(canvasElement).getByTestId('model').closest('p')!
+
+  await expect(range.getBoundingClientRect().top).toBeGreaterThanOrEqual(
+    controls.getBoundingClientRect().bottom,
+  )
+}
+
+/**
+ * Walks every step by keyboard, from the first to the last, and checks the readout against the
+ * line height Chromium renders: the readout is that line height rounded to whole px.
+ */
+const expectEveryStepMatches = async (canvasElement: HTMLElement) => {
+  const thumb = thumbOf(canvasElement)
+  thumb.focus()
+  await userEvent.keyboard('{Home}')
+
+  for (const step of EDITOR_LINE_HEIGHT_STEPS) {
+    if (step.token !== null) await userEvent.keyboard('{ArrowRight}')
+    await expect(within(canvasElement).getByTestId('model')).toHaveTextContent(step.token ?? 'null')
+    await expect(
+      Math.abs(sampleLineHeight(canvasElement) - readoutPx(canvasElement)),
+    ).toBeLessThanOrEqual(0.5)
+    await expectSampleClearsControls(canvasElement)
+  }
+}
+
+/**
+ * The default step: no class, so the text keeps the line height of its `text-*` token, and the
+ * readout names it with that height in px.
+ */
+export const Default: Story = {
+  args: { modelValue: null },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    const thumb = thumbOf(canvasElement)
+
+    await expect(thumb).toHaveAccessibleName('Regelafstand')
+    await expect(thumb).toHaveAttribute('aria-valuetext', 'Standaard · 20 px')
+    await expect(sampleLineHeight(canvasElement)).toBe(20)
+
+    await expectEveryStepMatches(canvasElement)
+    // the last step is twice the size: 28px at text-sm
+    await expect(sampleLineHeight(canvasElement)).toBe(28)
+
+    // the first step after the default is the tightest: 0.8 of 14px is 11.2px, read as 11
+    await userEvent.keyboard('{Home}{ArrowRight}')
+    await expect(thumb).toHaveAttribute('aria-valuetext', '11 px')
+    await expect(sampleLineHeight(canvasElement)).toBeCloseTo(11.2, 1)
+  },
+}
+
+/**
+ * A heading-sized text: the same factors, so the line height grows with the size and the lines
+ * never overlap the way a fixed `leading-9` would at 60px.
+ */
+export const LargeText: Story = {
+  args: { modelValue: null, fontSize: 'text-6xl' },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', 'Standaard · 60 px')
+    await expect(sampleLineHeight(canvasElement)).toBe(60)
+
+    await expectEveryStepMatches(canvasElement)
+    await expect(sampleLineHeight(canvasElement)).toBe(120)
+
+    await userEvent.keyboard('{Home}{ArrowRight}')
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', '48 px')
+    await expect(sampleLineHeight(canvasElement)).toBe(48)
+  },
+}
+
+/**
+ * The tightest step at the largest size, the worst case for overlap: the glyphs stick out of
+ * their 102px lines, and still stay clear of the controls above the text.
+ */
+export const BelowOne: Story = {
+  args: { modelValue: 'leading-[0.8]', fontSize: 'text-9xl' },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', '102 px')
+    await expect(sampleLineHeight(canvasElement)).toBeCloseTo(102.4, 1)
+    await expectSampleClearsControls(canvasElement)
+  },
+}
+
+/** A stored factor: the slider sits on its step, the readout is the factor at this size. */
+export const WithValue: Story = {
+  args: { modelValue: 'leading-[1.5]', fontSize: 'text-lg' },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', '27 px')
+    await expect(sampleLineHeight(canvasElement)).toBe(27)
+  },
+}
+
+/**
+ * The widest readout, `Standaard · 128 px` at text-9xl, fits the minimum width of the readout, so
+ * the slider beside it keeps its width over the whole list.
+ */
+export const ReadoutWidth: Story = {
+  args: { modelValue: null, fontSize: 'text-9xl' },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    const thumb = thumbOf(canvasElement)
+    const readout = within(canvasElement).getByText('Standaard · 128 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 widest = measure()
+    thumb.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(readout).toHaveTextContent('102 px')
+    const narrow = measure()
+
+    // `min-w-36`: 144px, with at least 8px to spare around the widest label
+    await expect(widest.readout).toBe(144)
+    await expect(widest.readout - widest.text).toBeGreaterThanOrEqual(8)
+    await expect(narrow.readout).toBe(widest.readout)
+    await expect(narrow.slider).toBe(widest.slider)
+  },
+}
+
+/** Every step, one control and sample each, so the whole readout range is in view. */
+export const AllSteps: Story = {
+  render: (args) => ({
+    components: { EditorLineHeight },
+    setup() {
+      const tokens = EDITOR_LINE_HEIGHT_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'">
+          <EditorLineHeight v-bind="args" :label="token ?? 'Standaard'" :model-value="token" />
+          <p class="pt-[0.25em] 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: 'Line height',
+    modelValue: null,
+    messages: { unit: 'pt', default: 'Auto' },
+  },
+  render: renderLineHeight,
+  play: async ({ canvasElement }) => {
+    await expect(thumbOf(canvasElement)).toHaveAttribute('aria-valuetext', 'Auto · 20 pt')
+  },
+}

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

@@ -0,0 +1,286 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EditorLineHeight, {
+  EDITOR_LINE_HEIGHT_STEPS,
+  EDITOR_TEXT_LINE_HEIGHT_RATIOS,
+} from './EditorLineHeight.vue'
+import type { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue'
+import type { EditorLineHeightValue } from './EditorLineHeight.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')
+
+describe('EditorLineHeight', () => {
+  // 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(EditorLineHeight, { props: { modelValue: null } })
+
+    expect(wrapper.find('p').text()).toBe('Regelafstand')
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorLineHeight, {
+      props: { modelValue: null, label: 'Line height' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Line height')
+  })
+
+  // 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_LINE_HEIGHT_STEPS).toEqual([
+      { token: null, factor: null },
+      { token: 'leading-[0.8]', factor: 0.8 },
+      { token: 'leading-[0.85]', factor: 0.85 },
+      { token: 'leading-[0.9]', factor: 0.9 },
+      { token: 'leading-[0.95]', factor: 0.95 },
+      { token: 'leading-[1]', factor: 1 },
+      { token: 'leading-[1.1]', factor: 1.1 },
+      { token: 'leading-[1.2]', factor: 1.2 },
+      { token: 'leading-[1.3]', factor: 1.3 },
+      { token: 'leading-[1.4]', factor: 1.4 },
+      { token: 'leading-[1.5]', factor: 1.5 },
+      { token: 'leading-[1.6]', factor: 1.6 },
+      { token: 'leading-[1.75]', factor: 1.75 },
+      { token: 'leading-[2]', factor: 2 },
+    ])
+  })
+
+  // Tailwind v4's default `--text-*--line-height`; the theme does not override them
+  it('knows the line height every text token carries by itself', () => {
+    expect(EDITOR_TEXT_LINE_HEIGHT_RATIOS).toEqual({
+      'text-xs': 1 / 0.75,
+      'text-sm': 1.25 / 0.875,
+      'text-base': 1.5,
+      'text-lg': 1.75 / 1.125,
+      'text-xl': 1.75 / 1.25,
+      'text-2xl': 2 / 1.5,
+      'text-3xl': 2.25 / 1.875,
+      'text-4xl': 2.5 / 2.25,
+      'text-5xl': 1,
+      'text-6xl': 1,
+      'text-7xl': 1,
+      'text-8xl': 1,
+      'text-9xl': 1,
+    })
+  })
+
+  it('spans the whole step list', () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: null } })
+    const slider = wrapper.findComponent(Slider)
+
+    expect(slider.props('min')).toBe(0)
+    expect(slider.props('max')).toBe(13)
+    expect(slider.props('step')).toBe(1)
+  })
+
+  describe('readout', () => {
+    // The readout is the factor times the px of `fontSize`, in whole px
+    it.each([
+      ['text-sm', [11, 12, 13, 13, 14, 15, 17, 18, 20, 21, 22, 25, 28]],
+      ['text-lg', [14, 15, 16, 17, 18, 20, 22, 23, 25, 27, 29, 32, 36]],
+      // 0.85 and 0.95 land on a half: 25.5 and 28.5 round up
+      ['text-3xl', [24, 26, 27, 29, 30, 33, 36, 39, 42, 45, 48, 53, 60]],
+      ['text-6xl', [48, 51, 54, 57, 60, 66, 72, 78, 84, 90, 96, 105, 120]],
+      ['text-9xl', [102, 109, 115, 122, 128, 141, 154, 166, 179, 192, 205, 224, 256]],
+    ] as const)('reads every step in px at %s', (fontSize, readouts) => {
+      EDITOR_LINE_HEIGHT_STEPS.slice(1).forEach((step, index) => {
+        const wrapper = mount(EditorLineHeight, {
+          props: { modelValue: step.token, fontSize },
+        })
+
+        expect(sliderIndex(wrapper)).toEqual([index + 1])
+        // aria-valuenow is the step index, which is meaningless read aloud
+        expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe(
+          `${readouts[index]} px`,
+        )
+      })
+    })
+
+    // No class: the token's own line height, named
+    it.each([
+      ['text-xs', 16],
+      ['text-sm', 20],
+      ['text-base', 24],
+      ['text-lg', 28],
+      ['text-xl', 28],
+      ['text-2xl', 32],
+      ['text-3xl', 36],
+      ['text-4xl', 40],
+      ['text-5xl', 48],
+      ['text-6xl', 60],
+      ['text-9xl', 128],
+    ] as const)('reads the default step at %s as Standaard · %i px', (fontSize, px) => {
+      const wrapper = mount(EditorLineHeight, { props: { modelValue: null, fontSize } })
+
+      expect(sliderIndex(wrapper)).toEqual([0])
+      expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe(
+        `Standaard · ${px} px`,
+      )
+      expect(wrapper.text()).toContain(`Standaard · ${px} px`)
+    })
+
+    it('reads at text-sm without a fontSize, and for an unset model', () => {
+      const wrapper = mount(EditorLineHeight)
+
+      expect(sliderIndex(wrapper)).toEqual([0])
+      expect(wrapper.text()).toContain('Standaard · 20 px')
+    })
+
+    it('follows a change of fontSize', async () => {
+      const wrapper = mount(EditorLineHeight, { props: { modelValue: 'leading-[1.5]' } })
+
+      expect(wrapper.text()).toContain('21 px')
+      await wrapper.setProps({ fontSize: 'text-6xl' })
+      expect(wrapper.text()).toContain('90 px')
+    })
+
+    it('renders custom copy for the default step and the unit', () => {
+      const wrapper = mount(EditorLineHeight, {
+        props: { modelValue: null, messages: { default: 'Auto', unit: 'pt' } },
+      })
+
+      expect(wrapper.text()).toContain('Auto · 20 pt')
+
+      const withValue = mount(EditorLineHeight, {
+        props: { modelValue: 'leading-[2]', messages: { unit: 'pt' } },
+      })
+
+      expect(withValue.text()).toContain('28 pt')
+      expect(withValue.text()).not.toContain('Standaard')
+    })
+  })
+
+  it('emits update:modelValue with the Tailwind class of the new step', async () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: null } })
+
+    // Index 10 on the list is `leading-[1.5]`.
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [10])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['leading-[1.5]']])
+  })
+
+  it('emits the tightest step, below 1, from the default step', async () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: null } })
+
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [1])
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['leading-[0.8]']])
+  })
+
+  it('emits null when moved back onto the default step', async () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: 'leading-[1.5]' } })
+
+    wrapper.findComponent(Slider).vm.$emit('update:modelValue', [0])
+    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.
+    it.each(['leading-6', 'leading-[1.25]'])(
+      'puts %s on the default step, warns once and writes nothing back',
+      async (value) => {
+        const warn = spyWarn()
+        const outOfScale = value as unknown as EditorLineHeightValue
+        const wrapper = mount(EditorLineHeight, { props: { modelValue: outOfScale } })
+
+        expect(sliderIndex(wrapper)).toEqual([0])
+        expect(wrapper.text()).toContain('Standaard · 20 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(EditorLineHeight, {
+        props: { modelValue: 'leading-6' as unknown as EditorLineHeightValue },
+      })
+
+      await wrapper.setProps({ modelValue: 'leading-8' as unknown as EditorLineHeightValue })
+
+      expect(warn).toHaveBeenCalledTimes(2)
+      expect(warn.mock.calls[1][0]).toContain('leading-8')
+    })
+
+    it('reads an unknown fontSize at text-sm and warns once', async () => {
+      const warn = spyWarn()
+      const wrapper = mount(EditorLineHeight, {
+        props: { modelValue: null, fontSize: 'text-10xl' as unknown as EditorFontSizeValue },
+      })
+
+      expect(wrapper.text()).toContain('Standaard · 20 px')
+      await wrapper.setProps({ label: 'Opnieuw renderen' })
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain('text-10xl')
+    })
+
+    it.each<[{ modelValue: EditorLineHeightValue | null; fontSize?: EditorFontSizeValue }]>([
+      [{ modelValue: null }],
+      [{ modelValue: 'leading-[1.75]', fontSize: 'text-6xl' }],
+    ])('stays silent for valid values: %o', (props) => {
+      const warn = spyWarn()
+
+      mount(EditorLineHeight, { props })
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+  })
+
+  it('passes the release of the slider on as pointerup', async () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: 'leading-[1.5]' } })
+
+    await wrapper.find('[role="slider"]').trigger('pointerup')
+
+    expect(wrapper.emitted('pointerup')).toHaveLength(1)
+  })
+
+  it('names the thumb after the label', () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: null } })
+
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Regelafstand')
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorLineHeight, { props: { modelValue: null } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorLineStyle from './EditorLineStyle.vue'
+import type { EditorLineStyleValue, EditorLineThickness } from './EditorLineStyle.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Line Style',
+  component: EditorLineStyle,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorLineStyle>
+
+type Story = StoryObj<typeof EditorLineStyle>
+
+/** Shows both models as-is: a style token and a thickness in px. */
+const render = (args: Story['args'], style: EditorLineStyleValue, px: EditorLineThickness) => ({
+  components: { EditorLineStyle },
+  setup() {
+    const lineStyle = ref(style)
+    const thickness = ref(px)
+    return { args, lineStyle, thickness }
+  },
+  template: `
+    <div>
+      <EditorLineStyle v-bind="args" v-model="lineStyle" v-model:thickness="thickness" />
+      <p data-testid="line-style-value" class="small-normal text-gray-700">
+        {{ lineStyle }} / {{ thickness }}
+      </p>
+    </div>
+  `,
+})
+
+const readout = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="line-style-value"]')!.textContent!.trim()
+
+const thicknessRow = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="editor-line-style-thickness"]')!
+
+export const Default: Story = {
+  render: (args) => render(args, 'solid', 2),
+}
+
+/** No line: the thickness row is collapsed and inert, so Tab skips the slider. */
+export const None: Story = {
+  render: (args) => render(args, 'none', 2),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const row = thicknessRow(canvasElement)
+
+    expect(row.className).toContain('grid-rows-[0fr]')
+    expect(row.getAttribute('inert')).not.toBeNull()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Gestreept' }))
+
+    await waitFor(() => expect(row.className).toContain('grid-rows-[1fr]'))
+    expect(row.getAttribute('inert')).toBeNull()
+    expect(readout(canvasElement)).toBe('dashed / 2')
+  },
+}
+
+/**
+ * Dotted starts at 2 px. An incoming 1 shows as 2 on the slider but stays 1 in
+ * the model: the consumer bumps it in the same patch as the style change, so
+ * the component does not write it on its own.
+ */
+export const DottedAtOnePx: Story = {
+  render: (args) => render(args, 'dotted', 1),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const thumb = canvas.getByRole('slider', { name: 'Dikte' })
+
+    expect(thumb).toHaveAttribute('aria-valuetext', '2 px')
+    expect(readout(canvasElement)).toBe('dotted / 1')
+
+    thumb.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await waitFor(() => expect(readout(canvasElement)).toBe('dotted / 3'))
+    expect(thumb).toHaveAttribute('aria-valuetext', '3 px')
+  },
+}
+
+/**
+ * Every option is a drawing without a tooltip, like the other editor toggle
+ * groups; its copy is the accessible name, so each one is still named.
+ */
+export const OptionNames: Story = {
+  render: (args) => render(args, 'solid', 3),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    for (const name of ['Geen', 'Doorgetrokken', 'Gestreept', 'Gestippeld']) {
+      expect(canvas.getByRole('button', { name })).toBeInTheDocument()
+    }
+
+    await userEvent.hover(canvas.getByRole('button', { name: 'Gestippeld' }))
+    expect(document.querySelector('[data-reka-popper-content-wrapper]')).toBeNull()
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Line',
+    messages: {
+      none: 'None',
+      solid: 'Solid',
+      dashed: 'Dashed',
+      dotted: 'Dotted',
+      thickness: 'Thickness',
+      unit: 'px',
+    },
+  },
+  render: (args) => render(args, 'dashed', 4),
+}
+
+/**
+ * The style options are one tab stop: arrows move between them, and Tab goes
+ * straight on to the thickness slider.
+ */
+export const KeyboardOrder: Story = {
+  render: (args) => render(args, 'dashed', 3),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    canvas.getByRole('button', { name: 'Gestreept' }).focus()
+    await userEvent.keyboard('{ArrowRight}')
+    expect(canvas.getByRole('button', { name: 'Gestippeld' })).toHaveFocus()
+    expect(readout(canvasElement)).toBe('dashed / 3')
+
+    await userEvent.tab()
+    expect(canvas.getByRole('slider', { name: 'Dikte' })).toHaveFocus()
+  },
+}