Breadcrumbs

<div style={stack}>
      <h3 style={heading}>
        Last item (<code>Q1 Sales</code>) is auto-current — rendered as
        a static <code>&lt;span&gt;</code> with{' '}
        <code>aria-current="page"</code>.
      </h3>
      <Breadcrumbs items={CANONICAL_TRAIL} />
    </div>

<div style={{ ...stack, gap: '1.25rem' }}>
      {SIZES.map((size) => (
        <section
          key={size}
          style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}
        >
          <p style={caption}>size=&quot;{size}&quot;</p>
          <Breadcrumbs size={size} items={CANONICAL_TRAIL} />
        </section>
      ))}
    </div>

<div style={stack}>
      <h3 style={heading}>
        Per-item <code>icon</code> slot — typically used at the root.
      </h3>
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/', icon: <HomeIcon /> },
          { label: 'Settings', href: '/settings' },
          { label: 'Profile' },
        ]}
      />
    </div>

<div style={stack}>
      <h3 style={heading}>
        Pass any ReactNode as <code>separator</code>.
      </h3>
      <Breadcrumbs
        separator={<span aria-hidden="true">/</span>}
        items={CANONICAL_TRAIL}
      />
    </div>

<div style={stack}>
      <h3 style={heading}>
        7-crumb trail with <code>maxItems=4</code>. Root + last 2 stay
        visible; middle 4 collapse into a static <code>…</code>{' '}
        indicator (count is announced via <code>aria-label</code>).
      </h3>
      <Breadcrumbs items={DEEP_TRAIL} maxItems={4} />
    </div>

{
    function Demo() {
      const [lastClick, setLastClick] = useState<string[]>([]);
      return (
        <div style={stack}>
          <h3 style={heading}>
            Wire <code>onCollapsedClick</code> to receive the array of
            hidden crumbs. Drop a Popover-anchored <code>Menu</code>
            with the labels for full keyboard navigation.
          </h3>
          <p style={caption}>
            Last click revealed: <code>{lastClick.length ? lastClick.map((l) => l).join(', ') : '—'}</code>
          </p>
          <Breadcrumbs
            items={DEEP_TRAIL}
            maxItems={4}
            onCollapsedClick={(hidden) =>
              setLastClick(hidden.map((h) => h.label))
            }
          />
        </div>
      );
    }
    return <Demo />;
  }

{
    function Demo() {
      const [opened, setOpened] = useState(0);
      return (
        <div style={stack}>
          <h3 style={heading}>
            <code>Pin board</code> has only an <code>onClick</code>{' '}
            (no href) — renders as a <code>&lt;button&gt;</code> that
            could trigger an overlay / drawer / picker.
          </h3>
          <p style={caption}>Pin-board opened: {opened} ×</p>
          <Breadcrumbs
            items={[
              { label: 'Workspace', href: '/' },
              { label: 'Pin board', onClick: () => setOpened((n) => n + 1) },
              { label: 'Card' },
            ]}
          />
        </div>
      );
    }
    return <Demo />;
  }