basalt-ui 1.27.0 → 1.29.0

package/src/theme/divider-law.test.ts

@@ -1,259 +0,0 @@
-/**
- * The divider law — a mechanical inventory of every HORIZONTAL hairline basalt draws
- * (`docs/DESIGN-SPEC.md` §8: depth is a shadow, and a border-as-border is reserved for a layout
- * divider).
- *
- * The bug this file exists to prevent, measured on the playground's `Controls (mobile)` page at
- * 390px: the page carried five rules in its first 320px — a table box whose top edge sat directly
- * under the table's own `WidgetHeader`, its bottom edge on the last row's own hairline, and a
- * section rule 8px from the next one. None of them divided anything. Two rules stack into a band,
- * and a band under a heading says "the heading is not part of what follows", which is the opposite
- * of what a section header is for.
- *
- * So the law has two halves and this file pins both:
- *
- * 1. **A header never draws a rule under itself** — in the CHROME lane (shell, controls, dashboard,
- *    data, widget-header, theme). The reader already has the heading's type scale, its weight and
- *    the space below it; a line adds a fourth channel saying the same thing and costs a band.
- * 2. **A between-rows family always drops its LAST rule** — the line after the final row is an
- *    outer border pretending to be a separator, and it is the line that lands on top of whatever
- *    frame the container already has.
- *
- * The guard is an INVENTORY, not a pattern match: every horizontal hairline in every CSS module has
- * to be listed below with a `kind` and a reason, so a seventh one added next month fails here and
- * gets classified rather than shipping unexamined. That is the same idiom `theme/border-coverage.test.ts`
- * uses for Mantine's stock borders, applied to the ones basalt writes itself.
- *
- * Not in scope, deliberately: the `border` SHORTHAND (a box around a control or a card — that is an
- * edge, not a rule, and `border-coverage.test.ts` owns it), vertical hairlines (a column rule
- * divides two regions by construction), and Mantine's own `inset 0 -1px 0` redraw of a STICKY table
- * head's `border-bottom`, which is a row line drawn as a shadow because `border-collapse: collapse`
- * drops borders on sticky cells — it appears and disappears with `withRowBorders`, so it is the same
- * line every other row gets and not a header rule.
- */
-import { describe, expect, test } from 'bun:test'
-import { Glob } from 'bun'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-
-const SRC = join(import.meta.dir, '..')
-
-type Hairline = { readonly file: string; readonly selector: string; readonly decl: string }
-
-/**
- * Every `border-{top,bottom,block-start,block-end}` and every 1px inset `box-shadow` in a CSS
- * module, with the selector it sits under. A hand-rolled scanner rather than a regex per file: the
- * SELECTOR is half the classification (`.header` vs `.rows > *:not(:last-child)` are the two
- * opposite verdicts), and a regex over declarations alone cannot see it.
- */
-function scanHairlines(): { rules: Hairline[]; drops: Hairline[] } {
-  const rules: Hairline[] = []
-  const drops: Hairline[] = []
-  const files = [...new Glob('**/*.module.css').scanSync({ cwd: SRC })].sort()
-  for (const file of files) {
-    const css = readFileSync(join(SRC, file), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
-    const stack: string[] = []
-    let buf = ''
-    for (const ch of css) {
-      if (ch === '{') {
-        stack.push(buf.trim().replace(/\s+/g, ' '))
-        buf = ''
-        continue
-      }
-      if (ch === '}') {
-        stack.pop()
-        buf = ''
-        continue
-      }
-      if (ch !== ';') {
-        buf += ch
-        continue
-      }
-      const decl = buf.trim().replace(/\s+/g, ' ')
-      buf = ''
-      const border = /^border-(?:top|bottom|block-start|block-end):\s*(.+)$/.exec(decl)
-      const selector = stack.join(' >> ')
-      if (border !== null) {
-        ;(border[1] === 'none' ? drops : rules).push({ file, selector, decl })
-        continue
-      }
-      if (decl.startsWith('box-shadow:') && decl.includes('inset') && /\b-?1px\b/.test(decl)) {
-        rules.push({ file, selector, decl })
-      }
-    }
-  }
-  return { rules, drops }
-}
-
-/**
- * `between-rows` — the line sits BETWEEN two members of a list and the family drops its last one.
- * `region-boundary` — it separates two layout regions that are not a header and its content (the
- *   mobile bar and the page it floats over, an article's body and its footer).
- * `prose-typography` — an AUTHORED document, not app chrome: an `<hr>` the author wrote, the rule
- *   under an article's `h2`, a code block's filename bar. A document's conventions are the reader's
- *   expectations there (`docs/CONTENT-SPEC.md`), and `content/**` is out of the chrome lane for
- *   exactly that reason. Nothing in this kind may appear outside `content/`.
- */
-type Kind = 'between-rows' | 'region-boundary' | 'prose-typography'
-
-const LEDGER: readonly { file: string; selector: string; kind: Kind; why: string }[] = [
-  {
-    file: 'shell/app-mobile-nav.module.css',
-    selector: '.bar',
-    kind: 'region-boundary',
-    why: 'The mobile bar is a fixed region floating over a scrolling page — the rule is the only thing that says the page ends there, and it is the boundary between two regions, not a header and its content.',
-  },
-  {
-    file: 'controls/controls.module.css',
-    selector:
-      '.sheetOption + .sheetOption, .sheetDisclosureBody + .sheetOption, .sheetOption + .sheetDisclosureBody',
-    kind: 'between-rows',
-    why: "The filter sheet's option rows. Written as an adjacent-sibling rule so the FIRST row has no top line — the group label above it is a header and gets no rule (C15).",
-  },
-  {
-    file: 'controls/controls.module.css',
-    selector: '.sheetRow',
-    kind: 'between-rows',
-    why: 'A 44px sheet row. Paired with `.sheetRow:last-child { border-bottom: none }` below, which the last-rule assertion checks.',
-  },
-  {
-    file: 'dashboard/settings-section.module.css',
-    selector: '.rows > *:not(:last-child)',
-    kind: 'between-rows',
-    why: 'A settings list. The `:not(:last-child)` IS the last-rule drop, written into the selector rather than as a second rule.',
-  },
-  {
-    file: 'content/article-layout.module.css',
-    selector: '.header',
-    kind: 'prose-typography',
-    why: "An article's masthead rule — the title-block convention of a printed document, and the one place a reader expects a line under a heading.",
-  },
-  {
-    file: 'content/article-layout.module.css',
-    selector: '.footer',
-    kind: 'region-boundary',
-    why: 'Prev/next navigation below the article body — two regions, and the rule is above the footer rather than under a heading.',
-  },
-  {
-    file: 'content/guide.module.css',
-    selector: '.footer',
-    kind: 'region-boundary',
-    why: 'Same shape as the article footer: the boundary between a document and the navigation after it.',
-  },
-  {
-    file: 'content/prose.module.css',
-    selector: '.root hr',
-    kind: 'prose-typography',
-    why: 'An `<hr>` the AUTHOR wrote in their markdown. basalt does not get to drop a divider the document asked for.',
-  },
-  {
-    file: 'content/prose.module.css',
-    selector: '.root.article h2',
-    kind: 'prose-typography',
-    why: "The `article` prose variant's section rule — a long-form document convention, scoped to that variant and never applied to app chrome.",
-  },
-  {
-    file: 'content/code-block.module.css',
-    selector: '.header',
-    kind: 'prose-typography',
-    why: "A code block's filename/language bar. The block is a quoted artifact inside a document, and the bar is its frame's top row rather than a section heading.",
-  },
-]
-
-const CHROME_LANES = ['shell/', 'controls/', 'dashboard/', 'data/', 'widget-header/', 'theme/']
-
-function isChrome(file: string): boolean {
-  return CHROME_LANES.some((lane) => file.startsWith(lane))
-}
-
-const { rules, drops } = scanHairlines()
-
-describe('every horizontal hairline is inventoried and classified', () => {
-  test('no hairline exists that the ledger does not name', () => {
-    const listed = new Set(LEDGER.map((e) => `${e.file}|${e.selector}`))
-    const unlisted = rules
-      .filter((r) => !listed.has(`${r.file}|${r.selector}`))
-      .map((r) => `${r.file} → ${r.selector} { ${r.decl} }`)
-    // Do NOT silence this by adding an entry with a hand-wave. Decide which `kind` the line is: a
-    // `between-rows` family (then add the last-rule drop too), a `region-boundary`, or — only inside
-    // `content/**` — `prose-typography`. A rule under a heading in the chrome lane is none of the
-    // three, and the fix is to delete it and let the type scale and the space do the work.
-    expect(unlisted).toEqual([])
-  })
-
-  test('the ledger names nothing that no longer exists', () => {
-    const found = new Set(rules.map((r) => `${r.file}|${r.selector}`))
-    expect(LEDGER.filter((e) => !found.has(`${e.file}|${e.selector}`)).map((e) => e.file)).toEqual(
-      [],
-    )
-  })
-
-  test('`prose-typography` is confined to content/ — app chrome has no authored-document lane', () => {
-    expect(
-      LEDGER.filter((e) => e.kind === 'prose-typography' && !e.file.startsWith('content/')).map(
-        (e) => `${e.file} → ${e.selector}`,
-      ),
-    ).toEqual([])
-  })
-
-  test('every ledger entry carries a real reason', () => {
-    expect(LEDGER.filter((e) => e.why.length < 40).map((e) => e.selector)).toEqual([])
-  })
-})
-
-describe('a header never draws a rule under itself in the chrome lane', () => {
-  // The five class names the chrome lane uses for "the heading row of a thing" — `WidgetHeader`'s
-  // root/titleRow/subtitle, `Section`'s, the filter sheet's, the table toolbar's. A `border-bottom`
-  // on any of them is the exact regression this describe block exists for.
-  const HEADER_SELECTOR =
-    /^\.(?:root|header|titleRow|title|subtitle|sheetHeader|sheetTitle|toolbar|thead|head)\b/
-
-  test('no chrome-lane hairline sits under a header-shaped selector', () => {
-    const offenders = rules
-      .filter((r) => isChrome(r.file) && HEADER_SELECTOR.test(r.selector))
-      .map((r) => `${r.file} → ${r.selector} { ${r.decl} }`)
-    expect(offenders).toEqual([])
-  })
-
-  test('the chrome lane holds ONLY between-rows and region-boundary lines', () => {
-    const kinds = LEDGER.filter((e) => isChrome(e.file)).map((e) => e.kind)
-    expect([...new Set(kinds)].sort()).toEqual(['between-rows', 'region-boundary'])
-  })
-})
-
-describe('a between-rows family drops its last rule', () => {
-  for (const entry of LEDGER.filter((e) => e.kind === 'between-rows')) {
-    test(`${entry.file} → ${entry.selector}`, () => {
-      // Either the selector itself excludes the last member (`:not(:last-child)`, or an
-      // adjacent-sibling combinator, which draws the line as the SECOND row's top edge and so has no
-      // trailing rule by construction), or the module carries an explicit `border: none` drop.
-      const selfLimiting = /:not\(:last-child\)|\+/.test(entry.selector)
-      const dropped = drops.some(
-        (d) => d.file === entry.file && d.selector.startsWith(`${entry.selector}:last`),
-      )
-      expect(selfLimiting || dropped).toBe(true)
-    })
-  }
-
-  test('the themed Table drops its last body row — the rule that used to land on the outer box', () => {
-    // `BasaltDataTable`'s `withTableBorder` went to `false` by default in the same minor (see
-    // `data/data-table.test.tsx`); while both shipped, the two lines sat on top of each other and the
-    // doubling hid which of them was drawing it. `tbody` scoped so a `tfoot` totals row keeps the
-    // BETWEEN rule above it.
-    const css = readFileSync(join(SRC, 'theme/controls.module.css'), 'utf8')
-    expect(css).toContain('html .tableRoot tbody tr:last-of-type')
-    expect(drops).toContainEqual({
-      file: 'theme/controls.module.css',
-      selector: 'html .tableRoot tbody tr:last-of-type',
-      decl: 'border-bottom: none',
-    })
-  })
-
-  test('the themed Accordion drops its last item — the same law, already shipped', () => {
-    expect(drops).toContainEqual({
-      file: 'theme/controls.module.css',
-      selector: '.accordionItem:last-of-type',
-      decl: 'border-bottom: none',
-    })
-  })
-})

package/src/theme/fonts-option.test.ts

@@ -1,75 +0,0 @@
-/**
- * `createBasaltTheme`'s `{ fonts }` option — a pure pass-through onto `theme.other.basaltFonts`
- * (no derivation math, unlike `{ derive }`). See `derive-theme.test.ts` for the derive-config
- * equivalent this mirrors.
- */
-import { describe, expect, test } from 'bun:test'
-import { baseTheme, createBasaltTheme } from './index'
-import type { BasaltFontsConfig } from './index'
-
-describe('the default path carries no theme.other.basaltFonts', () => {
-  test('createBasaltTheme() carries no basaltFonts', () => {
-    expect(createBasaltTheme().other?.['basaltFonts']).toBeUndefined()
-  })
-
-  test('createBasaltTheme(undefined, {}) carries no basaltFonts', () => {
-    expect(createBasaltTheme(undefined, {}).other?.['basaltFonts']).toBeUndefined()
-  })
-})
-
-describe('an empty fonts object is treated as absent — stays on the static baseTheme fast path', () => {
-  test('createBasaltTheme(undefined, { fonts: {} }) returns the identical baseTheme reference', () => {
-    expect(createBasaltTheme(undefined, { fonts: {} })).toBe(baseTheme)
-  })
-
-  test('carries no theme.other.basaltFonts', () => {
-    expect(createBasaltTheme(undefined, { fonts: {} }).other?.['basaltFonts']).toBeUndefined()
-  })
-
-  test('an all-undefined-keys fonts object is also treated as absent', () => {
-    // Deliberately constructs a key explicitly set to undefined — exactOptionalPropertyTypes
-    // correctly forbids this as a static shape, but the whole point of the test is verifying
-    // createBasaltTheme's RUNTIME handling of that wire shape (a caller spreading in an
-    // undefined value), hence the cast.
-    const fonts = { sans: undefined } as unknown as BasaltFontsConfig
-    const theme = createBasaltTheme(undefined, { fonts })
-    expect(theme).toBe(baseTheme)
-    expect(theme.other?.['basaltFonts']).toBeUndefined()
-  })
-})
-
-describe('a fonts option graduates onto the theme', () => {
-  test('exposes the exact fonts object on theme.other.basaltFonts', () => {
-    const theme = createBasaltTheme(undefined, { fonts: { sans: 'Inter, sans-serif' } })
-    expect(theme.other?.['basaltFonts']).toEqual({ sans: 'Inter, sans-serif' })
-  })
-
-  test('accepts all three slots', () => {
-    const fonts = {
-      sans: 'Inter, sans-serif',
-      head: 'Poppins, sans-serif',
-      mono: 'Fira Code, monospace',
-    }
-    const theme = createBasaltTheme(undefined, { fonts })
-    expect(theme.other?.['basaltFonts']).toEqual(fonts)
-  })
-
-  test('combines with a non-default derive config without dropping either', () => {
-    const theme = createBasaltTheme(undefined, {
-      derive: { accent: '#16a34a' },
-      fonts: { sans: 'Inter, sans-serif' },
-    })
-    expect(theme.other?.['basaltFonts']).toEqual({ sans: 'Inter, sans-serif' })
-    expect(theme.other?.['basaltDerive']).toBeDefined()
-  })
-})
-
-describe('consumer overrides still win on top of a fonts option', () => {
-  test('an explicit other.basaltFonts override replaces it', () => {
-    const theme = createBasaltTheme(
-      { other: { basaltFonts: { sans: 'Georgia, serif' } } },
-      { fonts: { sans: 'Inter, sans-serif' } },
-    )
-    expect(theme.other?.['basaltFonts']).toEqual({ sans: 'Georgia, serif' })
-  })
-})

package/src/theme/icon-slot.test.tsx

@@ -1,275 +0,0 @@
-/**
- * `IconSlot` — the one icon box (`docs/CONTROLS-SPEC.md` §3).
- *
- * The bug this file exists to prevent: a consumer's inline `<svg width="24" height="24">` handed to
- * a basalt control's `icon` prop landed in Mantine's `leftSection`, which is a bare `flex` box with
- * no size of its own. The glyph painted at 24px inside a 30px `ctl` button, sat on the parent's text
- * baseline (so it hung low of the optical centre by the line box's descender), and set the row's
- * height. Measured in Chrome on the playground's header: the `Accounts` secondary read visibly low
- * and left of centre.
- *
- * Two halves, because neither alone would hold. The CSS-TEXT half pins the mechanism (a fixed square
- * box, `100%` on the glyph, `display: block`) — CSS-module class hashes are unavailable under
- * `bun test`, so the declarations themselves are read from the file, the same idiom
- * `controls/filter-set.test.tsx` and `theme/layout-rhythm-css.test.ts` use. The RENDER half pins that
- * every home named by the spec actually routes its `icon` through the slot, found by the
- * `data-basalt-icon` marker attribute rather than by a class.
- */
-import { 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 '../controls/actions'
-import { FilterPill } from '../controls/filter-pill'
-import { SyncButton } from '../controls/sync-button'
-import { WidgetHeader } from '../widget-header/widget-header'
-import { IconSlot } from './icon-slot'
-
-const ICON_SLOT_CSS = readFileSync(join(import.meta.dir, 'icon-slot.module.css'), 'utf8')
-const CONTROLS_CSS = readFileSync(join(import.meta.dir, '../controls/controls.module.css'), 'utf8')
-const WIDGET_HEADER_CSS = readFileSync(
-  join(import.meta.dir, '../widget-header/widget-header.module.css'),
-  'utf8',
-)
-
-/** A consumer glyph that declares its OWN geometry — the exact shape that used to leak through. */
-function OversizedGlyph(): ReactNode {
-  return (
-    <svg width={24} height={24} viewBox="0 0 24 24" data-testid="glyph">
-      <circle cx={12} cy={12} r={10} />
-    </svg>
-  )
-}
-
-/** A consumer glyph with no `width`/`height` and no `viewBox` — paints 300×150 unstyled. */
-function UnsizedGlyph(): ReactNode {
-  return (
-    <svg data-testid="glyph">
-      <circle cx={8} cy={8} r={8} />
-    </svg>
-  )
-}
-
-function slots(container: HTMLElement): HTMLElement[] {
-  return [...container.querySelectorAll<HTMLElement>('[data-basalt-icon]')]
-}
-
-/** The slot wrapping the marked glyph — asserts the glyph is a DIRECT child, which the `> svg`
- *  selector requires to bite. */
-function slotAround(container: HTMLElement): HTMLElement | null {
-  const glyph = container.querySelector('[data-testid="glyph"]')
-  const parent = glyph?.parentElement ?? null
-  return parent !== null && parent.hasAttribute('data-basalt-icon') ? parent : null
-}
-
-describe('the box is declared once, in CSS, and cannot be set at a call site', () => {
-  test('the slot is a fixed square off --vx-space-icon-size with a 16px fallback', () => {
-    expect(ICON_SLOT_CSS).toContain('width: var(--vx-space-icon-size, 1rem)')
-    expect(ICON_SLOT_CSS).toContain('height: var(--vx-space-icon-size, 1rem)')
-  })
-
-  test('the slot never participates in its row’s flex sizing', () => {
-    expect(ICON_SLOT_CSS).toContain('flex: none')
-    expect(ICON_SLOT_CSS).toContain('display: inline-flex')
-    expect(ICON_SLOT_CSS).toContain('align-items: center')
-    expect(ICON_SLOT_CSS).toContain('justify-content: center')
-  })
-
-  test('the glyph is restated at 100% and taken off the baseline — the two halves of "centred"', () => {
-    const rule = ICON_SLOT_CSS.slice(ICON_SLOT_CSS.indexOf('.slot > svg'))
-    expect(rule).toContain('width: 100%')
-    expect(rule).toContain('height: 100%')
-    expect(rule).toContain('display: block')
-    // Presentation attributes lose to CSS, which is the whole mechanism — a 24px, a 14px and an
-    // attribute-less SVG all resolve to the box.
-    expect(rule).toContain('object-fit: contain')
-  })
-
-  test('`img` and `picture` icons get the same box — an icon set is as likely to be a sprite', () => {
-    expect(ICON_SLOT_CSS).toContain('.slot > img')
-    expect(ICON_SLOT_CSS).toContain('.slot > picture')
-  })
-
-  test('IconSlot has no size prop — a call site cannot pick a geometry', () => {
-    const source = readFileSync(join(import.meta.dir, 'icon-slot.tsx'), 'utf8')
-    const props = source.slice(
-      source.indexOf('export type IconSlotProps'),
-      source.indexOf('export function IconSlot'),
-    )
-    expect(props).not.toContain('size')
-    // `children` + `className` and nothing else.
-    expect(props.match(/readonly \w+\??:/g)).toEqual(['readonly children:', 'readonly className?:'])
-  })
-
-  test('a home sizes the slot by overriding the box VAR, never by sizing the glyph', () => {
-    // The trailing pill affordance is 14px and the widget-tier heading icon is 14px. Both get there
-    // through `--vx-space-icon-size`; neither may reintroduce a per-component `> svg` size rule,
-    // which is the duplication that let `BarAction` ship with no box at all.
-    expect(CONTROLS_CSS).toContain('--vx-space-icon-size: 0.875rem')
-    expect(WIDGET_HEADER_CSS).toContain('--vx-space-icon-size: 0.875rem')
-    expect(WIDGET_HEADER_CSS).toContain('--vx-space-icon-size: 1rem')
-    expect(CONTROLS_CSS).not.toMatch(/\.pillIcon\s*>\s*svg/)
-    expect(WIDGET_HEADER_CSS).not.toMatch(/\.icon\s*>\s*svg/)
-  })
-})
-
-describe('every home named by the spec routes `icon` through the slot', () => {
-  test('a BarAction secondary — an oversized consumer SVG lands inside the slot', () => {
-    const { container } = render(
-      <MantineProvider>
-        <ActionGroup
-          secondary={[{ key: 'accounts', label: 'Accounts', icon: <OversizedGlyph /> }]}
-        />
-      </MantineProvider>,
-    )
-    // Both viewport variants mount (law C9), so the glyph appears twice; every occurrence is slotted.
-    const glyphs = [...container.querySelectorAll('[data-testid="glyph"]')]
-    expect(glyphs.length).toBeGreaterThan(0)
-    for (const glyph of glyphs) {
-      expect(glyph.parentElement?.hasAttribute('data-basalt-icon')).toBe(true)
-    }
-  })
-
-  test('a BarAction PRIMARY too — the mobile icon-only form is the same box', () => {
-    const { container } = render(
-      <MantineProvider>
-        <ActionGroup primary={{ key: 'save', label: 'Save as report', icon: <UnsizedGlyph /> }} />
-      </MantineProvider>,
-    )
-    const glyphs = [...container.querySelectorAll('[data-testid="glyph"]')]
-    expect(glyphs.length).toBeGreaterThan(0)
-    for (const glyph of glyphs) {
-      expect(glyph.parentElement?.hasAttribute('data-basalt-icon')).toBe(true)
-    }
-  })
-
-  test('an OverflowMenu row — the fold is a home too', () => {
-    const { container } = render(
-      <MantineProvider>
-        <ActionGroup
-          secondary={[
-            { key: 'a', label: 'A' },
-            { key: 'b', label: 'B' },
-            { key: 'c', label: 'C' },
-            { key: 'd', label: 'D', icon: <OversizedGlyph /> },
-          ]}
-        />
-      </MantineProvider>,
-    )
-    // The `More` dropdown mounts lazily, so assert the fold exists and its trigger is present; the
-    // ROW's slotting is covered by the source guard below, which reads the same code path.
-    expect(container.textContent).toContain('More')
-  })
-
-  test('a FilterPill — the leading glyph is slotted (every enum filter renders through it)', () => {
-    const { container } = render(
-      <MantineProvider>
-        <FilterPill label="EUR" icon={<OversizedGlyph />} />
-      </MantineProvider>,
-    )
-    expect(slotAround(container)).not.toBeNull()
-  })
-
-  test('a FilterPill’s trailing affordance is slotted too, at the 14px box', () => {
-    const { container } = render(
-      <MantineProvider>
-        <FilterPill label="EUR" />
-      </MantineProvider>,
-    )
-    // The `⇅` affordance is basalt's own glyph and still goes through the slot — the box is the
-    // slot's on every icon in the tier, framework-drawn or consumer-passed.
-    expect(slots(container).length).toBe(1)
-  })
-
-  test('a WidgetHeader — tier="widget"', () => {
-    const { container } = render(
-      <WidgetHeader tier="widget" title="Active users" icon={<OversizedGlyph />} />,
-    )
-    expect(slotAround(container)).not.toBeNull()
-  })
-
-  test('a WidgetHeader — tier="section" (and StatCard, which forwards `icon` to it)', () => {
-    const { container } = render(
-      <WidgetHeader tier="section" title="Funnel & retention" icon={<UnsizedGlyph />} />,
-    )
-    expect(slotAround(container)).not.toBeNull()
-  })
-
-  test('a SyncButton — basalt’s own glyph obeys the same box', () => {
-    const { container } = render(
-      <MantineProvider>
-        <SyncButton scope="page" syncing={false} onSync={() => {}} />
-      </MantineProvider>,
-    )
-    expect(slots(container).length).toBeGreaterThan(0)
-  })
-})
-
-describe('the slot is decorative and queryable, by construction', () => {
-  test('aria-hidden is unconditional — the control carries the name, never the icon', () => {
-    const { container } = render(
-      <IconSlot>
-        <OversizedGlyph />
-      </IconSlot>,
-    )
-    expect(container.querySelector('[data-basalt-icon]')?.getAttribute('aria-hidden')).toBe('true')
-  })
-
-  test('a home’s className is composed ONTO the slot, never in place of it', () => {
-    const { container } = render(
-      <IconSlot className="home-colour">
-        <OversizedGlyph />
-      </IconSlot>,
-    )
-    // The module hash is '' under `bun test`, so the assertion is that the home's class survived
-    // alongside whatever the module resolves to — i.e. it is appended, not substituted.
-    expect(container.querySelector('[data-basalt-icon]')?.className).toContain('home-colour')
-  })
-})
-
-/**
- * The recurrence guard. Every `leftSection`/`rightSection` in the control tier that carries a
- * CALLER-supplied icon must route it through `IconSlot` — this is what makes a seventh control
- * added next month fail here instead of shipping an un-boxed glyph, which is exactly how
- * `BarAction` shipped.
- *
- * Scoped to the files that own an `icon` prop in the tier the spec governs. `src/shell/app-sidebar.tsx`
- * and `src/shell/app-mobile-nav.tsx` are deliberately out of scope: a nav row's icon column is sized
- * by the sidebar's own rhythm rules, not by the control tier, and folding them in is a separate
- * change with its own visual budget.
- */
-describe('no control in the tier may hand a caller’s icon straight to a section slot', () => {
-  const TIER_FILES = [
-    '../controls/actions.tsx',
-    '../controls/filter-pill.tsx',
-    '../controls/sync-button.tsx',
-    '../shell/sidebar-blocks.tsx',
-  ] as const
-
-  for (const rel of TIER_FILES) {
-    test(`${rel} routes every icon-bearing section through IconSlot`, () => {
-      const source = readFileSync(join(import.meta.dir, rel), 'utf8')
-      const offenders: string[] = []
-      for (const match of source.matchAll(/(left|right)Section[:=]\s*([^,\n]*)/g)) {
-        const raw = match[2] ?? ''
-        // A bare identifier (`leftSection: lead`) is resolved one level to its `const` initialiser,
-        // so a slot built a line above still counts. One level only — anything deeper than that is
-        // indirection a reader could not follow either.
-        const bare = /^([A-Za-z_$][\w$]*)\s*\}?\)?,?$/.exec(raw.trim())
-        const declared =
-          bare === null
-            ? undefined
-            : new RegExp(`\\bconst ${bare[1]}\\b[^\\n]*(?:\\n[^\\n]*){0,3}`).exec(source)?.[0]
-        const value = declared ?? raw
-        // Only the icon-bearing sites are in scope — a `rightSection` holding a count badge or a
-        // `<Text>` meta string is not an icon and has no box to pin.
-        if (!/icon|glyph|lead/i.test(value)) continue
-        if (value.includes('IconSlot')) continue
-        offenders.push(match[0].trim())
-      }
-      expect(offenders).toEqual([])
-    })
-  }
-})