@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,262 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorBackgroundSize, { EDITOR_BACKGROUND_SIZE_OPTIONS } from './EditorBackgroundSize.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('EditorBackgroundSize', () => {
+  // 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(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Vulling')
+
+    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(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    expect(wrapper.find('p').text()).toBe('Vulling')
+  })
+
+  it('renders a button for each of the three options', () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    expect(wrapper.findAll('button')).toHaveLength(3)
+  })
+
+  it('names the options with the Dutch defaults', () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    expect(optionNames(wrapper)).toEqual(['Opvullen', 'Passend', 'Origineel'])
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: { modelValue: 'bg-cover', label: 'Fit' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Fit')
+  })
+
+  it('names the options with custom messages', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: {
+        modelValue: 'bg-cover',
+        messages: { cover: 'Cover', contain: 'Contain', auto: 'Original' },
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Cover', 'Contain', 'Original'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: { modelValue: 'bg-cover', messages: { contain: 'Contain' } },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Opvullen', 'Contain', 'Origineel'])
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked option', async () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['bg-contain']])
+  })
+
+  it('emits bg-auto when the last option is clicked', async () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    await wrapper.findAll('button')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['bg-auto']])
+  })
+
+  it('renders only icons, no visible option text', () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    // Each icon is rendered twice: once per toggle group layer.
+    expect(wrapper.findAll('i')).toHaveLength(6)
+    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(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    // 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)
+  })
+
+  // Recorded against the component before `options` and `bare` existed: without
+  // either prop the markup has to stay byte for byte what consumers already ship.
+  it('renders unchanged without the new props', () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      "<div class="py-4">
+        <!--
+            Switch.vue sets \`inheritAttrs: false\` and binds \`$attrs\` on its sr-only
+            input, so a class on <Switch> never reaches its root <label>. The child
+            variant below styles that label from the header instead, which keeps the
+            whole row clickable and the accessible name on the real <label>. The gap
+            has to go on that label too: the header has a single child in both modes,
+            so its own \`gap\` would never apply and the spacing would silently fall
+            back to the \`gap-2\` that Switch.vue sets for itself.
+          -->
+        <div class="flex items-center [&amp;>label]:flex [&amp;>label]:w-full [&amp;>label]:gap-3">
+          <p class="small-normal text-gray-900">Vulling</p>
+        </div>
+        <div class="grid grid-rows-[1fr]">
+          <!--
+              \`overflow-hidden\` is what makes the 0fr collapse clip, but it also clips
+              a focus ring on a full-width control in the slot, and the block has no
+              horizontal padding of its own. \`-mx-1\` widens the clipping box by 4px on
+              each side and the \`px-1\` below pushes the content back, so the ring has
+              room while the content keeps the same x position as the label.
+            -->
+          <div class="-mx-1 min-h-0 overflow-hidden opacity-100">
+            <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+            <div class="px-1 pt-1.5 pb-1">
+              <div class="flex flex-col gap-1" role="toolbar" aria-label="Vulling">
+                <!--v-if-->
+                <div class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1">
+                  <!-- slider pill -->
+                  <div aria-hidden="true" class="absolute inset-y-1 left-0 rounded-lg bg-white" style="width: 0px; transform: translateX(0px);"></div>
+                  <!--
+              buttons with gray text underneath.
+
+              An icon-only option renders a button with no text at all, so its
+              accessible name has to come from somewhere: the tooltip is a sibling in
+              a portal, not a label, and axe flags these buttons with \`button-name\`.
+              \`ariaLabel\` is the explicit way to name such a button. Falling back to
+              the tooltip keeps the consumers that were already relying on it named,
+              and neither applies once there is a visible label -- an \`aria-label\`
+              would override the text the user can actually read.
+            --><button type="button" tabindex="0" aria-pressed="true" aria-label="Opvullen" class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900 flex-1"><i class="fa-light fa-arrows-maximize items-center justify-center"></i>
+                    <!--v-if-->
+                  </button><button type="button" tabindex="-1" aria-pressed="false" aria-label="Passend" class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900 flex-1"><i class="fa-light fa-arrows-minimize items-center justify-center"></i>
+                    <!--v-if-->
+                  </button><button type="button" tabindex="-1" aria-pressed="false" aria-label="Origineel" class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900 flex-1"><i class="fa-light fa-image items-center justify-center"></i>
+                    <!--v-if-->
+                  </button>
+                  <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-20 flex gap-1 p-1" style="clip-path: inset(0 100% 0 0 round 8px);"><span class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap flex-1 text-cornflower-blue-600"><i class="fa-light fa-arrows-maximize items-center justify-center"></i><!--v-if--></span><span class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap flex-1 text-cornflower-blue-600"><i class="fa-light fa-arrows-minimize items-center justify-center"></i><!--v-if--></span><span class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap flex-1 text-cornflower-blue-600"><i class="fa-light fa-image items-center justify-center"></i><!--v-if--></span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>"
+    `)
+  })
+
+  it('offers only the given subset', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: { modelValue: 'bg-cover', options: ['bg-cover', 'bg-contain'] },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Opvullen', 'Passend'])
+  })
+
+  // The subset is always shown in the canonical order, like the other editor
+  // molecules with `options`, whatever order the consumer passes.
+  it('shows the subset in the canonical order', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: { modelValue: 'bg-cover', options: ['bg-contain', 'bg-cover'] },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Opvullen', 'Passend'])
+  })
+
+  it('ignores duplicate and unknown values', () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: {
+        modelValue: 'bg-cover',
+        // An unknown value can still arrive from untyped consumer code.
+        options: ['bg-auto', 'bg-cover', 'bg-auto', 'bg-fill' as 'bg-auto'],
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Opvullen', 'Origineel'])
+  })
+
+  it('emits the class of a clicked option in a subset', async () => {
+    const wrapper = mount(EditorBackgroundSize, {
+      props: { modelValue: 'bg-cover', options: ['bg-auto', 'bg-cover'] },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['bg-auto']])
+  })
+
+  describe('bare', () => {
+    it('renders only the toolbar, named by the label, without a header', () => {
+      const wrapper = mount(EditorBackgroundSize, {
+        props: { modelValue: 'bg-cover', bare: true, label: 'Weergave' },
+      })
+
+      expect(wrapper.element.getAttribute('role')).toBe('toolbar')
+      expect(wrapper.attributes('aria-label')).toBe('Weergave')
+      expect(wrapper.find('p').exists()).toBe(false)
+      expect(wrapper.text()).toBe('')
+    })
+
+    it('keeps the Dutch default as the toolbar name', () => {
+      const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover', bare: true } })
+
+      expect(wrapper.attributes('aria-label')).toBe('Vulling')
+    })
+
+    it('still emits the clicked option', async () => {
+      const wrapper = mount(EditorBackgroundSize, {
+        props: { modelValue: 'bg-cover', bare: true, options: ['bg-cover', 'bg-auto'] },
+      })
+
+      expect(wrapper.findAll('button')).toHaveLength(2)
+      await wrapper.findAll('button')[1].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-auto']])
+    })
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorBackgroundSize, { props: { modelValue: 'bg-cover' } })
+
+    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_BACKGROUND_SIZE_OPTIONS', () => {
+  it('offers exactly the agreed options', () => {
+    expect(EDITOR_BACKGROUND_SIZE_OPTIONS).toEqual([
+      { token: 'cover' },
+      { token: 'contain' },
+      { token: 'auto' },
+    ])
+  })
+})

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

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorBlur from './EditorBlur.vue'
+import type { EditorBlurValue } from './EditorBlur.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Blur',
+  component: EditorBlur,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    switchable: { control: 'boolean' },
+    describedby: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorBlur>
+
+type Story = StoryObj<typeof EditorBlur>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorBlur },
+    setup() {
+      const blur = ref<EditorBlurValue>('backdrop-blur-md')
+      const enabled = ref(true)
+      return { args, blur, enabled }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorBlur v-bind="args" v-model="blur" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ blur }}</p>
+        <p class="small-normal text-gray-700">{{ enabled }}</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The group label is hidden but still names the steps. Checked in Chromium,
+ * where `sr-only` actually takes the label out of view.
+ */
+export const GroupLabelHidden: Story = {
+  render: Default.render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const toolbar = canvas.getByRole('toolbar', { name: 'Sterkte' })
+    const groupLabel = within(toolbar).getByText('Sterkte')
+
+    const { width, height } = groupLabel.getBoundingClientRect()
+    await expect(width * height).toBeLessThanOrEqual(1)
+    await expect(getComputedStyle(groupLabel).position).toBe('absolute')
+  },
+}
+
+export const NotSwitchable: Story = {
+  args: { switchable: false },
+  render: Default.render,
+}
+
+/**
+ * The consumer renders the hint itself and passes its id as `describedby`, so
+ * both the switch and the group of steps announce it.
+ */
+export const WithHint: Story = {
+  args: { describedby: 'blur-hint' },
+  render: (args) => ({
+    components: { EditorBlur },
+    setup() {
+      const blur = ref<EditorBlurValue>('backdrop-blur-md')
+      const enabled = ref(true)
+      return { args, blur, enabled }
+    },
+    template: `
+      <div>
+        <EditorBlur v-bind="args" v-model="blur" v-model:enabled="enabled" />
+        <p id="blur-hint" class="extra-small-normal text-gray-700">
+          Alleen zichtbaar als de groep een doorschijnende achtergrond heeft.
+        </p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const hint = 'Alleen zichtbaar als de groep een doorschijnende achtergrond heeft.'
+
+    await expect(canvas.getByRole('switch')).toHaveAccessibleDescription(hint)
+    await expect(canvas.getByRole('toolbar')).toHaveAccessibleDescription(hint)
+  },
+}
+
+/** Off and without a value: switching on writes `backdrop-blur-md`. */
+export const StartsOnMd: Story = {
+  render: (args) => ({
+    components: { EditorBlur },
+    setup() {
+      const blur = ref<EditorBlurValue>()
+      const enabled = ref(false)
+      return { args, blur, enabled }
+    },
+    template: `
+      <div>
+        <EditorBlur v-bind="args" v-model="blur" v-model:enabled="enabled" />
+        <p class="small-normal text-gray-700">{{ blur ?? 'geen waarde' }}</p>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('switch'))
+
+    await waitFor(() => expect(canvas.getByText('backdrop-blur-md')).toBeInTheDocument())
+  },
+}

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

@@ -0,0 +1,243 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorBlur, { EDITOR_BLUR_OPTIONS } from './EditorBlur.vue'
+import type { EditorBlurValue, NexxtEditorBlurProps } from './EditorBlur.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.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 names of the options, which are their visible text. */
+const optionNames = (wrapper: VueWrapper) =>
+  wrapper.findAll('button').map((button) => button.text())
+
+/** The option the toggle group is told to show as selected. */
+const selectedOption = (wrapper: VueWrapper) =>
+  wrapper.findComponent(NexxtToggleGroup).props('modelValue')
+
+/** The collapsing wrapper, found by the grid row it animates, not by styling. */
+const contentWrapper = (wrapper: VueWrapper) => wrapper.find('[class*="grid-rows-"]')
+
+/** The group of steps: ToggleGroup puts `role="toolbar"` on its root. */
+const toolbar = (wrapper: VueWrapper) => wrapper.get('[role="toolbar"]')
+
+describe('EditorBlur', () => {
+  // No assertions on typography utilities: copy is found by text or structure.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+    expect(wrapper.text()).toContain('Vervagen')
+  })
+
+  it('renders a button for each of the five steps, in order', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+    expect(optionNames(wrapper)).toEqual(['XS', 'S', 'M', 'L', 'XL'])
+  })
+
+  it('names the group of steps with the hidden Dutch default label', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+    const labelId = toolbar(wrapper).attributes('aria-labelledby')
+    const groupLabel = wrapper.get(`[id="${labelId}"]`)
+    expect(groupLabel.text()).toBe('Sterkte')
+    // Hiding it is ToggleGroup's `labelHidden`; visibility is checked in
+    // Chromium, in the GroupLabelHidden story.
+    expect(wrapper.findComponent(NexxtToggleGroup).props('labelHidden')).toBe(true)
+  })
+
+  it('renders a custom label and merges custom messages per key', () => {
+    const wrapper = mount(EditorBlur, {
+      props: {
+        modelValue: 'backdrop-blur-md',
+        label: 'Blur',
+        messages: { strength: 'Strength', xl: 'Max' },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Blur')
+    expect(wrapper.text()).not.toContain('Vervagen')
+    expect(wrapper.text()).toContain('Strength')
+    expect(optionNames(wrapper)).toEqual(['XS', 'S', 'M', 'L', 'Max'])
+  })
+
+  it('shows the class of the model as the selected one', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-xl' } })
+
+    expect(selectedOption(wrapper)).toBe('backdrop-blur-xl')
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked step', async () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await wrapper.findAll('button')[4].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['backdrop-blur-xs'],
+      ['backdrop-blur-xl'],
+    ])
+  })
+
+  it('follows the model when the parent changes it', async () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-sm' } })
+
+    await wrapper.setProps({ modelValue: 'backdrop-blur-lg' })
+
+    expect(selectedOption(wrapper)).toBe('backdrop-blur-lg')
+  })
+
+  it('shows md for a missing or unknown class', () => {
+    // A stored bare step or `backdrop-blur-2xl` gets past the types; the
+    // runtime fallback is md.
+    const bareStep = 'md' as unknown as EditorBlurValue
+    const unknown = 'backdrop-blur-2xl' as unknown as EditorBlurValue
+
+    expect(selectedOption(mount(EditorBlur))).toBe('backdrop-blur-md')
+    expect(selectedOption(mount(EditorBlur, { props: { modelValue: unknown } }))).toBe(
+      'backdrop-blur-md',
+    )
+    expect(selectedOption(mount(EditorBlur, { props: { modelValue: bareStep } }))).toBe(
+      'backdrop-blur-md',
+    )
+  })
+
+  it('emits update:enabled and leaves the step alone when switched off', async () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-lg', enabled: true } })
+
+    await wrapper.find('input[type="checkbox"]').setValue(false)
+
+    expect(wrapper.emitted('update:enabled')).toEqual([[false]])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('starts on md when switched on without a valid step', async () => {
+    const wrapper = mount(EditorBlur, { props: { enabled: false } })
+
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['backdrop-blur-md']])
+  })
+
+  it('writes nothing when enabled flips on while not switchable', async () => {
+    const wrapper = mount(EditorBlur, { props: { enabled: false, switchable: false } })
+
+    await wrapper.setProps({ enabled: true })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('starts on md when the parent switches it on without a valid step', async () => {
+    const wrapper = mount(EditorBlur, { props: { enabled: false } })
+
+    await wrapper.setProps({ enabled: true })
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['backdrop-blur-md']])
+  })
+
+  /** The props of a mount, models included, so every case in the table shares one type. */
+  type MountProps = NexxtEditorBlurProps & { modelValue?: EditorBlurValue; enabled?: boolean }
+
+  const unknownStep = 'backdrop-blur-2xl' as unknown as EditorBlurValue
+  const mountCases: [string, MountProps][] = [
+    ['missing', { enabled: true }],
+    ['unknown', { enabled: true, modelValue: unknownStep }],
+    ['missing, not switchable', { switchable: false }],
+  ]
+
+  it.each(mountCases)('writes nothing on mount with a %s step', async (_, props) => {
+    const wrapper = mount(EditorBlur, { props })
+    await wrapper.vm.$nextTick()
+
+    expect(selectedOption(wrapper)).toBe('backdrop-blur-md')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('keeps the steps active when not switchable, even with enabled false', () => {
+    const wrapper = mount(EditorBlur, {
+      props: { modelValue: 'backdrop-blur-md', switchable: false, enabled: false },
+    })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeUndefined()
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+
+  it('keeps a valid step when switched on', async () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-xs', enabled: false } })
+
+    await wrapper.setProps({ enabled: true })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('makes the steps inert when enabled is false', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md', enabled: false } })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeDefined()
+  })
+
+  it('keeps the steps interactive when enabled is true', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md', enabled: true } })
+
+    expect(contentWrapper(wrapper).attributes('inert')).toBeUndefined()
+  })
+
+  it('renders the switch by default', () => {
+    const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  it('renders no switch when switchable is false', () => {
+    const wrapper = mount(EditorBlur, {
+      props: { modelValue: 'backdrop-blur-md', switchable: false },
+    })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+
+  describe('describedby', () => {
+    it('sets aria-describedby on the switch and on the group of steps', () => {
+      const wrapper = mount(EditorBlur, {
+        props: { modelValue: 'backdrop-blur-md', describedby: 'blur-hint' },
+      })
+
+      expect(wrapper.get('[role="switch"]').attributes('aria-describedby')).toBe('blur-hint')
+      // On the element that carries the role, not on a wrapper around it.
+      expect(toolbar(wrapper).attributes('aria-describedby')).toBe('blur-hint')
+    })
+
+    it('still describes the group when the control is not switchable', () => {
+      const wrapper = mount(EditorBlur, {
+        props: { modelValue: 'backdrop-blur-md', describedby: 'blur-hint', switchable: false },
+      })
+
+      expect(toolbar(wrapper).attributes('aria-describedby')).toBe('blur-hint')
+    })
+
+    it('renders no aria-describedby anywhere without the prop', () => {
+      const wrapper = mount(EditorBlur, { props: { modelValue: 'backdrop-blur-md' } })
+
+      expect(wrapper.find('[aria-describedby]').exists()).toBe(false)
+    })
+  })
+})
+
+// The consumer derives its class matchers (`backdrop-blur-<token>`) from this
+// list, so the list is a contract: any change here changes what the app recognises.
+describe('EDITOR_BLUR_OPTIONS', () => {
+  it('offers exactly the agreed steps, in order', () => {
+    expect(EDITOR_BLUR_OPTIONS).toEqual([
+      { token: 'xs' },
+      { token: 'sm' },
+      { token: 'md' },
+      { token: 'lg' },
+      { token: 'xl' },
+    ])
+  })
+})