@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.stories.ts

@@ -0,0 +1,266 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import EditorSettingsBlock from './EditorSettingsBlock.vue'
+import EditorSettingsGroup from '../EditorSettingsGroup/EditorSettingsGroup.vue'
+
+/** Rendered width of a `size="sm"` switch track (`w-9`), in pixels. */
+const SM_TRACK_WIDTH = 36
+
+/**
+ * A wrapping label used to squash the switch, because the track sat in a flex
+ * row without `shrink-0`. Measured in a real browser: jsdom has no layout.
+ */
+const expectFullWidthTrack = (canvasElement: HTMLElement) => {
+  const track = canvasElement.querySelector('label > span.relative')
+
+  expect(track).not.toBeNull()
+  expect(track!.getBoundingClientRect().width).toBe(SM_TRACK_WIDTH)
+}
+
+/**
+ * The collapsing wrapper, found by the grid row it animates rather than by any
+ * styling class, so restyling the block cannot quietly break these assertions.
+ */
+const contentWrapper = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[class*="grid-rows-"]') as HTMLElement
+
+export default {
+  title: 'Components/Editor Components/Atoms/Editor Settings Block',
+  component: EditorSettingsBlock,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'One labelled setting in the editor sidebar, optionally collapsible via a switch. The block draws no separator of its own: the consumer groups and divides blocks on the wrapper, e.g. `divide-y divide-gray-200`.',
+      },
+    },
+  },
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    switchable: { control: 'boolean' },
+    modelValue: { control: 'boolean' },
+  },
+  args: {
+    label: 'Achtergrond',
+    switchable: false,
+  },
+} satisfies Meta<typeof EditorSettingsBlock>
+
+type Story = StoryObj<typeof EditorSettingsBlock>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorSettingsBlock },
+    setup: () => ({ args }),
+    template: `
+      <EditorSettingsBlock v-bind="args">
+        <p class="small-normal text-gray-700">Deze instelling staat altijd aan.</p>
+      </EditorSettingsBlock>
+    `,
+  }),
+  // The `-mx-1` / `px-1` pair that keeps a focus ring from being clipped must
+  // cancel out: slot content stays aligned with the label, and the widened
+  // clipping box may not push the block past its container.
+  play: ({ canvasElement }) => {
+    const label = canvasElement.querySelector('p')!
+    const block = label.parentElement!.parentElement!
+    const content = canvasElement.querySelectorAll('p')[1]
+    const clip = contentWrapper(canvasElement).firstElementChild!
+
+    expect(content.getBoundingClientRect().left).toBe(label.getBoundingClientRect().left)
+    expect(clip.getBoundingClientRect().width).toBe(block.getBoundingClientRect().width + 8)
+    expect(canvasElement.scrollWidth).toBe(canvasElement.clientWidth)
+  },
+}
+
+export const Switchable: Story = {
+  args: { switchable: true },
+  render: (args) => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const enabled = ref(true)
+      return { args, enabled }
+    },
+    template: `
+      <EditorSettingsBlock v-bind="args" v-model="enabled">
+        <p class="small-normal text-gray-700">Zet de switch uit om dit blok in te klappen.</p>
+      </EditorSettingsBlock>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    expectFullWidthTrack(canvasElement)
+
+    const toggle = within(canvasElement).getByRole('switch')
+    const content = contentWrapper(canvasElement)
+
+    expect(content).toHaveClass('grid-rows-[1fr]')
+    expect(content).not.toHaveAttribute('inert')
+
+    await userEvent.click(toggle)
+    await waitFor(() => {
+      expect(content).toHaveClass('grid-rows-[0fr]')
+      expect(content).toHaveAttribute('inert')
+    })
+
+    await userEvent.click(toggle)
+    await waitFor(() => {
+      expect(content).toHaveClass('grid-rows-[1fr]')
+      expect(content).not.toHaveAttribute('inert')
+    })
+  },
+}
+
+export const SwitchableClosed: Story = {
+  args: { switchable: true },
+  render: (args) => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const enabled = ref(false)
+      return { args, enabled }
+    },
+    template: `
+      <EditorSettingsBlock v-bind="args" v-model="enabled">
+        <p class="small-normal text-gray-700">Deze content is gemount maar ingeklapt.</p>
+      </EditorSettingsBlock>
+    `,
+  }),
+}
+
+export const LongLabel: Story = {
+  args: {
+    switchable: true,
+    label: 'Achtergrondafbeelding en overlaykleur van de headersectie',
+  },
+  render: (args) => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const enabled = ref(true)
+      return { args, enabled }
+    },
+    template: `
+      <EditorSettingsBlock v-bind="args" v-model="enabled">
+        <p class="small-normal text-gray-700">Het label loopt door over meerdere regels.</p>
+      </EditorSettingsBlock>
+    `,
+  }),
+  // Same assertion as Switchable: a wrapping label must not change the track.
+  play: ({ canvasElement }) => expectFullWidthTrack(canvasElement),
+}
+
+// The block draws no separator of its own; the wrapper divides the blocks,
+// the way the app does.
+export const Stacked: Story = {
+  render: () => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const logo = ref(true)
+      const footer = ref(false)
+      return { logo, footer }
+    },
+    template: `
+      <div class="divide-y divide-gray-200">
+        <EditorSettingsBlock label="Titel">
+          <p class="small-normal text-gray-700">Deze instelling staat altijd aan.</p>
+        </EditorSettingsBlock>
+        <EditorSettingsBlock label="Logo" switchable v-model="logo">
+          <p class="small-normal text-gray-700">Toon het makelaarslogo linksboven.</p>
+        </EditorSettingsBlock>
+        <EditorSettingsBlock label="Voettekst" switchable v-model="footer">
+          <p class="small-normal text-gray-700">Toon de contactgegevens onderaan.</p>
+        </EditorSettingsBlock>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Two groups of blocks: the outer wrapper divides the groups, and the blocks
+ * inside a group share no separator.
+ */
+export const Grouped: Story = {
+  render: () => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const shadow = ref(false)
+      return { shadow }
+    },
+    template: `
+      <div class="divide-y divide-gray-200">
+        <div data-testid="group">
+          <EditorSettingsBlock label="Lettertype">
+            <p class="small-normal text-gray-700">Kies het lettertype van de kop.</p>
+          </EditorSettingsBlock>
+          <EditorSettingsBlock label="Regelhoogte">
+            <p class="small-normal text-gray-700">Ruimte tussen de regels.</p>
+          </EditorSettingsBlock>
+        </div>
+        <div data-testid="group">
+          <EditorSettingsBlock label="Achtergrond">
+            <p class="small-normal text-gray-700">Kleur achter de sectie.</p>
+          </EditorSettingsBlock>
+          <EditorSettingsBlock label="Schaduw" switchable v-model="shadow">
+            <p class="small-normal text-gray-700">Schaduw onder de sectie.</p>
+          </EditorSettingsBlock>
+        </div>
+      </div>
+    `,
+  }),
+  // Measured in a real browser. Tailwind v4 draws `divide-y` as a bottom border
+  // on every child but the last, so only the first group carries one; no block
+  // inside either group draws a border.
+  play: ({ canvasElement }) => {
+    const groups = within(canvasElement).getAllByTestId('group')
+    const borderWidths = (element: Element) => {
+      const style = getComputedStyle(element)
+      return [style.borderTopWidth, style.borderBottomWidth]
+    }
+
+    expect(borderWidths(groups[0])).toEqual(['0px', '1px'])
+    expect(borderWidths(groups[1])).toEqual(['0px', '0px'])
+    for (const block of groups.flatMap((group) => [...group.children])) {
+      expect(borderWidths(block)).toEqual(['0px', '0px'])
+    }
+  },
+}
+
+export const EmptyContent: Story = {
+  args: { switchable: true, label: 'Watermerk' },
+  render: (args) => ({
+    components: { EditorSettingsBlock },
+    setup() {
+      const enabled = ref(true)
+      return { args, enabled }
+    },
+    template: `<EditorSettingsBlock v-bind="args" v-model="enabled" />`,
+  }),
+}
+
+/**
+ * Inside a group the block takes only `pt-4`: the group owns the line and the
+ * bottom space, so two settings sit 16px apart instead of 32.
+ */
+export const InGroup: Story = {
+  render: () => ({
+    components: { EditorSettingsBlock, EditorSettingsGroup },
+    template: `
+      <EditorSettingsGroup label="Achtergrond">
+        <EditorSettingsBlock label="Kleur">
+          <p class="small-normal text-gray-700">Kleurkiezer</p>
+        </EditorSettingsBlock>
+        <EditorSettingsBlock label="Afbeelding">
+          <p data-testid="second" class="small-normal text-gray-700">Afbeeldingkiezer</p>
+        </EditorSettingsBlock>
+      </EditorSettingsGroup>
+    `,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const firstContent = canvas.getByText('Kleurkiezer').getBoundingClientRect()
+    const secondLabel = canvas.getByText('Afbeelding').getBoundingClientRect()
+
+    // The content wrapper's pb-1 plus the next block's pt-4.
+    expect(secondLabel.top - firstContent.bottom).toBe(20)
+  },
+}

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.test.ts

@@ -0,0 +1,421 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import EditorSettingsBlock from './EditorSettingsBlock.vue'
+import EditorSettingsGroup from '../EditorSettingsGroup/EditorSettingsGroup.vue'
+
+const slots = { default: '<p>Block content</p>' }
+
+describe('EditorSettingsBlock', () => {
+  // Deliberately no assertions on typography utilities anywhere in this file:
+  // the label is selected by structure or by text, so restyling the header
+  // never turns these tests red.
+  // The consumer groups and divides blocks on the wrapper, so the block itself
+  // may not draw a separator in either mode.
+  it.each([false, true])('puts no border classes on the root (switchable: %s)', (switchable) => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable },
+      slots,
+    })
+
+    expect(wrapper.classes().filter((name) => /(^|:)border(-|$)/.test(name))).toEqual([])
+    expect(wrapper.classes()).toContain('py-4')
+  })
+
+  it('renders the label in a paragraph when it is not switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' }, slots })
+
+    expect(wrapper.find('p').text()).toBe('Achtergrond')
+  })
+
+  it('renders the label inside the switch label when it is switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+
+    expect(wrapper.find('label span').text()).toBe('Achtergrond')
+    expect(wrapper.find('label').text()).toContain('Achtergrond')
+  })
+
+  it('does not render a checkbox when it is not switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' }, slots })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+
+  it('keeps the content open and not inert when it is not switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' }, slots })
+    const content = wrapper.find('div.grid')
+
+    expect(content.classes()).toContain('grid-rows-[1fr]')
+    expect(content.attributes('inert')).toBeUndefined()
+  })
+
+  it('ignores modelValue false when it is not switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', modelValue: false },
+      slots,
+    })
+    const content = wrapper.find('div.grid')
+
+    expect(content.classes()).toContain('grid-rows-[1fr]')
+    expect(content.attributes('inert')).toBeUndefined()
+  })
+
+  it('does not animate the content when it is not switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' }, slots })
+
+    expect(wrapper.find('div.grid').classes()).not.toContain('transition-[grid-template-rows]')
+  })
+
+  it('animates the content when it is switchable', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+
+    expect(wrapper.find('div.grid').classes()).toEqual(
+      expect.arrayContaining(['transition-[grid-template-rows]', 'motion-reduce:transition-none']),
+    )
+  })
+
+  it('checks the switch and opens the content when modelValue is true', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: true },
+      slots,
+    })
+    const content = wrapper.find('div.grid')
+
+    expect((wrapper.find('input[type="checkbox"]').element as HTMLInputElement).checked).toBe(true)
+    expect(content.classes()).toContain('grid-rows-[1fr]')
+    expect(content.attributes('inert')).toBeUndefined()
+  })
+
+  it('collapses and inerts the content when modelValue is false', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: false },
+      slots,
+    })
+    const content = wrapper.find('div.grid')
+
+    expect((wrapper.find('input[type="checkbox"]').element as HTMLInputElement).checked).toBe(false)
+    expect(content.classes()).toContain('grid-rows-[0fr]')
+    expect(content.attributes('inert')).toBeDefined()
+  })
+
+  it('keeps collapsed slot content mounted', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: false },
+      slots,
+    })
+
+    expect(wrapper.find('div.grid').text()).toContain('Block content')
+  })
+
+  it('emits update:modelValue when the switch is toggled', async () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: false },
+      slots,
+    })
+
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[true]])
+  })
+
+  it('defaults the model to true', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+
+    expect((wrapper.find('input[type="checkbox"]').element as HTMLInputElement).checked).toBe(true)
+    expect(wrapper.find('div.grid').attributes('inert')).toBeUndefined()
+  })
+
+  it('does not render a content wrapper without slot content', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+    })
+
+    expect(wrapper.find('div.grid').exists()).toBe(false)
+  })
+
+  it('stretches the switch label across the header row', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+    const header = wrapper.find('label').element.parentElement!
+
+    expect(header.className).toContain('[&>label]:w-full')
+    expect(header.querySelector(':scope > label')).not.toBeNull()
+  })
+
+  // The gap between label and track lives on the Switch's own <label>, not on
+  // the header: the header has exactly one child in both modes, so a `gap` on
+  // the header would never apply.
+  it('puts the header gap on the switch label instead of the header', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+    const header = wrapper.find('label').element.parentElement!
+
+    expect(header.className).toContain('[&>label]:gap-3')
+    expect(header.children).toHaveLength(1)
+  })
+
+  it('reacts to modelValue changing after mount', async () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: true },
+      slots,
+    })
+
+    await wrapper.setProps({ modelValue: false })
+
+    expect(wrapper.find('div.grid').attributes('inert')).toBeDefined()
+    expect(wrapper.find('div.grid').classes()).toContain('grid-rows-[0fr]')
+
+    await wrapper.setProps({ modelValue: true })
+
+    expect(wrapper.find('div.grid').attributes('inert')).toBeUndefined()
+    expect(wrapper.find('div.grid').classes()).toContain('grid-rows-[1fr]')
+  })
+
+  it('reacts to switchable changing after mount', async () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: false, modelValue: false },
+      slots,
+    })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+    expect(wrapper.find('div.grid').attributes('inert')).toBeUndefined()
+
+    await wrapper.setProps({ switchable: true })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    expect(wrapper.find('div.grid').attributes('inert')).toBeDefined()
+    expect(wrapper.find('div.grid').classes()).toContain('grid-rows-[0fr]')
+
+    await wrapper.setProps({ switchable: false })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+    expect(wrapper.find('div.grid').attributes('inert')).toBeUndefined()
+    expect(wrapper.find('div.grid').classes()).toContain('grid-rows-[1fr]')
+  })
+
+  it('sets describedby as aria-describedby on the switch input', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, describedby: 'hint' },
+      slots,
+    })
+
+    expect(wrapper.get('[role="switch"]').attributes('aria-describedby')).toBe('hint')
+  })
+
+  it('renders no aria-describedby on the switch without describedby', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true },
+      slots,
+    })
+
+    expect(wrapper.get('[role="switch"]').attributes('aria-describedby')).toBeUndefined()
+  })
+})
+
+// Outside a NexxtEditorSettingsGroup the block must render exactly what it did
+// before groups existed: other consumers of the library rely on its `py-4` and
+// its markup. These snapshots were taken from the block before the group
+// context was added, so any drift outside a group shows up here.
+describe('EditorSettingsBlock outside a group', () => {
+  it('renders the stacked block unchanged', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' }, slots })
+
+    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">Achtergrond</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">
+              <p>Block content</p>
+            </div>
+          </div>
+        </div>
+      </div>"
+    `)
+  })
+
+  it('renders the switchable block unchanged', () => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable: true, modelValue: false },
+      slots,
+    })
+
+    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"><label class="inline-flex cursor-pointer items-center gap-2"><span class="grow text-left small-normal text-gray-900">Achtergrond</span>
+            <!--
+            \`shrink-0\`: the track has a fixed pixel size, so letting flex shrink it
+            squashes the toggle the moment a sibling label wraps onto a second line.
+          --><span class="relative inline-block shrink-0 h-5 w-9"><!--
+              \`role="switch"\` on a native checkbox: it is on/off rather than
+              selected/unselected, and the checked state is still the input's own, so
+              no \`aria-checked\` is set -- the browser derives it from the checkbox.
+            --><input type="checkbox" role="switch" class="peer sr-only"><span class="absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-cornflower-blue-500 border-gray-500 bg-gray-200"><span class="absolute rounded-full bg-white transition-transform duration-400 top-0.5 left-0.5 h-3.5 w-3.5"></span><span class="absolute flex items-center justify-center rounded-full bg-white transition-transform duration-300 top-0.5 left-0.5 h-3.5 w-3.5"><!--v-if--></span></span></span>
+            <!--v-if-->
+          </label></div>
+        <div inert="true" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none">
+          <!--
+              \`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-0 transition-opacity duration-200 ease-in-out motion-reduce:transition-none">
+            <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+            <div class="px-1 pt-1.5 pb-1">
+              <p>Block content</p>
+            </div>
+          </div>
+        </div>
+      </div>"
+    `)
+  })
+
+  it('renders a block without content unchanged', () => {
+    const wrapper = mount(EditorSettingsBlock, { props: { label: 'Achtergrond' } })
+
+    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">Achtergrond</p>
+        </div>
+        <!--v-if-->
+      </div>"
+    `)
+  })
+})
+
+describe('EditorSettingsBlock in a group', () => {
+  /** A block inside a group, as one app so the group context reaches it. */
+  const inGroup = (blockProps: Record<string, unknown>) =>
+    mount(
+      defineComponent({
+        components: { EditorSettingsGroup, EditorSettingsBlock },
+        setup: () => ({ blockProps }),
+        template: `
+          <EditorSettingsGroup label="Lijn">
+            <EditorSettingsBlock label="Uitlijning" v-bind="blockProps">
+              <button type="button">Optie</button>
+            </EditorSettingsBlock>
+          </EditorSettingsGroup>
+        `,
+      }),
+    ).findComponent(EditorSettingsBlock)
+
+  it('stacks: label above, content in the collapsing wrapper, pt-4 on the root', () => {
+    const block = inGroup({})
+
+    expect(block.find('[class*="grid-rows-"]').element.contains(block.get('button').element)).toBe(
+      true,
+    )
+    expect((block.element as HTMLElement).classList).toEqual(
+      expect.objectContaining({ value: 'pt-4' }),
+    )
+  })
+
+  it('keeps an ordinary label gray-900 under a labelled group', () => {
+    const block = inGroup({})
+
+    expect(block.get('p').classes()).toContain('text-gray-900')
+    expect(block.get('p').classes()).not.toContain('text-cornflower-blue-700')
+  })
+
+  it('takes no layout prop: a stray one falls through as a plain attribute', () => {
+    const block = inGroup({ layout: 'inline' })
+
+    expect(block.props()).not.toHaveProperty('layout')
+    expect(block.find('[class*="grid-rows-"]').exists()).toBe(true)
+  })
+})
+
+describe('EditorSettingsBlock label colour', () => {
+  /** A block as the only setting of a group without a label, so its label is promoted. */
+  const promoted = (blockProps: Record<string, unknown> = {}) =>
+    mount(
+      defineComponent({
+        components: { EditorSettingsGroup, EditorSettingsBlock },
+        setup: () => ({ blockProps }),
+        template: `
+          <EditorSettingsGroup>
+            <EditorSettingsBlock label="Uitlijning" v-bind="blockProps">Optie</EditorSettingsBlock>
+          </EditorSettingsGroup>
+        `,
+      }),
+    ).findComponent(EditorSettingsBlock)
+
+  it.each([false, true])('stays gray-900 outside a group (switchable: %s)', (switchable) => {
+    const wrapper = mount(EditorSettingsBlock, {
+      props: { label: 'Achtergrond', switchable },
+      slots,
+    })
+    const label = wrapper.get(switchable ? 'label span' : 'p')
+
+    expect(label.classes()).toContain('text-gray-900')
+    expect(label.classes()).not.toContain('text-cornflower-blue-700')
+  })
+
+  it('takes the group title colour when promoted to a heading', () => {
+    const heading = promoted().get('h3')
+
+    expect(heading.classes()).toContain('text-cornflower-blue-700')
+    expect(heading.classes()).not.toContain('text-gray-900')
+  })
+
+  it('takes the group title colour when promoted inside the switch label', () => {
+    const label = promoted({ switchable: true }).get('label span')
+
+    expect(label.classes()).toContain('text-cornflower-blue-700')
+    expect(label.classes()).not.toContain('text-gray-900')
+  })
+})