@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/molecules/EditorColor/_ColorField.vue

@@ -56,8 +56,8 @@ const OPAQUE_ALPHA_PATTERN = /^(#[0-9A-Fa-f]{6})[fF]{2}$/
 
 <script lang="ts" setup generic="P extends string">
 import { computed, ref, watch } from 'vue'
-import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
 import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+import NexxtThemeRoleSwatches from './_ThemeRoleSwatches.vue'
 import type { ColorPickerGradient } from '../../../organisms/ColorPicker/ColorPicker.vue'
 import { clampCenter } from '../../../organisms/ColorPicker/gradientGeometry'
 import { COLOR_ROLES, ROLE_HEX_PATTERN, isHex, parseColorClass } from './colorClass'
@@ -412,34 +412,12 @@ watch(
     @close="onClose"
   >
     <template v-if="offeredRoles.length" #presets="{ preset, selectPreset }">
-      <div class="flex flex-col gap-1">
-        <span class="extra-small-normal text-gray-500">{{ themeLabel }}</span>
-        <!--
-            Same swatches and row as the picker's suggestions. Two roles often
-            share a hex (heading and text), so the tooltip is what tells them
-            apart; it repeats the accessible name rather than adding copy.
-          -->
-        <div class="flex flex-wrap gap-1.5">
-          <NexxtTooltip v-for="entry in offeredRoles" :key="entry.role" disable-closing-trigger>
-            <button
-              type="button"
-              :aria-label="entry.label"
-              :aria-pressed="isRolePressed(entry.role, preset)"
-              class="cursor-pointer rounded-md p-0.5 ring-gray-200 transition-shadow hover:ring-2 hover:ring-cornflower-blue-400 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none aria-pressed:ring-2 aria-pressed:ring-cornflower-blue-500"
-              @click="onRoleClick(entry, selectPreset)"
-            >
-              <span
-                aria-hidden="true"
-                class="block size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
-                :style="{ backgroundColor: entry.hex }"
-              />
-            </button>
-            <template #tooltip>
-              <span class="small-normal text-gray-900">{{ entry.label }}</span>
-            </template>
-          </NexxtTooltip>
-        </div>
-      </div>
+      <NexxtThemeRoleSwatches
+        :roles="offeredRoles"
+        :label="themeLabel"
+        :is-pressed="(entry) => isRolePressed(entry.role, preset)"
+        @pick="(entry) => onRoleClick(entry, selectPreset)"
+      />
     </template>
   </NexxtColorPicker>
 </template>

package/src/components/editor/molecules/EditorColor/_ThemeRoleSwatches.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+import type { EditorColorThemeRole } from './colorClass'
+
+/**
+ * The theme roles as one row of swatches under a section title, for the
+ * `presets` slot of NexxtColorPicker. What a pick writes, and when a swatch is
+ * pressed, is up to the field that renders it: NexxtEditorColor writes the role
+ * class, NexxtEditorBorder the role's hex.
+ */
+defineOptions({ name: 'NexxtThemeRoleSwatches' })
+
+defineProps<{
+  /** The roles to show, already stripped of entries with an unreadable hex. */
+  roles: EditorColorThemeRole[]
+  /** Section title above the swatches. */
+  label: string
+  /** Whether the swatch of a role shows as selected. */
+  isPressed: (entry: EditorColorThemeRole) => boolean
+}>()
+
+const emit = defineEmits<{
+  /** A swatch was clicked, or activated with the keyboard. */
+  pick: [entry: EditorColorThemeRole]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <span class="extra-small-normal text-gray-500">{{ label }}</span>
+    <!--
+      Same swatches and row as the picker's suggestions. Two roles often
+      share a hex (heading and text), so the tooltip is what tells them
+      apart; it repeats the accessible name rather than adding copy.
+    -->
+    <div class="flex flex-wrap gap-1.5">
+      <NexxtTooltip v-for="entry in roles" :key="entry.role" disable-closing-trigger>
+        <button
+          type="button"
+          :aria-label="entry.label"
+          :aria-pressed="isPressed(entry)"
+          class="cursor-pointer rounded-md p-0.5 ring-gray-200 transition-shadow hover:ring-2 hover:ring-cornflower-blue-400 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none aria-pressed:ring-2 aria-pressed:ring-cornflower-blue-500"
+          @click="emit('pick', entry)"
+        >
+          <span
+            aria-hidden="true"
+            class="block size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+            :style="{ backgroundColor: entry.hex }"
+          />
+        </button>
+        <template #tooltip>
+          <span class="small-normal text-gray-900">{{ entry.label }}</span>
+        </template>
+      </NexxtTooltip>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,303 @@
+import { describe, it, expect } from 'vitest'
+import {
+  gradientClassToCss,
+  looksLikeGradientClass,
+  parseGradientClass,
+  serializeGradientClass,
+  type GradientClass,
+} from './gradientClass'
+import type { EditorColorRole } from './colorClass'
+
+describe('parseGradientClass', () => {
+  it('reads a linear gradient with two stops at their default positions', () => {
+    expect(parseGradientClass('bg-linear-135 from-[#7f56d9] to-[#432e73]')).toEqual({
+      type: 'linear',
+      angle: 135,
+      stops: [
+        { color: { hex: '#7f56d9' }, position: 0 },
+        { color: { hex: '#432e73' }, position: 100 },
+      ],
+    })
+  })
+
+  it('reads a via stop, roles and explicit positions', () => {
+    expect(
+      parseGradientClass(
+        'bg-linear-0 from-theme-main from-10% via-[#ffffff80] via-40% to-theme-text to-90%',
+      ),
+    ).toEqual({
+      type: 'linear',
+      angle: 0,
+      stops: [
+        { color: { role: 'main' }, position: 10 },
+        { color: { hex: '#ffffff80' }, position: 40 },
+        { color: { role: 'text' }, position: 90 },
+      ],
+    })
+  })
+
+  it('reads a centred radial gradient and one with a centre elsewhere', () => {
+    expect(parseGradientClass('bg-radial from-[#000000] to-[#ffffff]')).toMatchObject({
+      type: 'radial',
+      x: 50,
+      y: 50,
+    })
+    expect(parseGradientClass('bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]')).toMatchObject({
+      type: 'radial',
+      x: 30,
+      y: 70,
+    })
+  })
+
+  it('normalizes hexes: lower case, an opaque ff dropped', () => {
+    expect(parseGradientClass('bg-linear-90 from-[#AABBCCFF] to-[#AABBCC80]')?.stops).toEqual([
+      { color: { hex: '#aabbcc' }, position: 0 },
+      { color: { hex: '#aabbcc80' }, position: 100 },
+    ])
+  })
+
+  it('accepts the classes in another order', () => {
+    expect(parseGradientClass('to-[#ffffff] from-[#000000] bg-linear-45')).toMatchObject({
+      angle: 45,
+    })
+  })
+
+  it.each([
+    ['empty', ''],
+    ['undefined', undefined],
+    ['a solid colour', 'bg-[#ffffff]'],
+    ['no type', 'from-[#000000] to-[#ffffff]'],
+    ['no from', 'bg-linear-90 to-[#ffffff]'],
+    ['no to', 'bg-linear-90 from-[#000000]'],
+    ['an unknown role', 'bg-linear-90 from-theme-brand to-[#ffffff]'],
+    ['an angle of 360', 'bg-linear-360 from-[#000000] to-[#ffffff]'],
+    ['an angle with a leading zero', 'bg-linear-045 from-[#000000] to-[#ffffff]'],
+    ['a position above 100', 'bg-linear-90 from-[#000000] to-[#ffffff] to-101%'],
+    ['a via position without via', 'bg-linear-90 from-[#000000] via-40% to-[#ffffff]'],
+    ['two types', 'bg-linear-90 bg-radial from-[#000000] to-[#ffffff]'],
+    ['a stop given twice', 'bg-linear-90 from-[#000000] from-[#111111] to-[#ffffff]'],
+    ['an unknown class', 'bg-linear-90 from-[#000000] to-[#ffffff] rounded'],
+    ['a short hex', 'bg-linear-90 from-[#000] to-[#ffffff]'],
+    ['positions that run backwards', 'bg-linear-90 from-[#000000] from-80% to-[#ffffff] to-20%'],
+    ['oklab in the radial value', 'bg-radial-[at_30%_70%_in_oklab] from-[#000000] to-[#ffffff]'],
+    ['a centre above 100', 'bg-radial-[at_130%_70%] from-[#000000] to-[#ffffff]'],
+    ['a direction keyword', 'bg-linear-to-b from-[#000000] to-[#ffffff]'],
+  ])('returns null for %s', (_, value) => {
+    expect(parseGradientClass(value)).toBeNull()
+  })
+})
+
+describe('serializeGradientClass', () => {
+  it('writes the fixed order and leaves default positions out', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 135,
+        stops: [
+          { color: { hex: '#7f56d9' }, position: 0 },
+          { color: { role: 'main' }, position: 40 },
+          { color: { hex: '#432e73cc' }, position: 100 },
+        ],
+      }),
+    ).toBe('bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]')
+  })
+
+  it('writes every position that differs from 0, 50 and 100', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 90,
+        stops: [
+          { color: { hex: '#000000' }, position: 5 },
+          { color: { hex: '#888888' }, position: 50 },
+          { color: { hex: '#ffffff' }, position: 95 },
+        ],
+      }),
+    ).toBe('bg-linear-90 from-[#000000] from-5% via-[#888888] to-[#ffffff] to-95%')
+  })
+
+  it('writes hexes in lower case without an opaque ff', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 0,
+        stops: [
+          { color: { hex: '#AABBCCFF' }, position: 0 },
+          { color: { hex: '#AABBCC00' }, position: 100 },
+        ],
+      }),
+    ).toBe('bg-linear-0 from-[#aabbcc] to-[#aabbcc00]')
+  })
+
+  it('writes bg-radial for a centred radial gradient, the arbitrary value otherwise', () => {
+    const stops = [
+      { color: { hex: '#000000' as const }, position: 0 },
+      { color: { hex: '#ffffff' as const }, position: 100 },
+    ]
+    expect(serializeGradientClass({ type: 'radial', x: 50, y: 50, stops })).toBe(
+      'bg-radial from-[#000000] to-[#ffffff]',
+    )
+    expect(serializeGradientClass({ type: 'radial', x: 30, y: 70, stops })).toBe(
+      'bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]',
+    )
+  })
+
+  it('rounds, clamps and wraps out-of-range numbers', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: -10.4,
+        stops: [
+          { color: { hex: '#000000' }, position: -3 },
+          { color: { hex: '#ffffff' }, position: 99.6 },
+        ],
+      }),
+    ).toBe('bg-linear-350 from-[#000000] to-[#ffffff]')
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 360,
+        stops: [
+          { color: { hex: '#000000' }, position: 0 },
+          { color: { hex: '#ffffff' }, position: 100 },
+        ],
+      }),
+    ).toMatch(/^bg-linear-0 /)
+  })
+
+  it('never writes var() or a free linear-gradient', () => {
+    const value = serializeGradientClass({
+      type: 'linear',
+      angle: 45,
+      stops: [
+        { color: { role: 'accent' }, position: 0 },
+        { color: { role: 'background' }, position: 100 },
+      ],
+    })
+    expect(value).not.toMatch(/var\(|linear-gradient/)
+  })
+})
+
+describe('round trip', () => {
+  const cases: GradientClass[] = [
+    {
+      type: 'linear',
+      angle: 0,
+      stops: [
+        { color: { hex: '#000000' }, position: 0 },
+        { color: { hex: '#ffffff' }, position: 100 },
+      ],
+    },
+    {
+      type: 'linear',
+      angle: 359,
+      stops: [
+        { color: { role: 'heading' }, position: 20 },
+        { color: { hex: '#12345678' }, position: 20 },
+        { color: { role: 'text' }, position: 20 },
+      ],
+    },
+    {
+      type: 'radial',
+      x: 0,
+      y: 100,
+      stops: [
+        { color: { hex: '#7f56d900' }, position: 0 },
+        { color: { hex: '#7f56d9' }, position: 50 },
+        { color: { hex: '#432e73' }, position: 100 },
+      ],
+    },
+    {
+      type: 'radial',
+      x: 50,
+      y: 50,
+      stops: [
+        { color: { role: 'main' }, position: 33 },
+        { color: { role: 'main' }, position: 67 },
+      ],
+    },
+  ]
+
+  it.each(cases.map((value, index) => [index, value] as const))(
+    'parse(serialize(x)) equals x for case %i',
+    (_, value) => {
+      expect(parseGradientClass(serializeGradientClass(value))).toEqual(value)
+    },
+  )
+
+  it.each([
+    'bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]',
+    'bg-radial-[at_30%_70%] from-theme-accent to-[#ffffff00] to-80%',
+    'bg-radial from-[#000000] from-10% to-[#ffffff]',
+  ])('serialize(parse(s)) equals s for %s', (value) => {
+    const parsed = parseGradientClass(value)
+    expect(parsed && serializeGradientClass(parsed)).toBe(value)
+  })
+})
+
+describe('looksLikeGradientClass', () => {
+  it('is true for a value led by a gradient type, readable or not', () => {
+    expect(looksLikeGradientClass('bg-linear-90 from-[#000000] to-[#ffffff]')).toBe(true)
+    expect(looksLikeGradientClass('bg-linear-999 garbage')).toBe(true)
+    expect(looksLikeGradientClass('bg-radial')).toBe(true)
+    expect(looksLikeGradientClass('bg-radial-[at_1%_2%] x')).toBe(true)
+  })
+
+  it('is false for a solid colour or nothing', () => {
+    expect(looksLikeGradientClass('bg-[#ffffff]')).toBe(false)
+    expect(looksLikeGradientClass('bg-theme-main')).toBe(false)
+    expect(looksLikeGradientClass('bg-radialx')).toBe(false)
+    expect(looksLikeGradientClass(undefined)).toBe(false)
+  })
+})
+
+describe('gradientClassToCss', () => {
+  const roles = (role: EditorColorRole) => `var(--color-theme-${role})`
+  const css = (value: string) => {
+    const parsed = parseGradientClass(value)
+    if (!parsed) throw new Error(`unreadable: ${value}`)
+    return gradientClassToCss(parsed, roles)
+  }
+
+  it('writes a linear gradient with the angle and every position', () => {
+    expect(css('bg-linear-135 from-[#7f56d9] to-[#432e73]')).toBe(
+      'linear-gradient(135deg in oklab, #7f56d9 0%, #432e73 100%)',
+    )
+  })
+
+  it('writes a centred radial gradient without a position', () => {
+    expect(css('bg-radial from-[#000000] to-[#ffffff] to-80%')).toBe(
+      'radial-gradient(in oklab, #000000 0%, #ffffff 80%)',
+    )
+  })
+
+  it('writes the centre before the interpolation method off centre, in oklab', () => {
+    expect(css('bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]')).toBe(
+      'radial-gradient(at 30% 70% in oklab, #000000 0%, #ffffff 100%)',
+    )
+  })
+
+  it('writes three stops with the via position, also the default 50 %', () => {
+    expect(css('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')).toBe(
+      'linear-gradient(90deg in oklab, #000000 0%, #888888 50%, #ffffff 100%)',
+    )
+    expect(css('bg-linear-90 from-[#000000] from-10% via-[#888888] via-40% to-[#ffffff]')).toBe(
+      'linear-gradient(90deg in oklab, #000000 10%, #888888 40%, #ffffff 100%)',
+    )
+  })
+
+  it('resolves a role and keeps a hex with alpha', () => {
+    expect(css('bg-linear-0 from-theme-main to-[#432E73CC]')).toBe(
+      'linear-gradient(0deg in oklab, var(--color-theme-main) 0%, #432e73cc 100%)',
+    )
+  })
+
+  it('round-trips: serialize, parse and draw give the same CSS as the parsed value', () => {
+    const value = 'bg-radial-[at_20%_80%] from-theme-accent via-[#ffffff80] via-35% to-[#000000]'
+    const parsed = parseGradientClass(value)
+    expect(parsed && serializeGradientClass(parsed)).toBe(value)
+    expect(css(value)).toBe(
+      'radial-gradient(at 20% 80% in oklab, var(--color-theme-accent) 0%, #ffffff80 35%, #000000 100%)',
+    )
+  })
+})

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorDashPattern from './EditorDashPattern.vue'
+import type { EditorDashPatternValue } from './EditorDashPattern.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Dash Pattern',
+  component: EditorDashPattern,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorDashPattern>
+
+type Story = StoryObj<typeof EditorDashPattern>
+
+/** Shows the model as-is: two whole px values. */
+const render = (args: Story['args'], initial: EditorDashPatternValue) => ({
+  components: { EditorDashPattern },
+  setup() {
+    const pattern = ref(initial)
+    return { args, pattern }
+  },
+  template: `
+    <div>
+      <EditorDashPattern v-bind="args" v-model="pattern" />
+      <p data-testid="dash-pattern-value" class="small-normal text-gray-700">
+        {{ pattern.dash }} / {{ pattern.gap }}
+      </p>
+    </div>
+  `,
+})
+
+const readout = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="dash-pattern-value"]')!.textContent!.trim()
+
+export const Default: Story = {
+  render: (args) => render(args, { dash: 8, gap: 4 }),
+}
+
+/**
+ * The field never goes empty: clearing it and leaving puts the previous value
+ * back. Values outside 1-64 are clamped, with the field's snap animation.
+ */
+export const NeverEmpty: Story = {
+  render: (args) => render(args, { dash: 8, gap: 4 }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const dash = canvas.getByRole('spinbutton', { name: 'Lengte (px)' })
+    const gap = canvas.getByRole('spinbutton', { name: 'Tussenruimte (px)' })
+
+    await userEvent.clear(dash)
+    await userEvent.tab()
+    await waitFor(() => expect(dash).toHaveValue(8))
+    expect(readout(canvasElement)).toBe('8 / 4')
+
+    await userEvent.clear(gap)
+    await userEvent.type(gap, '100')
+    await userEvent.tab()
+    await waitFor(() => expect(gap).toHaveValue(64))
+    expect(readout(canvasElement)).toBe('8 / 64')
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Dash',
+    messages: { dash: 'Length', gap: 'Gap', unit: 'px' },
+  },
+  render: (args) => render(args, { dash: 12, gap: 6 }),
+}

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

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest'
+import { flushPromises, mount, type DOMWrapper, type VueWrapper } from '@vue/test-utils'
+import EditorDashPattern, { EDITOR_DASH_PATTERN_LIMITS } from './EditorDashPattern.vue'
+import type { EditorDashPatternValue } from './EditorDashPattern.vue'
+
+const render = (modelValue: EditorDashPatternValue, props: Record<string, unknown> = {}) =>
+  mount(EditorDashPattern, { props: { modelValue, ...props } })
+
+const inputs = (wrapper: VueWrapper) => wrapper.findAll('input')
+
+const values = (wrapper: VueWrapper) =>
+  inputs(wrapper).map((input) => (input.element as HTMLInputElement).value)
+
+const lastEmit = (wrapper: VueWrapper) => wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+
+/** Type and confirm, the way leaving the field does. */
+const commit = async (input: DOMWrapper<Element>, typed: string) => {
+  await input.setValue(typed)
+  await input.trigger('blur')
+  await flushPromises()
+}
+
+describe('EditorDashPattern', () => {
+  // No assertions on typography utilities: copy is found by text or by
+  // accessible name, so restyling cannot turn these red.
+  it('renders the Dutch default label', () => {
+    expect(render({ dash: 8, gap: 4 }).find('p').text()).toBe('Streep')
+  })
+
+  it('renders a custom label', () => {
+    expect(render({ dash: 8, gap: 4 }, { label: 'Dash' }).find('p').text()).toBe('Dash')
+  })
+
+  it('shows the two values in two fields side by side', () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    expect(values(wrapper)).toEqual(['8', '4'])
+    expect(wrapper.get('.grid-cols-2').classes()).toEqual(expect.arrayContaining(['grid', 'gap-2']))
+  })
+
+  it('captions each field visibly and names it with the caption plus unit', () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    expect(wrapper.text()).toContain('Lengte')
+    expect(wrapper.text()).toContain('Tussenruimte')
+    expect(inputs(wrapper).map((input) => input.attributes('aria-label'))).toEqual([
+      'Lengte (px)',
+      'Tussenruimte (px)',
+    ])
+  })
+
+  it('offers px only, so it renders no unit selector', () => {
+    expect(render({ dash: 8, gap: 4 }).find('select').exists()).toBe(false)
+  })
+
+  it('merges custom messages per key', () => {
+    const wrapper = render({ dash: 8, gap: 4 }, { messages: { dash: 'Length', unit: 'pixels' } })
+
+    expect(inputs(wrapper).map((input) => input.attributes('aria-label'))).toEqual([
+      'Length (pixels)',
+      'Tussenruimte (pixels)',
+    ])
+  })
+
+  it('writes the dash and keeps the gap', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '12')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 12, gap: 4 })
+  })
+
+  it('writes the gap and keeps the dash', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '6')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 8, gap: 6 })
+  })
+
+  it('passes on commit from the field that finished', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '6')
+
+    expect(wrapper.emitted('commit')).toHaveLength(1)
+  })
+
+  it('clamps the dash to the limits', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '500')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 64, gap: 4 })
+  })
+
+  it('clamps the gap to the limits', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '0')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 8, gap: 1 })
+  })
+
+  it('is never empty: an emptied field puts the previous value back', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('commit')).toBeUndefined()
+    expect(values(wrapper)).toEqual(['8', '4'])
+  })
+})
+
+// The consumer's matcher uses the same bounds, so they are a contract.
+describe('EDITOR_DASH_PATTERN_LIMITS', () => {
+  it('bounds both values to 1-64 px', () => {
+    expect(EDITOR_DASH_PATTERN_LIMITS).toEqual({
+      dash: { min: 1, max: 64 },
+      gap: { min: 1, max: 64 },
+    })
+  })
+})

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorFlexDirection from './EditorFlexDirection.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Flex Direction',
+  component: EditorFlexDirection,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorFlexDirection>
+
+type Story = StoryObj<typeof EditorFlexDirection>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorFlexDirection },
+    setup() {
+      const direction = ref<'flex-row' | 'flex-col'>('flex-row')
+      return { args, direction }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorFlexDirection v-bind="args" v-model="direction" />
+        <p class="small-normal text-gray-700">{{ direction }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Direction',
+    messages: { horizontal: 'Horizontal', vertical: 'Vertical' },
+  },
+  render: (args) => ({
+    components: { EditorFlexDirection },
+    setup() {
+      const direction = ref<'flex-row' | 'flex-col'>('flex-row')
+      return { args, direction }
+    },
+    template: `<EditorFlexDirection v-bind="args" v-model="direction" />`,
+  }),
+}