basalt-ui 1.26.0 → 1.28.0

package/src/content/slug.test.ts

@@ -1,62 +0,0 @@
-import { describe, expect, test } from 'bun:test'
-import { headingSlug, readingTime, SlugTracker } from './slug'
-
-describe('headingSlug', () => {
-  test('lowercases and hyphenates spaces', () => {
-    expect(headingSlug('Reading Dashboards')).toBe('reading-dashboards')
-  })
-
-  test('strips punctuation but keeps hyphens and word characters', () => {
-    expect(headingSlug('What is a "z-score"?')).toBe('what-is-a-z-score')
-  })
-
-  test('collapses repeated whitespace and trims edge hyphens', () => {
-    expect(headingSlug('  Too   Many   Spaces  ')).toBe('too-many-spaces')
-  })
-
-  test('handles unicode letters', () => {
-    expect(headingSlug('Café Résumé')).toBe('café-résumé')
-  })
-})
-
-describe('SlugTracker', () => {
-  test('returns the plain slug on first occurrence', () => {
-    const tracker = new SlugTracker()
-    expect(tracker.slug('Overview')).toBe('overview')
-  })
-
-  test('dedupes repeated headings with -1, -2 suffixes', () => {
-    const tracker = new SlugTracker()
-    expect(tracker.slug('Overview')).toBe('overview')
-    expect(tracker.slug('Overview')).toBe('overview-1')
-    expect(tracker.slug('Overview')).toBe('overview-2')
-  })
-
-  test('tracks slugs independently per instance', () => {
-    const a = new SlugTracker()
-    const b = new SlugTracker()
-    expect(a.slug('Setup')).toBe('setup')
-    expect(b.slug('Setup')).toBe('setup')
-  })
-})
-
-describe('readingTime', () => {
-  test('rounds up to the nearest whole minute', () => {
-    const words = Array.from({ length: 300 }, () => 'word').join(' ')
-    const result = readingTime(words)
-    expect(result.words).toBe(300)
-    expect(result.minutes).toBe(2)
-  })
-
-  test('returns 1 minute for short text', () => {
-    const result = readingTime('a short sentence')
-    expect(result.words).toBe(3)
-    expect(result.minutes).toBe(1)
-  })
-
-  test('returns 0 minutes for empty text', () => {
-    const result = readingTime('')
-    expect(result.words).toBe(0)
-    expect(result.minutes).toBe(0)
-  })
-})

package/src/controls/actions.test.tsx

@@ -1,252 +0,0 @@
-/**
- * `ActionGroup`'s fold and its mobile projection — the two behaviours that make `BarAction[]` data
- * rather than a `ReactNode` row (`docs/CONTROLS-SPEC.md` §2.1, laws C6/C7/C9).
- *
- * Both variants of the group are mounted at once (the swap is CSS, law C9), so every assertion here
- * scopes itself to one variant. A CSS module resolves to `''` under `bun test`, so the variants are
- * told apart by Mantine's own `visibleFrom`/`hiddenFrom` utility classes, which are stable public
- * API (`mantine-visible-from-sm` / `mantine-hidden-from-sm`).
- */
-import { MantineProvider } from '@mantine/core'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import type { ReactNode } from 'react'
-import {
-  ActionGroup,
-  BarActionRow,
-  BarExtrasProvider,
-  OverflowMenu,
-  barActionMobile,
-  globalActionMobile,
-} from './actions'
-import type { BarAction, BarExtras } from './actions'
-
-function renderGroup(props: Parameters<typeof ActionGroup>[0]) {
-  return render(
-    <MantineProvider>
-      <ActionGroup {...props} />
-    </MantineProvider>,
-  )
-}
-
-const desktop = () => document.querySelector('.mantine-visible-from-sm')
-const mobile = () => document.querySelector('.mantine-hidden-from-sm')
-
-const secondary = (n: number): BarAction[] =>
-  Array.from({ length: n }, (_, i) => ({ key: `s${i}`, label: `Second ${i}` }))
-
-describe('ActionGroup — desktop', () => {
-  test('the primary renders filled, the secondaries default', () => {
-    renderGroup({ primary: { key: 'new', label: 'New run' }, secondary: secondary(1) })
-    const row = desktop()
-    expect(row).not.toBeNull()
-    const primary = row?.querySelector('[data-variant="filled"]')
-    expect(primary?.textContent).toBe('New run')
-    expect(row?.querySelector('[data-variant="default"]')?.textContent).toBe('Second 0')
-  })
-
-  test('three secondaries render inline with no More menu', () => {
-    renderGroup({ secondary: secondary(3) })
-    const row = desktop()
-    expect(row?.querySelectorAll('[data-variant="default"]').length).toBe(3)
-    expect(row?.textContent).not.toContain('More')
-  })
-
-  test('a fourth secondary folds into ONE More menu instead of widening the row (law C7)', () => {
-    renderGroup({ secondary: secondary(5) })
-    const row = desktop()
-    // Three inline + the `More` trigger, which is itself a `default` button.
-    expect(row?.querySelectorAll('[data-variant="default"]').length).toBe(4)
-    expect(row?.textContent).toContain('More')
-    expect(screen.getAllByRole('button', { name: 'More' }).length).toBe(1)
-  })
-
-  test("a kind: 'menu' action never takes bar width — it folds even as the only secondary", () => {
-    renderGroup({
-      secondary: [{ key: 'more', kind: 'menu', label: 'Export as', items: secondary(2) }],
-    })
-    expect(desktop()?.textContent).toContain('More')
-  })
-})
-
-describe('ActionGroup — mobile', () => {
-  test('the primary rides the bar and the rest fold into one kebab', () => {
-    renderGroup({ primary: { key: 'new', label: 'New run' }, secondary: secondary(4) })
-    const row = mobile()
-    expect(row).not.toBeNull()
-    expect(row?.textContent).toContain('New run')
-    const kebabs = row?.querySelectorAll('[aria-label="More actions"]')
-    expect(kebabs?.length).toBe(1)
-  })
-
-  test('a primary WITH an icon becomes an icon button, named by its label', () => {
-    renderGroup({ primary: { key: 'new', label: 'New run', icon: <span>+</span> } })
-    const button = mobile()?.querySelector('[aria-label="New run"]')
-    expect(button).not.toBeNull()
-    // The label is the accessible name only — it is never painted beside the glyph.
-    expect(button?.textContent).toBe('+')
-  })
-
-  test('an icon-LESS primary keeps its label instead of drawing a first-letter avatar', () => {
-    // `N` for `New run` is an avatar: a glyph whose meaning has to be known in advance. The label is
-    // wider and says what the button does, and the breadcrumb beside it truncates to make room.
-    renderGroup({ primary: { key: 'new', label: 'New run' } })
-    const row = mobile()
-    expect(row?.textContent).toContain('New run')
-    expect(row?.textContent).not.toBe('N')
-  })
-
-  test("mobile: 'hidden' drops the action from the bar AND from the kebab", () => {
-    renderGroup({ secondary: [{ key: 'x', label: 'Nowhere', mobile: 'hidden' }] })
-    const row = mobile()
-    expect(row).toBeNull()
-    // Still on desktop, though — `mobile` only decides the small-viewport placement.
-    expect(desktop()?.textContent).toContain('Nowhere')
-  })
-
-  test("mobile: 'bar' promotes a secondary out of the kebab and onto the bar", () => {
-    renderGroup({ secondary: [{ key: 'live', label: 'Live', mobile: 'bar' }] })
-    // Icon-less, so it takes the labelled form — an ActionIcon with no icon would be an empty box.
-    expect(mobile()?.textContent).toContain('Live')
-    expect(mobile()?.querySelector('[aria-label="More actions"]')).toBeNull()
-  })
-
-  test("an icon-bearing mobile: 'bar' secondary is the icon form, named by its label", () => {
-    renderGroup({
-      secondary: [{ key: 'live', label: 'Live', mobile: 'bar', icon: <span>●</span> }],
-    })
-    expect(mobile()?.querySelector('[aria-label="Live"]')).not.toBeNull()
-  })
-})
-
-describe('the mobile placement law', () => {
-  test('a primary rides the bar, everything else folds', () => {
-    const action: BarAction = { key: 'a', label: 'A' }
-    expect(barActionMobile(action, true)).toBe('bar')
-    expect(barActionMobile(action, false)).toBe('more')
-  })
-
-  test('an explicit `mobile` wins over both defaults', () => {
-    expect(barActionMobile({ key: 'a', label: 'A', mobile: 'more' }, true)).toBe('more')
-    expect(barActionMobile({ key: 'a', label: 'A', mobile: 'bar' }, false)).toBe('bar')
-  })
-
-  test("a kind: 'menu' group is always a More row, never a bar slot", () => {
-    expect(barActionMobile({ key: 'm', kind: 'menu', label: 'M', items: [] }, true)).toBe('more')
-  })
-
-  test('the first two global actions ride the bar, the rest fold', () => {
-    const global = { key: 'g', node: null }
-    expect(globalActionMobile(global, 0)).toBe('bar')
-    expect(globalActionMobile(global, 1)).toBe('bar')
-    expect(globalActionMobile(global, 2)).toBe('more')
-    expect(globalActionMobile({ ...global, mobile: 'hidden' }, 0)).toBe('hidden')
-  })
-})
-
-describe('OverflowMenu', () => {
-  test('renders nothing for an empty action list — an empty home renders nothing (law C14)', () => {
-    render(
-      <MantineProvider>
-        <OverflowMenu actions={[]} />
-      </MantineProvider>,
-    )
-    expect(document.querySelector('button')).toBeNull()
-  })
-
-  test('the trigger is a labelled button on desktop and a named icon button as a kebab', () => {
-    const { unmount } = render(
-      <MantineProvider>
-        <OverflowMenu actions={secondary(1)} />
-      </MantineProvider>,
-    )
-    expect(screen.getByRole('button', { name: 'More' })).not.toBeNull()
-    unmount()
-
-    render(
-      <MantineProvider>
-        <OverflowMenu actions={secondary(1)} trigger="kebab" label="More actions" />
-      </MantineProvider>,
-    )
-    expect(screen.getByRole('button', { name: 'More actions' })).not.toBeNull()
-  })
-})
-
-/**
- * The `host` scoping (`BarActionRowProps.host`). The shell's `mobile: 'more'` global actions belong
- * to ONE kebab, and the leak that made this a law was that every `ActionGroup` read the context:
- * `PageBar.filtersEnd` and any consumer-mounted tier-2 group each grew a second kebab holding a
- * duplicate of the global node, and each took the claim that decides whether the shell renders its
- * own.
- */
-describe('shell kebab extras are scoped to the page bar', () => {
-  const GLOBAL_ROW: BarAction = { key: 'g', kind: 'custom', node: <span data-testid="global" /> }
-
-  function renderWithExtras(node: ReactNode) {
-    const claims: number[] = []
-    const extras: BarExtras = {
-      mobileMoreActions: [GLOBAL_ROW],
-      claimKebab: () => {
-        claims.push(1)
-        return () => claims.push(-1)
-      },
-    }
-    const result = render(
-      <MantineProvider>
-        <BarExtrasProvider value={extras}>{node}</BarExtrasProvider>
-      </MantineProvider>,
-    )
-    return { ...result, claims }
-  }
-
-  test('a public ActionGroup takes neither the global rows nor the claim', async () => {
-    const { claims } = renderWithExtras(
-      <ActionGroup secondary={[{ key: 'a', label: 'Own action' }]} />,
-    )
-    expect(claims).toHaveLength(0)
-    // Its own kebab exists (its secondary defaults to `more`) but holds only its own row.
-    fireEvent.click(screen.getByLabelText('More actions'))
-    await waitFor(() => expect(screen.getByRole('menuitem', { name: 'Own action' })).toBeDefined())
-    expect(screen.queryByTestId('global')).toBeNull()
-  })
-
-  test('the page-bar row-1 group DOES take them — it is the one instance entitled to', async () => {
-    const { claims } = renderWithExtras(
-      <BarActionRow host="page" secondary={[{ key: 'a', label: 'Own action' }]} />,
-    )
-    expect(claims).toEqual([1])
-    fireEvent.click(screen.getByLabelText('More actions'))
-    await waitFor(() => expect(screen.getByTestId('global')).toBeDefined())
-  })
-
-  test("viewport: 'desktop' renders no mobile half at all — no kebab, no claim", () => {
-    const { claims } = renderWithExtras(
-      <BarActionRow host="page" viewport="desktop" secondary={[{ key: 'a', label: 'Row 2' }]} />,
-    )
-    expect(claims).toHaveLength(0)
-    expect(document.querySelector('.mantine-hidden-from-sm')).toBeNull()
-    expect(desktop()?.textContent).toContain('Row 2')
-  })
-
-  test('mobileOnly actions join the mobile kebab without widening the desktop row', async () => {
-    renderWithExtras(
-      <BarActionRow
-        host="page"
-        secondary={[{ key: 'a', label: 'Own action' }]}
-        mobileOnly={[{ key: 'metrics', label: 'Manage metrics' }]}
-      />,
-    )
-    expect(desktop()?.textContent).not.toContain('Manage metrics')
-    fireEvent.click(screen.getByLabelText('More actions'))
-    await waitFor(() =>
-      expect(screen.getByRole('menuitem', { name: 'Manage metrics' })).toBeDefined(),
-    )
-  })
-
-  test("a mobileOnly action marked 'bar' renders inline on the mobile bar", () => {
-    renderWithExtras(
-      <BarActionRow host="page" mobileOnly={[{ key: 'm', label: 'Metrics', mobile: 'bar' }]} />,
-    )
-    expect(mobile()?.textContent).toContain('Metrics')
-  })
-})

package/src/controls/actions.type-guard.test.ts

@@ -1,63 +0,0 @@
-/**
- * Compile-time proof that law C6's "exactly one primary" is a TYPE fact, not a runtime check.
- *
- * `ActionGroupProps.primary` is singular, so a second one is unwritable: an array is rejected, and
- * a duplicate object key is a tsc error in its own right. This mirrors the
- * `apps/playground/src/*.type-guard.ts` convention (one `@ts-expect-error` per bad line, proven by
- * `tsc --noEmit`) but lives beside the type, exactly as `agent-chat/virtualize.type-guard.test.ts`
- * does — and for the same packaging reason: a bare `*.type-guard.ts` under `src/` would be picked
- * up by tsup's build glob and ship an unused fixture, while `*.test.ts` is excluded from it.
- */
-import { describe, expect, test } from 'bun:test'
-import type { ActionGroupProps, BarAction, GlobalAction } from './actions'
-
-function accept(props: ActionGroupProps): ActionGroupProps {
-  return props
-}
-
-function acceptAction(action: BarAction): BarAction {
-  return action
-}
-
-function acceptGlobal(action: GlobalAction): GlobalAction {
-  return action
-}
-
-// ── Valid — must type-check with no error ─────────────────────────────────────
-
-accept({})
-accept({ primary: { key: 'a', label: 'A' } })
-accept({ primary: { key: 'a', label: 'A' }, secondary: [{ key: 'b', label: 'B' }] })
-accept({ secondary: [{ key: 'm', kind: 'menu', label: 'Export as', items: [] }] })
-accept({ primary: { key: 'c', kind: 'custom', node: null } })
-acceptAction({ key: 'a', label: 'A', mobile: 'hidden', danger: true })
-acceptGlobal({ key: 'g', node: null, mobile: 'bar' })
-
-// ── Invalid — each MUST be a tsc error, one directive per bad line ────────────
-
-const TWO: BarAction[] = [
-  { key: 'a', label: 'A' },
-  { key: 'b', label: 'B' },
-]
-// @ts-expect-error a SECOND primary is unwritable: `primary` is one action, never a list
-accept({ primary: TWO })
-// @ts-expect-error `secondary` is the list; a single action is not one
-accept({ secondary: { key: 'b', label: 'B' } })
-// @ts-expect-error a `kind: 'menu'` group has no mobile placement — it always folds
-acceptAction({ key: 'm', kind: 'menu', label: 'M', items: [], mobile: 'bar' })
-// @ts-expect-error a `kind: 'custom'` action carries a node, never a label
-acceptAction({ key: 'c', kind: 'custom', node: null, label: 'C' })
-// @ts-expect-error `label` is required on a button-shaped action
-acceptAction({ key: 'a' })
-// @ts-expect-error 'sheet' is not a mobile placement
-acceptAction({ key: 'a', label: 'A', mobile: 'sheet' })
-// @ts-expect-error a GlobalAction is data, not a bare node
-acceptGlobal({ node: null })
-
-describe('ActionGroupProps (type-guard)', () => {
-  test('is a compile-time-only fixture — see the @ts-expect-error directives above', () => {
-    // No runtime behavior to assert: the proof is that this file type-checks at all. A single
-    // trivial assertion keeps this a normal bun:test file rather than an empty-suite oddity.
-    expect(true).toBe(true)
-  })
-})

package/src/controls/control-group.test.tsx

@@ -1,229 +0,0 @@
-/**
- * `ControlGroup` — the joined-control primitive (`docs/CONTROLS-SPEC.md` §3), and `ActionGroup`'s
- * derived use of it.
- *
- * The gap it closes: every consumer that wanted a `‹ Today ›` stepper hand-built one — a `Group
- * gap={0}` plus per-child `radius` and `style={{ marginLeft: -1 }}`, restated on each page, each
- * getting the focus-ring z-index wrong in its own way. `basalt/shadow-basalt-export` now names the
- * three words that fork tends to arrive under (`ButtonGroup`, `ButtonRow`, `JoinedButtons`).
- *
- * The GEOMETRY is CSS, and CSS-module hashes are unavailable under `bun test`, so it is asserted
- * from the module text (the idiom `filter-set.test.tsx` and `theme/layout-rhythm-css.test.ts` use).
- * The PARTITION — which adjacent actions get joined — is real logic and is rendered.
- */
-import { ActionIcon, Button, MantineProvider } from '@mantine/core'
-import { render } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import type { ReactNode } from 'react'
-import { ActionGroup } from './actions'
-import type { BarAction } from './actions'
-import { ControlGroup } from './control-group'
-
-const CSS = readFileSync(join(import.meta.dir, 'controls.module.css'), 'utf8')
-const JOINED = CSS.slice(CSS.indexOf('/* ── ControlGroup'))
-
-function mount(node: ReactNode) {
-  return render(<MantineProvider>{node}</MantineProvider>)
-}
-
-const desktop = () => document.querySelector('.mantine-visible-from-sm')
-const mobile = () => document.querySelector('.mantine-hidden-from-sm')
-
-/** The joined boxes inside one variant of the row. */
-function groups(root: Element | null): Element[] {
-  return [...(root?.querySelectorAll('[data-gap]') ?? [])]
-}
-
-function Glyph(): ReactNode {
-  return <svg viewBox="0 0 24 24" />
-}
-
-describe('the joined box', () => {
-  test('renders one element carrying the gap mode, defaulting to "none"', () => {
-    const { container } = mount(
-      <ControlGroup>
-        <Button variant="default">Today</Button>
-      </ControlGroup>,
-    )
-    expect(container.querySelector('[data-gap]')?.getAttribute('data-gap')).toBe('none')
-  })
-
-  test('gap="tight" is the un-joined mode, for a set that must stay separately pressable', () => {
-    const { container } = mount(
-      <ControlGroup gap="tight">
-        <Button variant="default">A</Button>
-        <Button variant="default">B</Button>
-      </ControlGroup>,
-    )
-    expect(container.querySelector('[data-gap]')?.getAttribute('data-gap')).toBe('tight')
-    expect(JOINED).toContain("[data-gap='tight'] {\n  gap: var(--vx-space-control-gap")
-  })
-
-  test('joined children collapse their two adjacent borders into one', () => {
-    // 2px down the middle reads as a gap someone forgot to close, not as a divider.
-    expect(JOINED).toContain("[data-gap='none'] > * + * {\n  margin-inline-start: -1px;")
-  })
-
-  test('the radius lives on the outer ends only — that is what makes three boxes one box', () => {
-    expect(JOINED).toContain("[data-gap='none'] > *:not(:first-child):not(:last-child) {")
-    expect(JOINED).toContain('border-radius: 0;')
-    expect(JOINED).toContain("[data-gap='none'] > *:first-child:not(:only-child) {")
-    expect(JOINED).toContain("[data-gap='none'] > *:last-child:not(:only-child) {")
-  })
-
-  test('a one-child group keeps its normal shape — :only-child is excluded on both ends', () => {
-    // A conditional render that dropped two of three children must not lose half its corners.
-    expect(JOINED).toContain(':first-child:not(:only-child)')
-    expect(JOINED).toContain(':last-child:not(:only-child)')
-  })
-
-  test('the internal hairline is drawn here, because the default border is transparent', () => {
-    // `cssVariablesResolver` points `--mantine-color-default-border` at transparent on purpose
-    // (DESIGN-SPEC §8). The 12%-ink value is `.pill`'s, so a joined pill row and a joined button row
-    // read as one family.
-    expect(JOINED).toContain("[data-gap='none'] > [data-variant='default'] {")
-    expect(JOINED).toContain('color-mix(in srgb, var(--vx-ink) 12%, transparent)')
-  })
-
-  test('a filled child keeps its fill edge — the border rule is scoped to the default variant', () => {
-    expect(JOINED).not.toMatch(/\[data-gap='none'\] > \* \{\s*border-color/)
-  })
-
-  test('hover/focus/active raise the child so its shared edge paints whole', () => {
-    expect(JOINED).toContain("[data-gap='none'] > *:focus-visible,")
-    expect(JOINED).toContain('z-index: 1;')
-    expect(JOINED).toContain('position: relative;')
-  })
-
-  test('the group never wraps — a joined set that broke mid-box is worse than an overflow', () => {
-    const rule = JOINED.slice(
-      JOINED.indexOf('.group {'),
-      JOINED.indexOf('}', JOINED.indexOf('.group {')),
-    )
-    expect(rule).toContain('flex-wrap: nowrap')
-    expect(rule).toContain('flex: none')
-  })
-
-  test('it adds no role and no label — a joined LOOK is not a semantic group', () => {
-    const { container } = mount(
-      <ControlGroup>
-        <ActionIcon variant="default" aria-label="Previous">
-          <Glyph />
-        </ActionIcon>
-        <Button variant="default">Today</Button>
-      </ControlGroup>,
-    )
-    const box = container.querySelector('[data-gap]')
-    expect(box?.hasAttribute('role')).toBe(false)
-    expect(box?.hasAttribute('aria-label')).toBe(false)
-  })
-})
-
-describe('ActionGroup joins what belongs together, and nothing else', () => {
-  const stepper: BarAction[] = [
-    { key: 'prev', label: 'Previous period', icon: <Glyph />, group: true },
-    { key: 'today', label: 'Today', group: true },
-    { key: 'next', label: 'Next period', icon: <Glyph />, group: true },
-  ]
-
-  test('a run of group:true secondaries becomes ONE joined box on desktop', () => {
-    mount(<ActionGroup secondary={stepper} />)
-    const joined = groups(desktop())
-    expect(joined.length).toBe(1)
-    expect(joined[0]?.querySelectorAll('button').length).toBe(3)
-  })
-
-  test('a joined member with an icon renders icon-only, its label demoted to the a11y name', () => {
-    // `‹ Today ›` is ONE control whose middle segment names it; the arrows' content is their
-    // direction. Labelled, the same three actions measured 304px against 118px in Chrome.
-    mount(<ActionGroup secondary={stepper} />)
-    const row = desktop()
-    const prev = row?.querySelector('[aria-label="Previous period"]')
-    expect(prev).not.toBeNull()
-    expect(prev?.textContent).toBe('')
-    // The one member with no icon keeps its label — the rule reads what the caller supplied.
-    expect(row?.textContent).toBe('Today')
-  })
-
-  test('a joined set with NO icons keeps every label — the icon-only rule is not a width policy', () => {
-    mount(
-      <ActionGroup
-        secondary={[
-          { key: 'abs', label: 'Absolute', group: true },
-          { key: 'rate', label: 'Rate', group: true },
-        ]}
-      />,
-    )
-    expect(groups(desktop()).length).toBe(1)
-    expect(desktop()?.textContent).toBe('AbsoluteRate')
-  })
-
-  test('independent secondaries are NOT joined — the default row is unchanged', () => {
-    mount(
-      <ActionGroup
-        secondary={[
-          { key: 'export', label: 'Export CSV' },
-          { key: 'accounts', label: 'Accounts', icon: <Glyph /> },
-        ]}
-      />,
-    )
-    expect(groups(desktop()).length).toBe(0)
-  })
-
-  test('a non-group action between two group ones splits the run in two', () => {
-    // Two runs of one is the same row it was before — the group flag is per-member on purpose, so a
-    // set that forgets one member degrades to the old row instead of joining the wrong things.
-    mount(
-      <ActionGroup
-        secondary={[
-          { key: 'prev', label: 'Prev', group: true },
-          { key: 'loose', label: 'Loose' },
-          { key: 'next', label: 'Next', group: true },
-        ]}
-      />,
-    )
-    expect(groups(desktop()).length).toBe(0)
-  })
-
-  test('adjacent ICON-ONLY entries join on the MOBILE bar without any flag', () => {
-    // Below `sm` an icon-bearing action renders as an `ActionIcon` and nothing else, so two in a row
-    // are two 30px squares with a gap — three boxes' worth of border for two actions, exactly where
-    // width is scarcest.
-    mount(
-      <ActionGroup
-        secondary={[
-          { key: 'a', label: 'Filter', icon: <Glyph />, mobile: 'bar' },
-          { key: 'b', label: 'Sort', icon: <Glyph />, mobile: 'bar' },
-        ]}
-      />,
-    )
-    expect(groups(mobile()).length).toBe(1)
-    // …and NOT on desktop, where the same two actions are labelled buttons that are not related.
-    expect(groups(desktop()).length).toBe(0)
-  })
-
-  test('the mobile PRIMARY is never joined to a sibling — a fill edge against a border edge', () => {
-    mount(
-      <ActionGroup
-        primary={{ key: 'save', label: 'Save', icon: <Glyph /> }}
-        secondary={[{ key: 'a', label: 'Filter', icon: <Glyph />, mobile: 'bar' }]}
-      />,
-    )
-    expect(groups(mobile()).length).toBe(0)
-  })
-
-  test('a kind:"custom" entry breaks the run — basalt does not draw that node', () => {
-    mount(
-      <ActionGroup
-        secondary={[
-          { key: 'prev', label: 'Prev', group: true },
-          { key: 'chip', kind: 'custom', node: <span>live</span> },
-          { key: 'next', label: 'Next', group: true },
-        ]}
-      />,
-    )
-    expect(groups(desktop()).length).toBe(0)
-  })
-})