@awarebydefault/display-case 1.0.0

package/src/ui/design-system/components/showcase/A11yPanel.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import type { A11yViolation } from '../../../../index'
+import { DcTestIds } from '../../../test-ids'
+import { IconButton } from '../controls/IconButton'
+import { Eyebrow } from './Eyebrow'
+import { ImpactTag, impactRank } from './ImpactTag'
+
+/**
+ * Display Case — A11yPanel
+ * The stage's accessibility verdict for the variant on the stage. Four states:
+ * `'pending'` while a scan is in flight (a calm, pulsing "Scanning…" bar),
+ * `'unavailable'` when the scan prerequisite can't run, an empty array for a
+ * clean pass (green bar), or the violations (danger bar + a collapsible list,
+ * ordered worst-first with an {@link ImpactTag}). Only the violations state has a
+ * body to expand/collapse — the others say everything in the single header bar.
+ * Pass `onRescan` to show the ⟳ re-scan control.
+ *
+ * Height-capped + internally scrollable, with a sticky header so the verdict and
+ * controls never scroll away. Padding lives on the head and body (not the
+ * section) so the sticky header's background spans edge-to-edge while scrolling.
+ */
+
+export interface A11yPanelProps {
+  /** The active variant's verdict: `'pending'`, `'unavailable'`, `[]` (clean),
+   *  or the violations. */
+  violations: A11yViolation[] | 'pending' | 'unavailable'
+  /** How the resolved verdict animates in. `'cascade'` (the verdict just resolved
+   *  from a live scan): violation rows fade + rise with a per-row stagger.
+   *  `'all'` (default — already scanned, e.g. navigated to a cached variant):
+   *  the verdict fades in at once, like the stage and tweaks panel. */
+  reveal?: 'cascade' | 'all'
+  /** Re-run the audit for the viewed variant. When omitted (a static exhibit
+   *  that doesn't wire it), the ⟳ re-scan control is hidden. */
+  onRescan?: () => void
+  /** Snap the accent/status colour instead of easing it. Set while the panel is
+   *  mid-navigation crossfade (faded out) so the new exhibit's verdict colour is
+   *  in place before it fades back in, rather than easing the old colour across
+   *  the fade. The colour ease stays on for in-place state changes. */
+  instantColor?: boolean
+}
+
+export function A11yPanel({
+  violations,
+  reveal = 'all',
+  onRescan,
+  instantColor,
+}: A11yPanelProps) {
+  // Show/hide is a local UI concern (no need to persist like the docs panel).
+  // Only the violations list collapses; the other states are a single bar.
+  const [open, setOpen] = useState(true)
+  const list = Array.isArray(violations) ? violations : []
+  const pending = violations === 'pending'
+  const unavailable = violations === 'unavailable'
+  const passing = Array.isArray(violations) && violations.length === 0
+  const collapsible = list.length > 0
+  let state: 'pending' | 'unavailable' | 'pass' | 'fail'
+  if (pending) state = 'pending'
+  else if (unavailable) state = 'unavailable'
+  else if (passing) state = 'pass'
+  else state = 'fail'
+  let status: string
+  if (pending) status = 'Scanning…'
+  else if (unavailable) status = 'Unavailable'
+  else if (passing) status = 'Passes WCAG A/AA'
+  else status = `${list.length} violation${list.length === 1 ? '' : 's'}`
+  // Worst first, then most-affected first — so the most urgent fixes lead.
+  const sorted = collapsible
+    ? [...list].sort(
+        (a, b) =>
+          impactRank(a.impact) - impactRank(b.impact) || b.nodes - a.nodes,
+      )
+    : []
+  return (
+    <section
+      className="dcui-a11y"
+      data-testid={DcTestIds.a11yPanel}
+      data-state={state}
+      data-reveal={reveal}
+      data-instant-color={instantColor ? 'true' : undefined}
+      data-open={collapsible && open ? 'true' : undefined}
+      aria-label="Accessibility">
+      <div className="dcui-a11y-head">
+        <Eyebrow>Accessibility</Eyebrow>
+        <div className="dcui-a11y-head-right">
+          <span className="dcui-a11y-status">{status}</span>
+          {/* Re-scan the viewed variant. Hidden while a scan is in flight, and
+              absent entirely when no handler is wired. */}
+          {onRescan && !pending && (
+            <IconButton
+              glyph="⟳"
+              variant="bare"
+              size="sm"
+              data-testid={DcTestIds.a11yRescan}
+              label="Re-scan accessibility"
+              onClick={onRescan}
+            />
+          )}
+          {/* Only the violations list is collapsible — the other states are a
+              single self-explaining bar with no body to toggle. */}
+          {collapsible && (
+            <IconButton
+              glyph={open ? '▾' : '▸'}
+              variant="bare"
+              size="sm"
+              data-testid={DcTestIds.a11yToggle}
+              aria-expanded={open}
+              label={
+                open
+                  ? 'Hide accessibility details'
+                  : 'Show accessibility details'
+              }
+              onClick={() => setOpen((o) => !o)}
+            />
+          )}
+        </div>
+      </div>
+      {/* Always render the wrapper so the 0fr→1fr height transition fires when a
+          scan resolves to violations; the list mounts inside only when there are
+          violations to show. */}
+      <div className="dcui-a11y-collapse">
+        {collapsible && (
+          <ul className="dcui-a11y-list">
+            {sorted.map((v, i) => (
+              <li
+                key={v.id}
+                className="dcui-a11y-item"
+                data-testid={DcTestIds.a11yViolation(v.id)}
+                // Stagger the cascade; reduced-motion drops the animation, so this
+                // delay has no effect there (everything appears at once).
+                style={{ animationDelay: `${i * 100}ms` }}>
+                {v.impact && <ImpactTag impact={v.impact} />}
+                <code className="dcui-a11y-id">{v.id}</code>
+                <span className="dcui-a11y-help">{v.help}</span>
+                <span className="dcui-a11y-nodes">
+                  {v.nodes} node{v.nodes === 1 ? '' : 's'}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/ui/design-system/components/showcase/Chip.case.tsx

@@ -0,0 +1,48 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { Chip } from './Chip'
+
+export default defineCases(
+  'Chip',
+  {
+    Playground: {
+      tweaks: {
+        label: tweak.text('atom'),
+        variant: tweak.choice(['default', 'accent', 'solid'], 'default'),
+        current: tweak.boolean(false),
+        withIndex: tweak.boolean(false),
+        index: tweak.number(1),
+        clickable: tweak.boolean(false),
+      },
+      render: (t) => (
+        <Chip
+          variant={t.variant as 'default' | 'accent' | 'solid'}
+          current={t.current}
+          index={t.withIndex ? t.index : undefined}
+          onClick={t.clickable ? () => {} : undefined}>
+          {t.label}
+        </Chip>
+      ),
+    },
+    Variants: () => (
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Chip>atom</Chip>
+        <Chip variant="accent">accent</Chip>
+        <Chip variant="solid">solid</Chip>
+      </div>
+    ),
+    Steps: () => (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Chip index={1} onClick={() => {}}>
+          Request link
+        </Chip>
+        <Chip index={2} current onClick={() => {}}>
+          Check email
+        </Chip>
+        <Chip index={3} onClick={() => {}}>
+          Signed in
+        </Chip>
+      </div>
+    ),
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/showcase/Chip.css

@@ -0,0 +1,51 @@
+.dcui-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  font-weight: var(--dc-weight-medium);
+  line-height: 1;
+  color: var(--dc-fg-muted);
+  background: var(--dc-bg-subtle);
+  border: 1px solid var(--dc-border);
+  border-radius: var(--dc-radius-full);
+  padding: 0.3125rem var(--dc-space-4);
+  white-space: nowrap;
+}
+button.dcui-chip {
+  cursor: pointer;
+  transition:
+    border-color var(--dc-transition-fast),
+    color var(--dc-transition-fast),
+    background var(--dc-transition-fast);
+}
+button.dcui-chip:hover {
+  color: var(--dc-fg);
+  border-color: var(--dc-border-strong);
+}
+button.dcui-chip:focus-visible {
+  outline: 2px solid var(--dc-focus-ring);
+  outline-offset: 1px;
+}
+.dcui-chip[data-variant="accent"] {
+  color: var(--dc-brand);
+  background: var(--dc-brand-subtle);
+  border-color: var(--dc-brand);
+}
+.dcui-chip[data-variant="solid"] {
+  color: var(--dc-ink-fg);
+  background: var(--dc-ink);
+  border-color: var(--dc-ink);
+}
+.dcui-chip[aria-current="true"] {
+  color: var(--dc-brand);
+  border-color: var(--dc-brand);
+  background: var(--dc-brand-subtle);
+}
+.dcui-chip-index {
+  color: var(--dc-fg-subtle);
+}
+.dcui-chip[aria-current="true"] .dcui-chip-index {
+  color: var(--dc-brand);
+}

package/src/ui/design-system/components/showcase/Chip.placard.md

@@ -0,0 +1,13 @@
+**Chip** — a small pill for hierarchy levels (atom, molecule…), flow steps, tweak tokens, and counts; reach for it to tag or label one item compactly. Static by default; pass `onClick` and it becomes a button.
+
+```tsx
+<Chip>atom</Chip>
+<Chip variant="accent">accent</Chip>
+<Chip index={2} current onClick={() => goto('check-email')}>Check email</Chip>
+```
+
+Variants: `default` (muted) · `accent` (marigold outline, soft fill) · `solid` (filled ink, for the one chip that must stand out against the others). `current` is the marigold "active" state; `index` prepends a dimmed mono number.
+
+For a multi-step stepper, reach for `FlowNav`.
+
+Pass `label` for the accessible name: with `onClick` (button form) it becomes `aria-label`; without (span form) it becomes the `title`. `onClick` emits nothing — the caller already knows which chip it wired.

package/src/ui/design-system/components/showcase/Chip.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Chip } from './Chip'
+
+describe('Chip', () => {
+  test('renders as a static span by default with the label as a title', () => {
+    const html = renderToStaticMarkup(<Chip label="atom">atom</Chip>)
+    expect(html).toContain('<span')
+    expect(html).not.toContain('<button')
+    expect(html).toContain('title="atom"')
+    expect(html).toContain('data-variant="default"')
+  })
+
+  test('becomes a button when an onClick handler is given', () => {
+    const html = renderToStaticMarkup(
+      <Chip label="Step 1" onClick={() => {}}>
+        Step 1
+      </Chip>,
+    )
+    expect(html).toContain('<button')
+    expect(html).toContain('type="button"')
+    expect(html).toContain('aria-label="Step 1"')
+  })
+
+  test('marks the current chip with aria-current', () => {
+    const current = renderToStaticMarkup(<Chip current>x</Chip>)
+    const plain = renderToStaticMarkup(<Chip>x</Chip>)
+    expect(current).toContain('aria-current="true"')
+    expect(plain).not.toContain('aria-current')
+  })
+
+  test('renders a leading index slot when provided', () => {
+    const html = renderToStaticMarkup(<Chip index={2}>Configure</Chip>)
+    expect(html).toContain('class="dcui-chip-index"')
+    expect(html).toContain('>2<')
+  })
+
+  test('reflects the variant', () => {
+    expect(renderToStaticMarkup(<Chip variant="accent">x</Chip>)).toContain(
+      'data-variant="accent"',
+    )
+    expect(renderToStaticMarkup(<Chip variant="solid">x</Chip>)).toContain(
+      'data-variant="solid"',
+    )
+  })
+})

package/src/ui/design-system/components/showcase/Chip.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Display Case — Chip
+ * A small pill for hierarchy levels (atom, molecule…), flow steps, tweak
+ * tokens, and counts. Static by default; pass `onClick` and it becomes a button
+ * (used for flow-step selection).
+ */
+
+export type ChipVariant = 'default' | 'accent' | 'solid'
+
+export interface ChipProps {
+  variant?: ChipVariant
+  current?: boolean
+  /** Leading index/number (mono, dimmed) — used by flow-step chips. */
+  index?: ReactNode
+  /** When set, the chip renders as a button. */
+  onClick?: () => void
+  label?: string
+  children?: ReactNode
+}
+
+export function Chip({
+  variant = 'default',
+  current = false,
+  index,
+  onClick,
+  label,
+  children,
+}: ChipProps) {
+  const inner = (
+    <>
+      {index != null ? <span className="dcui-chip-index">{index}</span> : null}
+      {children}
+    </>
+  )
+  const common = {
+    className: 'dcui-chip',
+    'data-variant': variant,
+    'aria-current': current ? ('true' as const) : undefined,
+  }
+  if (onClick) {
+    return (
+      <button type="button" {...common} aria-label={label} onClick={onClick}>
+        {inner}
+      </button>
+    )
+  }
+  return (
+    <span {...common} title={label}>
+      {inner}
+    </span>
+  )
+}

package/src/ui/design-system/components/showcase/Eyebrow.case.tsx

@@ -0,0 +1,30 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { Eyebrow } from './Eyebrow'
+
+export default defineCases(
+  'Eyebrow',
+  {
+    Playground: {
+      tweaks: {
+        label: tweak.text('Components'),
+        tone: tweak.choice(['muted', 'accent', 'strong'], 'muted'),
+        as: tweak.choice(['div', 'span', 'p'], 'div'),
+      },
+      render: (t) => (
+        <Eyebrow
+          tone={t.tone as 'muted' | 'accent' | 'strong'}
+          as={t.as as 'div' | 'span' | 'p'}>
+          {t.label}
+        </Eyebrow>
+      ),
+    },
+    Tones: () => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <Eyebrow>Components</Eyebrow>
+        <Eyebrow tone="accent">Tweaks</Eyebrow>
+        <Eyebrow tone="strong">Documentation</Eyebrow>
+      </div>
+    ),
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/showcase/Eyebrow.css

@@ -0,0 +1,16 @@
+.dcui-eyebrow {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  font-weight: var(--dc-weight-medium);
+  letter-spacing: var(--dc-tracking-label);
+  text-transform: uppercase;
+  color: var(--dc-fg-muted);
+  line-height: var(--dc-leading-tight);
+  margin: 0;
+}
+.dcui-eyebrow[data-tone="accent"] {
+  color: var(--dc-brand);
+}
+.dcui-eyebrow[data-tone="strong"] {
+  color: var(--dc-fg);
+}

package/src/ui/design-system/components/showcase/Eyebrow.placard.md

@@ -0,0 +1,10 @@
+**Eyebrow** — the signature section label: uppercase JetBrains Mono, wide tracking, muted; reach for it to mark a group header or panel title in the chrome.
+
+```tsx
+<Eyebrow>Components</Eyebrow>
+<Eyebrow tone="accent">Tweaks</Eyebrow>
+```
+
+Renders a `<div>` by default. Override `as="span"` only when the label sits inline inside other text (a block `<div>` would break the flow).
+
+Tones: `muted` (default) · `accent` (marigold) · `strong` (full ink).

package/src/ui/design-system/components/showcase/Eyebrow.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Eyebrow } from './Eyebrow'
+
+describe('Eyebrow', () => {
+  test('renders a muted div by default', () => {
+    const html = renderToStaticMarkup(<Eyebrow>Tweaks</Eyebrow>)
+    expect(html).toContain('<div')
+    expect(html).toContain('class="dcui-eyebrow"')
+    expect(html).toContain('data-tone="muted"')
+    expect(html).toContain('Tweaks')
+  })
+
+  test('renders with the requested element tag', () => {
+    const html = renderToStaticMarkup(<Eyebrow as="span">Docs</Eyebrow>)
+    expect(html).toContain('<span')
+    expect(html).not.toContain('<div')
+  })
+
+  test('reflects the tone', () => {
+    expect(renderToStaticMarkup(<Eyebrow tone="accent">x</Eyebrow>)).toContain(
+      'data-tone="accent"',
+    )
+    expect(renderToStaticMarkup(<Eyebrow tone="strong">x</Eyebrow>)).toContain(
+      'data-tone="strong"',
+    )
+  })
+
+  test('forwards arbitrary attributes to the element', () => {
+    const html = renderToStaticMarkup(
+      <Eyebrow id="section-label" title="hint">
+        x
+      </Eyebrow>,
+    )
+    expect(html).toContain('id="section-label"')
+    expect(html).toContain('title="hint"')
+  })
+})

package/src/ui/design-system/components/showcase/Eyebrow.tsx

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Display Case — Eyebrow
+ * The signature label: uppercase JetBrains Mono, wide tracking, muted. Marks
+ * every section in the chrome (group headers, panel titles, "Tweaks",
+ * "Documentation").
+ */
+
+export type EyebrowTone = 'muted' | 'accent' | 'strong'
+
+export interface EyebrowProps extends HTMLAttributes<HTMLElement> {
+  as?: 'div' | 'span' | 'p'
+  tone?: EyebrowTone
+  children?: ReactNode
+}
+
+export function Eyebrow({
+  as: Tag = 'div',
+  tone = 'muted',
+  children,
+  ...rest
+}: EyebrowProps) {
+  return (
+    <Tag className="dcui-eyebrow" data-tone={tone} {...rest}>
+      {children}
+    </Tag>
+  )
+}

package/src/ui/design-system/components/showcase/FlowNav.case.tsx

@@ -0,0 +1,35 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { FlowNav } from './FlowNav'
+
+const steps = [
+  { id: 'request-link', label: 'Request link' },
+  { id: 'check-email', label: 'Check email' },
+  { id: 'signed-in', label: 'Signed in' },
+]
+
+export default defineCases(
+  'FlowNav',
+  {
+    Playground: {
+      tweaks: {
+        active: tweak.choice(
+          ['request-link', 'check-email', 'signed-in'],
+          'check-email',
+        ),
+      },
+      render: (t) => (
+        <FlowNav steps={steps} activeId={t.active} onSelect={() => {}} />
+      ),
+    },
+    Start: () => (
+      <FlowNav steps={steps} activeId="request-link" onSelect={() => {}} />
+    ),
+    Middle: () => (
+      <FlowNav steps={steps} activeId="check-email" onSelect={() => {}} />
+    ),
+    End: () => (
+      <FlowNav steps={steps} activeId="signed-in" onSelect={() => {}} />
+    ),
+  },
+  { level: 'molecule' },
+)

package/src/ui/design-system/components/showcase/FlowNav.css

@@ -0,0 +1,29 @@
+.dcui-flownav {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-6);
+  flex-wrap: wrap;
+  padding: var(--dc-space-4) var(--dc-space-6);
+  border: 1px solid var(--dc-border);
+  border-radius: var(--dc-radius-md);
+  background: var(--dc-bg-subtle);
+}
+/* Scope the steps reset under .dcui-flownav so the no-margin/no-padding list
+   wins over ambient prose styles (e.g. a Primer's .dc-primer ol rule), which
+   would otherwise add a bottom margin that pushes the chips off the bar's
+   centre line, out of vertical alignment with the Prev / Next rail. */
+.dcui-flownav .dcui-flownav-steps {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex: 1;
+}
+.dcui-flownav-rail {
+  margin-left: auto;
+  display: flex;
+  gap: var(--dc-space-3);
+}

package/src/ui/design-system/components/showcase/FlowNav.placard.md

@@ -0,0 +1,13 @@
+**FlowNav** — the stepper for multi-step flows: numbered step chips plus Prev/Next, grouped on one bar; reach for it when a flow's steps are individually addressable.
+
+```tsx
+<FlowNav
+  steps={[{ id: 'a', label: 'Request link' }, { id: 'b', label: 'Check email' }]}
+  activeId="a"
+  onSelect={(id) => goto(id)}
+/>
+```
+
+`onSelect(id)` fires from both chip clicks and the Prev/Next buttons. Prev/Next resolve to the neighboring step's `id` (not a delta or direction), so the handler is always "go to this step". They auto-disable at the first and last step.
+
+For a single pill, reach for `Chip`.

package/src/ui/design-system/components/showcase/FlowNav.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { FlowNav, type FlowStep } from './FlowNav'
+
+const steps: FlowStep[] = [
+  { id: 'a', label: 'Empty' },
+  { id: 'b', label: 'Filled' },
+  { id: 'c', label: 'Submitted' },
+]
+
+describe('FlowNav', () => {
+  test('renders one numbered step chip per step', () => {
+    const html = renderToStaticMarkup(<FlowNav steps={steps} activeId="a" />)
+    expect(html).toContain('Empty')
+    expect(html).toContain('Filled')
+    expect(html).toContain('Submitted')
+    // The mono index column on each chip.
+    expect((html.match(/dcui-chip-index/g) ?? []).length).toBe(3)
+  })
+
+  test('marks the active step chip as current', () => {
+    const html = renderToStaticMarkup(<FlowNav steps={steps} activeId="b" />)
+    expect(html).toContain('aria-current="true"')
+  })
+
+  test('disables Prev on the first step', () => {
+    const html = renderToStaticMarkup(<FlowNav steps={steps} activeId="a" />)
+    // The Prev button (← Prev) precedes Next and is the only disabled control.
+    const prevIdx = html.indexOf('← Prev')
+    const slice = html.slice(0, prevIdx)
+    expect(slice.lastIndexOf('disabled')).toBeGreaterThan(
+      slice.lastIndexOf('<button'),
+    )
+  })
+
+  test('disables Next on the last step but not Prev', () => {
+    const html = renderToStaticMarkup(<FlowNav steps={steps} activeId="c" />)
+    expect(html).toContain('← Prev')
+    expect(html).toContain('Next →')
+    // Exactly one rail button is disabled at an end.
+    expect((html.match(/disabled/g) ?? []).length).toBe(1)
+  })
+
+  test('enables both rail buttons in the middle of the flow', () => {
+    const html = renderToStaticMarkup(<FlowNav steps={steps} activeId="b" />)
+    expect(html).not.toContain('disabled')
+  })
+})

package/src/ui/design-system/components/showcase/FlowNav.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react'
+import { Button } from '../controls/Button'
+import { Chip } from './Chip'
+
+/**
+ * Display Case — FlowNav
+ * The stepper for multi-step flows: numbered step chips + Prev / Next, grouped
+ * on one bar. Each step is individually addressable (click a chip), mirroring
+ * the flow's `goto` transitions.
+ */
+
+export interface FlowStep {
+  id: string
+  label: ReactNode
+}
+
+export interface FlowNavProps {
+  steps: FlowStep[]
+  activeId: string
+  onSelect?: (id: string) => void
+}
+
+export function FlowNav({ steps, activeId, onSelect }: FlowNavProps) {
+  const idx = steps.findIndex((s) => s.id === activeId)
+  const prev = steps[idx - 1]
+  const next = steps[idx + 1]
+  return (
+    <div className="dcui-flownav">
+      <ol className="dcui-flownav-steps">
+        {steps.map((s, i) => (
+          <li key={s.id}>
+            <Chip
+              index={i + 1}
+              current={s.id === activeId}
+              onClick={() => onSelect?.(s.id)}>
+              {s.label}
+            </Chip>
+          </li>
+        ))}
+      </ol>
+      <div className="dcui-flownav-rail">
+        <Button
+          size="sm"
+          variant="subtle"
+          disabled={!prev}
+          onClick={() => prev && onSelect?.(prev.id)}>
+          ← Prev
+        </Button>
+        <Button
+          size="sm"
+          disabled={!next}
+          onClick={() => next && onSelect?.(next.id)}>
+          Next →
+        </Button>
+      </div>
+    </div>
+  )
+}