From 6a7d609b1c8b403ea8011d9fdb27be7daea1b073 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sat, 27 Jun 2026 20:08:20 -0700
Subject: [PATCH 1/8] Add Timeline Issues Features stories (Phase 2 Issues
 surface)

Recreate GitHub's live Issue timeline events as Storybook Features
stories using the Primer Timeline component. Covers 9 event groups
(59 variants): Closed, State, References, Duplicates, Moderation,
Issue Types, Issue Hierarchy, Dependencies, Issue Fields.

Part of github/primer#6663.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...imeline.issues.features.stories.module.css |  165 ++
 .../Timeline.issues.features.stories.tsx      | 1562 +++++++++++++++++
 2 files changed, 1727 insertions(+)
 create mode 100644 packages/react/src/Timeline/Timeline.issues.features.stories.module.css
 create mode 100644 packages/react/src/Timeline/Timeline.issues.features.stories.tsx

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
new file mode 100644
index 00000000000..c7f719e1e4f
--- /dev/null
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -0,0 +1,165 @@
+.RealisticTimeline {
+  /* GitHub renders the timeline at most 1012px wide in product surfaces. */
+  max-width: 1012px;
+}
+
+.LinkWithBoldStyle {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  margin-right: var(--base-size-4);
+}
+
+.LinkWithBoldStyle:hover {
+  color: var(--fgColor-accent);
+}
+
+.InlineAvatar {
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+.Timestamp {
+  text-decoration: underline;
+}
+
+.CommitSha {
+  font-family: var(--fontStack-monospace);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+}
+
+/* Story-only scaffolding: a small caption per Timeline.Item so the variants
+   can be scanned like a Figma component set. Not part of the faithful event. */
+.VariantLabel {
+  display: block;
+  margin-bottom: var(--base-size-4);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* IssueLink-style inline reference: state octicon + bold title + muted number. */
+.IssueLink {
+  color: var(--fgColor-default);
+  text-decoration: none;
+}
+
+.IssueLink:hover {
+  color: var(--fgColor-accent);
+  text-decoration: underline;
+}
+
+.IssueLinkIcon {
+  color: var(--fgColor-done);
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+.IssueLinkTitle {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.IssueLinkNumber {
+  color: var(--fgColor-muted);
+}
+
+.ProjectIcon {
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+  color: var(--fgColor-muted);
+}
+
+/* Open (green) state icon variant for IssueLink references that point at an
+   open issue/PR (e.g. the canonical issue in a "marked as duplicate of" row). */
+.IssueLinkIconOpen {
+  color: var(--fgColor-open);
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+/* Inline pull-request state icon rendered in the body text (References group),
+   mirroring github-ui's `sourceIcon('PullRequest', ...)` open-state coloring. */
+.PrStateIcon {
+  color: var(--fgColor-open);
+  vertical-align: middle;
+  margin: 0 var(--base-size-4);
+}
+
+/* Open (green) badge icon, used when the badge icon itself is a PR state icon
+   (References "removed a link to a pull request" → `leadingIcon={PullStateIcon}`). */
+.BadgeIconOpen {
+  color: var(--fgColor-open);
+}
+
+/* Wrapper around a colored issue-type Token so it sits inline with the copy,
+   matching github-ui's `IssueTypeEvent.module.css` `issueTypeTokenWrapper`. */
+.TokenWrapper {
+  display: inline-flex;
+  vertical-align: middle;
+  margin: 0 var(--base-size-4);
+}
+
+/* Simplified commit-reference card (github-ui's `ReferencedEventInner`): a
+   bordered row with a monospace commit message link and a trailing SHA. */
+.CommitRefBox {
+  margin-top: var(--base-size-8);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.CommitRefRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--base-size-8);
+  padding: var(--base-size-8) var(--base-size-12);
+}
+
+.CommitRefRow + .CommitRefRow {
+  border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
+}
+
+.CommitRefMessage {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+}
+
+.CommitRefOid {
+  font-family: var(--fontStack-monospace);
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+/* Secondary reference list (github-ui Hierarchy/Dependency events render the
+   linked issues in a bordered `<ul>` Box below the main copy). Single vs
+   multiple differ only by item count + singular/plural leading copy. */
+.RefList {
+  margin-top: var(--base-size-8);
+  padding: 0;
+  list-style: none;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.RefListItem {
+  padding: var(--base-size-8) var(--base-size-12);
+}
+
+.RefListItem + .RefListItem {
+  border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
+}
+
+/* IssueField event: the field name reads as semibold inline text, the value as
+   an inline link (github-ui's `IssueFieldEvent` `issueFieldTokenWrapper`). */
+.FieldName {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  margin: 0 var(--base-size-4);
+}
+
+.FieldValue {
+  margin-left: var(--base-size-4);
+}
diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
new file mode 100644
index 00000000000..828a7b4eb92
--- /dev/null
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -0,0 +1,1562 @@
+import type {Meta} from '@storybook/react-vite'
+import type React from 'react'
+import type {ComponentProps} from '../utils/types'
+import {FeatureFlags} from '../FeatureFlags'
+import Timeline from './Timeline'
+import {
+  BlockedIcon,
+  CalendarIcon,
+  CheckCircleIcon,
+  CircleSlashIcon,
+  CommentDiscussionIcon,
+  CrossReferenceIcon,
+  DuplicateIcon,
+  GitCommitIcon,
+  GitPullRequestIcon,
+  IssueClosedIcon,
+  IssueDraftIcon,
+  IssueOpenedIcon,
+  IssueReopenedIcon,
+  IssueTrackedByIcon,
+  IssueTracksIcon,
+  LinkExternalIcon,
+  NumberIcon,
+  PinIcon,
+  SingleSelectIcon,
+  TableIcon,
+  TypographyIcon,
+} from '@primer/octicons-react'
+import Avatar from '../Avatar'
+import {Button} from '../Button'
+import Label from '../Label'
+import Link from '../Link'
+import Octicon from '../Octicon'
+import RelativeTime from '../RelativeTime'
+import Token from '../Token'
+import classes from './Timeline.issues.features.stories.module.css'
+
+/**
+ * Issue Timeline event examples (Phase 2 of github/primer#6663).
+ *
+ * These stories recreate GitHub's live issue-timeline events using the Primer
+ * `Timeline` compositional slots, sourced from the `timeline-audit` Figma audit
+ * (`issue-timeline-events-for-figma.md`) and verified against the live React
+ * implementation in `github/github-ui` (`packages/timeline-items`).
+ *
+ * FUTURE FILTERING (taxonomy still open — github/primer#6663): category
+ * `data-*` attributes (e.g. `data-event-category="closed"`) will attach to each
+ * `Timeline.Item` below so stories can be filtered/grouped by event family. We
+ * intentionally do NOT add them yet to avoid baking in a taxonomy.
+ *
+ * SLOT USAGE (Phase 1 slots — establishes the convention for downstream groups):
+ * - `Timeline.Avatar` (gutter slot, #6677): the 40px LEFT-GUTTER avatar. Reserved
+ *   for comment-style events. Badge-row events like Closed do NOT use it — the
+ *   live github-ui `ClosedEvent` renders through `TimelineRow`, which places the
+ *   actor's small (20px) avatar INLINE in the body (`EventActor` inline-avatar
+ *   mode), not in the gutter. We mirror that here: avatar inline in `Timeline.Body`.
+ * - `Timeline.Actions` (right-controls slot, #6678): for buttons / SHAs / status
+ *   pills on the right edge. Closed has no right controls, so it is omitted here.
+ *   Downstream groups that DO have right controls (e.g. Duplicates' "Marked as
+ *   duplicate" has a button) should add it as a sibling of `Timeline.Body`:
+ *
+ *     <Timeline.Item>
+ *       <Timeline.Badge>{...}</Timeline.Badge>
+ *       <Timeline.Body>{...}</Timeline.Body>
+ *       <Timeline.Actions>
+ *         <Button size="small">View details</Button>
+ *       </Timeline.Actions>
+ *     </Timeline.Item>
+ */
+
+const MONALISA_AVATAR = 'https://avatars.githubusercontent.com/u/583231?v=4'
+
+// Inline 20px avatar + bold username link, matching github-ui's `EventActor`
+// (packages/timeline-items/components/row/EventActor.tsx) inline-avatar mode.
+const Actor = () => (
+  <>
+    <Avatar src={MONALISA_AVATAR} size={20} alt="" className={classes.InlineAvatar} />
+    <Link href="#" className={classes.LinkWithBoldStyle} muted>
+      monalisa
+    </Link>
+  </>
+)
+
+// Muted underlined relative timestamp, mirroring github-ui's `Ago` deep-link.
+const Time = ({date}: {date: string}) => (
+  <Link href="#" className={classes.Timestamp} muted>
+    <RelativeTime date={new Date(date)} format="relative" />
+  </Link>
+)
+
+export default {
+  title: 'Components/Timeline/Issues Features',
+  component: Timeline,
+  subcomponents: {
+    'Timeline.Item': Timeline.Item,
+    'Timeline.Avatar': Timeline.Avatar,
+    'Timeline.Badge': Timeline.Badge,
+    'Timeline.Body': Timeline.Body,
+    'Timeline.Break': Timeline.Break,
+    'Timeline.Actions': Timeline.Actions,
+  },
+  decorators: [
+    // File-scoped: render every story in the future-state list semantics
+    // (`<ol>`/`<li>`). The `primer_react_timeline_list_semantics` flag is merged
+    // on main; this opts these stories into the DOM the timeline will ship.
+    Story => (
+      <FeatureFlags flags={{primer_react_timeline_list_semantics: true}}>
+        <Story />
+      </FeatureFlags>
+    ),
+  ],
+} as Meta<ComponentProps<typeof Timeline>>
+
+/**
+ * The Closed event group — `IssueTimeline.eventClosed` (audit § 2).
+ *
+ * All seven variants are stacked in a single `<Timeline>` so they can be
+ * scanned like a Figma component set. Badge icon and color are dynamically
+ * derived by `useIssueState({ state: 'CLOSED', stateReason })` in the live code:
+ * completed/PR/commit/project/no-reason -> CheckCircleIcon on `done` (purple);
+ * not-planned/duplicate -> CircleSlashIcon on `neutral` (gray).
+ */
+export const EventClosed = () => (
+  <div
+    className={classes.RealisticTimeline}
+    // Prevent the placeholder `href="#"` links from navigating inside Storybook.
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Closed as completed */}
+      <Timeline.Item>
+        <Timeline.Badge variant="done">
+          <Octicon icon={CheckCircleIcon} aria-label="Closed as completed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed as completed</span>
+          <Actor />
+          {'closed this as '}
+          <Link href="#" inline>
+            completed
+          </Link>{' '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Not planned — neutral (gray) badge. Timeline.Badge has no `neutral`
+          variant, so drive the documented `--timelineBadge-bgColor` hook inline
+          (portable for docs copy-paste; matches production `TimelineRow`). */}
+      <Timeline.Item>
+        <Timeline.Badge
+          style={
+            {
+              '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
+              color: 'var(--fgColor-onEmphasis)',
+            } as React.CSSProperties
+          }
+        >
+          <Octicon icon={CircleSlashIcon} aria-label="Closed as not planned" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed as not planned</span>
+          <Actor />
+          {'closed this as '}
+          <Link href="#" inline>
+            not planned
+          </Link>{' '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Closed via pull request */}
+      <Timeline.Item>
+        <Timeline.Badge variant="done">
+          <Octicon icon={CheckCircleIcon} aria-label="Closed via pull request" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed via pull request</span>
+          <Actor />
+          {'closed this as '}
+          <Link href="#" inline>
+            completed
+          </Link>
+          {' in '}
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            #123
+          </Link>{' '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Closed via commit */}
+      <Timeline.Item>
+        <Timeline.Badge variant="done">
+          <Octicon icon={CheckCircleIcon} aria-label="Closed via commit" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed via commit</span>
+          <Actor />
+          {'closed this as '}
+          <Link href="#" inline>
+            completed
+          </Link>
+          {' in '}
+          <Link href="#" className={classes.CommitSha}>
+            abc1234
+          </Link>{' '}
+          <Time date="2022-07-23T11:05:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Closed via project (ProjectV2 status change). github-ui composes
+          the closer link as TableIcon + project title; there is no Primer
+          equivalent for github-ui's `ProjectV2` closer link. */}
+      <Timeline.Item>
+        <Timeline.Badge variant="done">
+          <Octicon icon={CheckCircleIcon} aria-label="Closed via project" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed via project</span>
+          <Actor />
+          {'closed this as '}
+          <Link href="#" inline>
+            completed
+          </Link>
+          {' by moving to Done in '}
+          <Octicon icon={TableIcon} size={16} className={classes.ProjectIcon} />
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            Roadmap
+          </Link>{' '}
+          <Time date="2022-07-22T14:20:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Closed as duplicate — neutral (gray) badge (see note above). github-ui
+          renders an `IssueLink` (state icon + title + #number + hovercard);
+          composed here from Primer primitives. */}
+      <Timeline.Item>
+        <Timeline.Badge
+          style={
+            {
+              '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
+              color: 'var(--fgColor-onEmphasis)',
+            } as React.CSSProperties
+          }
+        >
+          <Octicon icon={CircleSlashIcon} aria-label="Closed as duplicate" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed as duplicate</span>
+          <Actor />
+          {'closed this as a '}
+          <Link href="#" inline>
+            duplicate
+          </Link>
+          {' of '}
+          <Link href="#" className={classes.IssueLink}>
+            <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+            <span className={classes.IssueLinkTitle}>Fix the flaky avatar test</span>{' '}
+            <span className={classes.IssueLinkNumber}>#42</span>
+          </Link>{' '}
+          <Time date="2022-07-21T08:30:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Closed with no state reason */}
+      <Timeline.Item>
+        <Timeline.Badge variant="done">
+          <Octicon icon={CheckCircleIcon} aria-label="Closed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Closed (no reason)</span>
+          <Actor />
+          {'closed this '}
+          <Time date="2022-07-20T10:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Issue-state event group (audit § 3).
+ *
+ * Six state-change variants. Badge icon/color verified against the live
+ * github-ui components (not the audit's icon column): Reopened maps to
+ * `useIssueState({ state: 'OPEN' })` -> `open` (green) badge; the rest are
+ * structural events with a default (muted) badge.
+ */
+export const EventState = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Reopened — open (green) badge via useIssueState (ReopenedEvent.tsx) */}
+      <Timeline.Item>
+        <Timeline.Badge variant="open">
+          <Octicon icon={IssueReopenedIcon} aria-label="Reopened" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Reopened</span>
+          <Actor />
+          {'reopened this '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Transferred — github-ui's TransferredEvent renders the source repo as a
+          plain inline Link (the audit shows it bold; live code is canonical). */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={LinkExternalIcon} aria-label="Transferred" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Transferred</span>
+          <Actor />
+          {'transferred this issue from '}
+          <Link href="#" inline>
+            octo-org/legacy-repo
+          </Link>{' '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Pinned */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={PinIcon} aria-label="Pinned" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Pinned</span>
+          <Actor />
+          {'pinned this issue '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Unpinned */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={PinIcon} aria-label="Unpinned" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Unpinned</span>
+          <Actor />
+          {'unpinned this issue '}
+          <Time date="2022-07-23T11:05:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Converted to discussion — github-ui's ConvertedToDiscussionEvent links
+          the resulting discussion by number. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={CommentDiscussionIcon} aria-label="Converted to discussion" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Converted to discussion</span>
+          <Actor />
+          {'converted this issue into a discussion '}
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            #123
+          </Link>{' '}
+          <Time date="2022-07-22T14:20:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Converted from draft */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueDraftIcon} aria-label="Converted from draft" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Converted from draft</span>
+          <Actor />
+          {'converted this from a draft issue '}
+          <Time date="2022-07-21T08:30:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The References event group (audit § 5).
+ *
+ * Cross-reference events. All use a default (muted) badge except where the
+ * badge icon is itself a PR state icon. The inline PR state icon mirrors
+ * github-ui's `sourceIcon('PullRequest', isDraft, isInMergeQueue)`; commit
+ * references compose a simplified `ReferencedEventInner` card.
+ */
+export const EventReferences = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Linked pull request — ConnectedEvent.tsx (CrossReferenceIcon badge,
+          open PR state icon inline before the PR title). */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={CrossReferenceIcon} aria-label="Linked pull request" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Linked pull request</span>
+          <Actor />
+          {'linked a pull request that will close this issue '}
+          <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            Add retry logic to the uploader
+          </Link>
+          <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Unlinked pull request — DisconnectedEvent.tsx uses the PR state icon AS
+          the badge icon (leadingIcon={PullStateIcon}), so the badge octicon is
+          green (open) on a default badge. Verified the live render path is
+          active (in TIMELINE_ITEMS[__typename], current useIssueState hook,
+          story fixture is an OPEN PR) — the Figma audit's gray cross-reference
+          icon is behind the live code here. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={GitPullRequestIcon} className={classes.BadgeIconOpen} aria-label="Unlinked pull request" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Unlinked pull request</span>
+          <Actor />
+          {'removed a link to a pull request '}
+          <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            Add retry logic to the uploader
+          </Link>
+          <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Single commit reference — ReferencedEvent.tsx. The timestamp renders
+          inline (showAgoTimestamp={false}) and the commit card is sub-content. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={GitCommitIcon} aria-label="Commit reference" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Single commit reference</span>
+          <Actor />
+          {'added a commit that references this issue '}
+          <Time date="2022-07-24T16:40:00Z" />
+          {/* Simplified ReferencedEventInner card (github-ui composes message +
+              verification status + abbreviated OID per commit). */}
+          <div className={classes.CommitRefBox}>
+            <div className={classes.CommitRefRow}>
+              <Link href="#" className={classes.CommitRefMessage} muted>
+                Fix flaky avatar upload retry
+              </Link>
+              <span>
+                <Label variant="success">Verified</Label>{' '}
+                <Link href="#" className={classes.CommitRefOid} muted>
+                  abc1234
+                </Link>
+              </span>
+            </div>
+          </div>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Multiple commit references — same event, pluralized copy + N cards. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={GitCommitIcon} aria-label="Commit references" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Multiple commit references</span>
+          <Actor />
+          {'added 3 commits that reference this issue '}
+          <Time date="2022-07-23T11:05:00Z" />
+          <div className={classes.CommitRefBox}>
+            <div className={classes.CommitRefRow}>
+              <Link href="#" className={classes.CommitRefMessage} muted>
+                Fix flaky avatar upload retry
+              </Link>
+              <Link href="#" className={classes.CommitRefOid} muted>
+                abc1234
+              </Link>
+            </div>
+            <div className={classes.CommitRefRow}>
+              <Link href="#" className={classes.CommitRefMessage} muted>
+                Add regression test for retry path
+              </Link>
+              <Link href="#" className={classes.CommitRefOid} muted>
+                def5678
+              </Link>
+            </div>
+            <div className={classes.CommitRefRow}>
+              <Link href="#" className={classes.CommitRefMessage} muted>
+                Document the retry backoff
+              </Link>
+              <Link href="#" className={classes.CommitRefOid} muted>
+                9a0b1c2
+              </Link>
+            </div>
+          </div>
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Duplicates event group (audit § 6).
+ *
+ * All four variants use a default (muted) `DuplicateIcon` badge. This is the
+ * first group with a right-controls case: github-ui's `MarkedAsDuplicateEvent`
+ * renders an "Undo" button via `TimelineRow.Trailing` when the viewer can undo.
+ * We map that to the `Timeline.Actions` slot (sibling of `Timeline.Body`).
+ */
+export const EventDuplicates = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Marked this as a duplicate of <canonical>. Right-controls "Undo" button
+          (viewerCanUndo) → Timeline.Actions. The canonical issue is open, so its
+          IssueLink uses the open (green) state icon. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={DuplicateIcon} aria-label="Marked as duplicate" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Marked as duplicate</span>
+          <Actor />
+          {'marked this as a duplicate of '}
+          <Link href="#" className={classes.IssueLink}>
+            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+            <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
+            <span className={classes.IssueLinkNumber}>#42</span>
+          </Link>{' '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+        <Timeline.Actions>
+          <Button size="small">Undo</Button>
+        </Timeline.Actions>
+      </Timeline.Item>
+
+      {/* Marked <canonical> as a duplicate of this issue — no right controls. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={DuplicateIcon} aria-label="Marked as canonical" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Marked as canonical</span>
+          <Actor />
+          {'marked '}
+          <Link href="#" className={classes.IssueLink}>
+            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+            <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
+            <span className={classes.IssueLinkNumber}>#43</span>
+          </Link>
+          {' as a duplicate of this issue '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Unmarked this as a duplicate of <canonical>. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={DuplicateIcon} aria-label="Unmarked as duplicate" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Unmarked as duplicate</span>
+          <Actor />
+          {'unmarked this as a duplicate of '}
+          <Link href="#" className={classes.IssueLink}>
+            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+            <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
+            <span className={classes.IssueLinkNumber}>#42</span>
+          </Link>{' '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Unmarked <canonical> as a duplicate of this issue. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={DuplicateIcon} aria-label="Unmarked as canonical" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Unmarked as canonical</span>
+          <Actor />
+          {'unmarked '}
+          <Link href="#" className={classes.IssueLink}>
+            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+            <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
+            <span className={classes.IssueLinkNumber}>#43</span>
+          </Link>
+          {' as a duplicate of this issue '}
+          <Time date="2022-07-23T11:05:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Moderation event group (audit § 7).
+ *
+ * Blocks use a default `BlockedIcon` badge; comment pin/unpin use `PinIcon`.
+ * github-ui's UserBlockedEvent renders the blocked user as a bold profile link
+ * (no avatar) via `ProfileReference`.
+ */
+export const EventModeration = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* User blocked (permanent) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="User blocked" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>User blocked</span>
+          <Actor />
+          {'blocked '}
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            six7
+          </Link>{' '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* User temporarily blocked */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="User temporarily blocked" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>User temporarily blocked</span>
+          <Actor />
+          {'temporarily blocked '}
+          <Link href="#" className={classes.LinkWithBoldStyle}>
+            six7
+          </Link>{' '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Comment pinned — IssueCommentPinnedEvent.tsx links the pinned comment. */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={PinIcon} aria-label="Comment pinned" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Comment pinned</span>
+          <Actor />
+          {'pinned a '}
+          <Link href="#" inline>
+            comment
+          </Link>{' '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Comment unpinned */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={PinIcon} aria-label="Comment unpinned" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Comment unpinned</span>
+          <Actor />
+          {'unpinned a '}
+          <Link href="#" inline>
+            comment
+          </Link>{' '}
+          <Time date="2022-07-23T11:05:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Issue-types event group (audit § 10).
+ *
+ * All three variants use a default `IssueOpenedIcon` badge. github-ui composes
+ * a colored `IssueTypeToken` (Primer `Token` with named-color styling) that
+ * links to the type-filtered issue list; approximated here with Primer
+ * functional color tokens.
+ */
+export const EventIssueTypes = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Type added */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueOpenedIcon} aria-label="Issue type added" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Issue type added</span>
+          <Actor />
+          {'added the '}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="Bug"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-danger-muted)',
+                color: 'var(--fgColor-danger)',
+                borderColor: 'var(--borderColor-danger-muted)',
+              }}
+            />
+          </span>
+          {' issue type '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Type removed */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueOpenedIcon} aria-label="Issue type removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Issue type removed</span>
+          <Actor />
+          {'removed the '}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="Bug"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-danger-muted)',
+                color: 'var(--fgColor-danger)',
+                borderColor: 'var(--borderColor-danger-muted)',
+              }}
+            />
+          </span>
+          {' issue type '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Type changed */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueOpenedIcon} aria-label="Issue type changed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Issue type changed</span>
+          <Actor />
+          {'changed the issue type from '}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="Bug"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-danger-muted)',
+                color: 'var(--fgColor-danger)',
+                borderColor: 'var(--borderColor-danger-muted)',
+              }}
+            />
+          </span>
+          {' to '}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="Feature"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-accent-muted)',
+                color: 'var(--fgColor-accent)',
+                borderColor: 'var(--borderColor-accent-muted)',
+              }}
+            />
+          </span>{' '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Issue-hierarchy event group (audit § 8).
+ *
+ * Sub-issue events use `IssueTracksIcon`; parent-issue events use
+ * `IssueTrackedByIcon`. All default (muted) badge. github-ui renders the
+ * linked issues in a bordered list (`TimelineRow.Secondary`) below the copy.
+ *
+ * SINGLE vs MULTIPLE: live code branches on `itemsToRender.length` — the
+ * leading copy switches singular/plural ("added a sub-issue" -> "added
+ * sub-issues") AND the secondary list grows from 1 to N `IssueLink` rows.
+ * (SubIssueAddedEvent.tsx: `LABELS.timeline.subIssueAdded[length === 1 ?
+ * 'single' : 'multiple']` + `itemsToRender.map(...)`.)
+ */
+export const EventIssueHierarchy = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Sub-issue added (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTracksIcon} aria-label="Sub-issue added" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Sub-issue added (single)</span>
+          <Actor />
+          {'added a sub-issue '}
+          <Time date="2022-07-26T11:46:07Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#42</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Sub-issue added (multiple) — plural copy + N reference rows */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTracksIcon} aria-label="Sub-issues added" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Sub-issues added (multiple)</span>
+          <Actor />
+          {'added sub-issues '}
+          <Time date="2022-07-25T09:12:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#42</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+                <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
+                <span className={classes.IssueLinkNumber}>#43</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Sub-issue removed (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTracksIcon} aria-label="Sub-issue removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Sub-issue removed (single)</span>
+          <Actor />
+          {'removed a sub-issue '}
+          <Time date="2022-07-24T16:40:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#42</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Sub-issues removed (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTracksIcon} aria-label="Sub-issues removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Sub-issues removed (multiple)</span>
+          <Actor />
+          {'removed sub-issues '}
+          <Time date="2022-07-23T11:05:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#42</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+                <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
+                <span className={classes.IssueLinkNumber}>#43</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Parent issue added (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue added" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Parent issue added (single)</span>
+          <Actor />
+          {'added a parent issue '}
+          <Time date="2022-07-22T14:20:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                <span className={classes.IssueLinkNumber}>#7</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Parent issues added (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues added" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Parent issues added (multiple)</span>
+          <Actor />
+          {'added parent issues '}
+          <Time date="2022-07-21T08:30:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                <span className={classes.IssueLinkNumber}>#7</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
+                <span className={classes.IssueLinkNumber}>#8</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Parent issue removed (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Parent issue removed (single)</span>
+          <Actor />
+          {'removed a parent issue '}
+          <Time date="2022-07-20T10:00:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                <span className={classes.IssueLinkNumber}>#7</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Parent issues removed (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Parent issues removed (multiple)</span>
+          <Actor />
+          {'removed parent issues '}
+          <Time date="2022-07-19T13:15:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                <span className={classes.IssueLinkNumber}>#7</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
+                <span className={classes.IssueLinkNumber}>#8</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Dependencies event group (audit § 9).
+ *
+ * Blocked-by and blocking events both use `BlockedIcon` (default badge). The
+ * dependent issues render in a bordered secondary list, like the hierarchy
+ * group.
+ *
+ * SINGLE vs MULTIPLE: live code branches on `itemsToRender.length`. Singular
+ * copy has no count ("marked this as blocked"); plural copy adds a count
+ * ("marked this as blocked by 2 issues") via `LABELS.timeline.blockedByAdded
+ * .multiple(count)`, and the secondary list grows from 1 to N rows.
+ */
+export const EventDependencies = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Blocked by (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Marked as blocked" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocked by (single)</span>
+          <Actor />
+          {'marked this as blocked '}
+          <Time date="2022-07-26T11:46:07Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                <span className={classes.IssueLinkNumber}>#51</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocked by (multiple) — count in copy + N rows */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Marked as blocked by multiple issues" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocked by (multiple)</span>
+          <Actor />
+          {'marked this as blocked by 2 issues '}
+          <Time date="2022-07-25T09:12:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                <span className={classes.IssueLinkNumber}>#51</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
+                <span className={classes.IssueLinkNumber}>#52</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocked by removed (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocked by removed (single)</span>
+          <Actor />
+          {'unmarked this as blocked '}
+          <Time date="2022-07-24T16:40:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                <span className={classes.IssueLinkNumber}>#51</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocked by removed (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked by multiple issues" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocked by removed (multiple)</span>
+          <Actor />
+          {'unmarked this as blocked by 2 issues '}
+          <Time date="2022-07-23T11:05:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                <span className={classes.IssueLinkNumber}>#51</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
+                <span className={classes.IssueLinkNumber}>#52</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocking (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Marked as blocking" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocking (single)</span>
+          <Actor />
+          {'marked this as blocking '}
+          <Time date="2022-07-22T14:20:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#60</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocking (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Marked as blocking multiple issues" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocking (multiple)</span>
+          <Actor />
+          {'marked this as blocking 2 issues '}
+          <Time date="2022-07-21T08:30:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#60</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
+                <span className={classes.IssueLinkNumber}>#61</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocking removed (single) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocking removed (single)</span>
+          <Actor />
+          {'unmarked this as blocking '}
+          <Time date="2022-07-20T10:00:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#60</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Blocking removed (multiple) */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking multiple issues" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Blocking removed (multiple)</span>
+          <Actor />
+          {'unmarked this as blocking 2 issues '}
+          <Time date="2022-07-19T13:15:00Z" />
+          <ul className={classes.RefList}>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                <span className={classes.IssueLinkNumber}>#60</span>
+              </Link>
+            </li>
+            <li className={classes.RefListItem}>
+              <Link href="#" className={classes.IssueLink}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
+                <span className={classes.IssueLinkNumber}>#61</span>
+              </Link>
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+/**
+ * The Issue-fields event group (audit § 11).
+ *
+ * Custom issue-field updates. The badge icon is per field TYPE, resolved by
+ * github-ui's `getFieldTypeOcticon`: text -> `TypographyIcon`, number ->
+ * `NumberIcon`, date -> `CalendarIcon`, single-select -> `SingleSelectIcon`.
+ * All default (muted) badge. Copy: set -> "set {field} to {value}", changed ->
+ * "changed {field} to {value}", cleared -> "cleared {field}" (no value).
+ * Single-select values render as a colored token; date as a formatted date.
+ *
+ * The final three variants are ROLLUPS (`RolledupIssueFieldEvent`): multiple
+ * field updates collapse into one row — "updated {…}", "removed {…}", or both
+ * joined by "and also". Rollup rows use the default-type (`TypographyIcon`)
+ * badge. (Audit notes the IssueField rollup window is 1 hour; fixtures model
+ * only the rendered variants, not the timing.)
+ */
+export const EventIssueFields = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    <Timeline aria-label="Issue timeline">
+      {/* Set text field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Text field set" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Set · text</span>
+          <Actor />
+          {'set '}
+          <span className={classes.FieldName}>Team</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            Identity
+          </Link>{' '}
+          <Time date="2022-07-26T11:46:07Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Set number field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={NumberIcon} aria-label="Number field set" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Set · number</span>
+          <Actor />
+          {'set '}
+          <span className={classes.FieldName}>Story Points</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            5
+          </Link>{' '}
+          <Time date="2022-07-25T15:30:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Set date field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={CalendarIcon} aria-label="Date field set" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Set · date</span>
+          <Actor />
+          {'set '}
+          <span className={classes.FieldName}>Target Date</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            Aug 1, 2022
+          </Link>{' '}
+          <Time date="2022-07-25T09:12:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Set single-select field — value is a colored token */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={SingleSelectIcon} aria-label="Single select field set" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Set · single select</span>
+          <Actor />
+          {'set '}
+          <span className={classes.FieldName}>Priority</span>
+          {' to '}
+          {/* github-ui renders an `IssueFieldSingleSelectValueToken` (colored
+              Primer Token) for select values; approximated with functional
+              color tokens. */}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="High"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-danger-muted)',
+                color: 'var(--fgColor-danger)',
+                borderColor: 'var(--borderColor-danger-muted)',
+              }}
+            />
+          </span>{' '}
+          <Time date="2022-07-24T16:40:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Changed text field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Text field changed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Changed · text</span>
+          <Actor />
+          {'changed '}
+          <span className={classes.FieldName}>Team</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            Platform
+          </Link>{' '}
+          <Time date="2022-07-23T11:05:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Changed number field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={NumberIcon} aria-label="Number field changed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Changed · number</span>
+          <Actor />
+          {'changed '}
+          <span className={classes.FieldName}>Story Points</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            8
+          </Link>{' '}
+          <Time date="2022-07-22T14:20:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Changed date field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={CalendarIcon} aria-label="Date field changed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Changed · date</span>
+          <Actor />
+          {'changed '}
+          <span className={classes.FieldName}>Target Date</span>
+          {' to '}
+          <Link href="#" inline className={classes.FieldValue}>
+            Aug 15, 2022
+          </Link>{' '}
+          <Time date="2022-07-21T08:30:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Changed single-select field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={SingleSelectIcon} aria-label="Single select field changed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Changed · single select</span>
+          <Actor />
+          {'changed '}
+          <span className={classes.FieldName}>Priority</span>
+          {' to '}
+          <span className={classes.TokenWrapper}>
+            <Token
+              as="a"
+              href="#"
+              text="Low"
+              size="small"
+              style={{
+                backgroundColor: 'var(--bgColor-success-muted)',
+                color: 'var(--fgColor-success)',
+                borderColor: 'var(--borderColor-success-muted)',
+              }}
+            />
+          </span>{' '}
+          <Time date="2022-07-20T10:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Cleared text field — no value */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Text field cleared" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Cleared · text</span>
+          <Actor />
+          {'cleared '}
+          <span className={classes.FieldName}>Team</span> <Time date="2022-07-19T13:15:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Cleared number field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={NumberIcon} aria-label="Number field cleared" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Cleared · number</span>
+          <Actor />
+          {'cleared '}
+          <span className={classes.FieldName}>Story Points</span> <Time date="2022-07-18T09:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Cleared date field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={CalendarIcon} aria-label="Date field cleared" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Cleared · date</span>
+          <Actor />
+          {'cleared '}
+          <span className={classes.FieldName}>Target Date</span> <Time date="2022-07-17T12:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Cleared single-select field */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={SingleSelectIcon} aria-label="Single select field cleared" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Cleared · single select</span>
+          <Actor />
+          {'cleared '}
+          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-16T08:30:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Rollup: updated only — multiple field updates collapsed into one row */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Fields updated" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Rollup · updated</span>
+          <Actor />
+          {'updated '}
+          <span className={classes.FieldName}>Team</span>
+          <Link href="#" inline className={classes.FieldValue}>
+            Platform
+          </Link>
+          {' and '}
+          <span className={classes.FieldName}>Story Points</span>
+          <Link href="#" inline className={classes.FieldValue}>
+            8
+          </Link>{' '}
+          <Time date="2022-07-15T10:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Rollup: removed only */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Fields removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Rollup · removed</span>
+          <Actor />
+          {'removed '}
+          <span className={classes.FieldName}>Team</span>
+          {' and '}
+          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-14T10:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+
+      {/* Rollup: updated and also removed — combined row joined by "and also" */}
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={TypographyIcon} aria-label="Fields updated and removed" />
+        </Timeline.Badge>
+        <Timeline.Body>
+          <span className={classes.VariantLabel}>Rollup · updated and removed</span>
+          <Actor />
+          {'updated '}
+          <span className={classes.FieldName}>Team</span>
+          <Link href="#" inline className={classes.FieldValue}>
+            Platform
+          </Link>
+          {', and also removed '}
+          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-13T10:00:00Z" />
+        </Timeline.Body>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)

From b35c8a66b7bbc493547e42d09bae29715a13d83d Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sat, 27 Jun 2026 20:36:19 -0700
Subject: [PATCH 2/8] Timeline Issues stories: re-home captions and de-border
 secondary content

Move each variant's story caption out of Timeline.Body into an <h3>
heading above its own <Timeline>, so the event row (badge + inline
avatar + body) renders undistorted. Remove invented borders/cards from
the secondary issue-reference lists and commit-reference rows to match
the plain, borderless live GitHub rendering.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...imeline.issues.features.stories.module.css |   44 +-
 .../Timeline.issues.features.stories.tsx      | 2710 +++++++++--------
 2 files changed, 1486 insertions(+), 1268 deletions(-)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
index c7f719e1e4f..0da69722410 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -29,11 +29,17 @@
   color: var(--fgColor-default);
 }
 
-/* Story-only scaffolding: a small caption per Timeline.Item so the variants
-   can be scanned like a Figma component set. Not part of the faithful event. */
+/* Story-only scaffolding: each variant is wrapped in its own <section> with a
+   small caption heading ABOVE the event, so the event row itself (badge +
+   inline avatar + body) renders exactly as it would in product — the caption
+   never sits inside Timeline.Body. Variants stay scannable like a Figma
+   component set. Not part of the faithful event. */
+.Variant {
+  margin-bottom: var(--base-size-24);
+}
+
 .VariantLabel {
-  display: block;
-  margin-bottom: var(--base-size-4);
+  margin: 0 0 var(--base-size-4);
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-semibold);
   color: var(--fgColor-muted);
@@ -102,12 +108,15 @@
   margin: 0 var(--base-size-4);
 }
 
-/* Simplified commit-reference card (github-ui's `ReferencedEventInner`): a
-   bordered row with a monospace commit message link and a trailing SHA. */
+/* Commit reference (github-ui's `ReferencedEventInner`): NOT a bordered card on
+   live GitHub — `.referencedCommitContainer` is a plain flex column (`gap: 2px`)
+   with the monospace message on the left and the SHA on the right. Mirror that:
+   no border, no card background, no row dividers. */
 .CommitRefBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
   margin-top: var(--base-size-8);
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
-  border-radius: var(--borderRadius-medium);
 }
 
 .CommitRefRow {
@@ -115,11 +124,6 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--base-size-8);
-  padding: var(--base-size-8) var(--base-size-12);
-}
-
-.CommitRefRow + .CommitRefRow {
-  border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
 }
 
 .CommitRefMessage {
@@ -134,22 +138,18 @@
 }
 
 /* Secondary reference list (github-ui Hierarchy/Dependency events render the
-   linked issues in a bordered `<ul>` Box below the main copy). Single vs
+   linked issues below the main copy). On live GitHub these are PLAIN, lightly
+   indented rows — state octicon + bold title + muted #number per line — with no
+   surrounding border, no card background, and no row dividers. Single vs
    multiple differ only by item count + singular/plural leading copy. */
 .RefList {
   margin-top: var(--base-size-8);
-  padding: 0;
+  padding-left: var(--base-size-4);
   list-style: none;
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
-  border-radius: var(--borderRadius-medium);
-}
-
-.RefListItem {
-  padding: var(--base-size-8) var(--base-size-12);
 }
 
 .RefListItem + .RefListItem {
-  border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
+  margin-top: var(--base-size-4);
 }
 
 /* IssueField event: the field name reads as semibold inline text, the value as
diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index 828a7b4eb92..9dcc99c5d3d 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -128,155 +128,181 @@ export const EventClosed = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Closed as completed */}
-      <Timeline.Item>
-        <Timeline.Badge variant="done">
-          <Octicon icon={CheckCircleIcon} aria-label="Closed as completed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed as completed</span>
-          <Actor />
-          {'closed this as '}
-          <Link href="#" inline>
-            completed
-          </Link>{' '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Not planned — neutral (gray) badge. Timeline.Badge has no `neutral`
+    {/* Closed as completed */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed as completed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="done">
+            <Octicon icon={CheckCircleIcon} aria-label="Closed as completed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as '}
+            <Link href="#" inline>
+              completed
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Not planned — neutral (gray) badge. Timeline.Badge has no `neutral`
           variant, so drive the documented `--timelineBadge-bgColor` hook inline
           (portable for docs copy-paste; matches production `TimelineRow`). */}
-      <Timeline.Item>
-        <Timeline.Badge
-          style={
-            {
-              '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
-              color: 'var(--fgColor-onEmphasis)',
-            } as React.CSSProperties
-          }
-        >
-          <Octicon icon={CircleSlashIcon} aria-label="Closed as not planned" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed as not planned</span>
-          <Actor />
-          {'closed this as '}
-          <Link href="#" inline>
-            not planned
-          </Link>{' '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Closed via pull request */}
-      <Timeline.Item>
-        <Timeline.Badge variant="done">
-          <Octicon icon={CheckCircleIcon} aria-label="Closed via pull request" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed via pull request</span>
-          <Actor />
-          {'closed this as '}
-          <Link href="#" inline>
-            completed
-          </Link>
-          {' in '}
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            #123
-          </Link>{' '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Closed via commit */}
-      <Timeline.Item>
-        <Timeline.Badge variant="done">
-          <Octicon icon={CheckCircleIcon} aria-label="Closed via commit" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed via commit</span>
-          <Actor />
-          {'closed this as '}
-          <Link href="#" inline>
-            completed
-          </Link>
-          {' in '}
-          <Link href="#" className={classes.CommitSha}>
-            abc1234
-          </Link>{' '}
-          <Time date="2022-07-23T11:05:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Closed via project (ProjectV2 status change). github-ui composes
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed as not planned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge
+            style={
+              {
+                '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
+                color: 'var(--fgColor-onEmphasis)',
+              } as React.CSSProperties
+            }
+          >
+            <Octicon icon={CircleSlashIcon} aria-label="Closed as not planned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as '}
+            <Link href="#" inline>
+              not planned
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Closed via pull request */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed via pull request</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="done">
+            <Octicon icon={CheckCircleIcon} aria-label="Closed via pull request" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as '}
+            <Link href="#" inline>
+              completed
+            </Link>
+            {' in '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              #123
+            </Link>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Closed via commit */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed via commit</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="done">
+            <Octicon icon={CheckCircleIcon} aria-label="Closed via commit" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as '}
+            <Link href="#" inline>
+              completed
+            </Link>
+            {' in '}
+            <Link href="#" className={classes.CommitSha}>
+              abc1234
+            </Link>{' '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Closed via project (ProjectV2 status change). github-ui composes
           the closer link as TableIcon + project title; there is no Primer
           equivalent for github-ui's `ProjectV2` closer link. */}
-      <Timeline.Item>
-        <Timeline.Badge variant="done">
-          <Octicon icon={CheckCircleIcon} aria-label="Closed via project" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed via project</span>
-          <Actor />
-          {'closed this as '}
-          <Link href="#" inline>
-            completed
-          </Link>
-          {' by moving to Done in '}
-          <Octicon icon={TableIcon} size={16} className={classes.ProjectIcon} />
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            Roadmap
-          </Link>{' '}
-          <Time date="2022-07-22T14:20:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Closed as duplicate — neutral (gray) badge (see note above). github-ui
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed via project</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="done">
+            <Octicon icon={CheckCircleIcon} aria-label="Closed via project" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as '}
+            <Link href="#" inline>
+              completed
+            </Link>
+            {' by moving to Done in '}
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectIcon} />
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              Roadmap
+            </Link>{' '}
+            <Time date="2022-07-22T14:20:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Closed as duplicate — neutral (gray) badge (see note above). github-ui
           renders an `IssueLink` (state icon + title + #number + hovercard);
           composed here from Primer primitives. */}
-      <Timeline.Item>
-        <Timeline.Badge
-          style={
-            {
-              '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
-              color: 'var(--fgColor-onEmphasis)',
-            } as React.CSSProperties
-          }
-        >
-          <Octicon icon={CircleSlashIcon} aria-label="Closed as duplicate" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed as duplicate</span>
-          <Actor />
-          {'closed this as a '}
-          <Link href="#" inline>
-            duplicate
-          </Link>
-          {' of '}
-          <Link href="#" className={classes.IssueLink}>
-            <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
-            <span className={classes.IssueLinkTitle}>Fix the flaky avatar test</span>{' '}
-            <span className={classes.IssueLinkNumber}>#42</span>
-          </Link>{' '}
-          <Time date="2022-07-21T08:30:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Closed with no state reason */}
-      <Timeline.Item>
-        <Timeline.Badge variant="done">
-          <Octicon icon={CheckCircleIcon} aria-label="Closed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Closed (no reason)</span>
-          <Actor />
-          {'closed this '}
-          <Time date="2022-07-20T10:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed as duplicate</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge
+            style={
+              {
+                '--timelineBadge-bgColor': 'var(--bgColor-neutral-emphasis)',
+                color: 'var(--fgColor-onEmphasis)',
+              } as React.CSSProperties
+            }
+          >
+            <Octicon icon={CircleSlashIcon} aria-label="Closed as duplicate" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this as a '}
+            <Link href="#" inline>
+              duplicate
+            </Link>
+            {' of '}
+            <Link href="#" className={classes.IssueLink}>
+              <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+              <span className={classes.IssueLinkTitle}>Fix the flaky avatar test</span>{' '}
+              <span className={classes.IssueLinkNumber}>#42</span>
+            </Link>{' '}
+            <Time date="2022-07-21T08:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Closed with no state reason */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Closed (no reason)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="done">
+            <Octicon icon={CheckCircleIcon} aria-label="Closed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'closed this '}
+            <Time date="2022-07-20T10:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -295,93 +321,115 @@ export const EventState = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Reopened — open (green) badge via useIssueState (ReopenedEvent.tsx) */}
-      <Timeline.Item>
-        <Timeline.Badge variant="open">
-          <Octicon icon={IssueReopenedIcon} aria-label="Reopened" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Reopened</span>
-          <Actor />
-          {'reopened this '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Transferred — github-ui's TransferredEvent renders the source repo as a
+    {/* Reopened — open (green) badge via useIssueState (ReopenedEvent.tsx) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Reopened</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge variant="open">
+            <Octicon icon={IssueReopenedIcon} aria-label="Reopened" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'reopened this '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Transferred — github-ui's TransferredEvent renders the source repo as a
           plain inline Link (the audit shows it bold; live code is canonical). */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={LinkExternalIcon} aria-label="Transferred" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Transferred</span>
-          <Actor />
-          {'transferred this issue from '}
-          <Link href="#" inline>
-            octo-org/legacy-repo
-          </Link>{' '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Pinned */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={PinIcon} aria-label="Pinned" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Pinned</span>
-          <Actor />
-          {'pinned this issue '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Unpinned */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={PinIcon} aria-label="Unpinned" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Unpinned</span>
-          <Actor />
-          {'unpinned this issue '}
-          <Time date="2022-07-23T11:05:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Converted to discussion — github-ui's ConvertedToDiscussionEvent links
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Transferred</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LinkExternalIcon} aria-label="Transferred" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'transferred this issue from '}
+            <Link href="#" inline>
+              octo-org/legacy-repo
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Pinned */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Pinned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PinIcon} aria-label="Pinned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'pinned this issue '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unpinned */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unpinned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PinIcon} aria-label="Unpinned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unpinned this issue '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Converted to discussion — github-ui's ConvertedToDiscussionEvent links
           the resulting discussion by number. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={CommentDiscussionIcon} aria-label="Converted to discussion" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Converted to discussion</span>
-          <Actor />
-          {'converted this issue into a discussion '}
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            #123
-          </Link>{' '}
-          <Time date="2022-07-22T14:20:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Converted from draft */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueDraftIcon} aria-label="Converted from draft" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Converted from draft</span>
-          <Actor />
-          {'converted this from a draft issue '}
-          <Time date="2022-07-21T08:30:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Converted to discussion</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={CommentDiscussionIcon} aria-label="Converted to discussion" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'converted this issue into a discussion '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              #123
+            </Link>{' '}
+            <Time date="2022-07-22T14:20:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Converted from draft */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Converted from draft</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueDraftIcon} aria-label="Converted from draft" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'converted this from a draft issue '}
+            <Time date="2022-07-21T08:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -400,115 +448,129 @@ export const EventReferences = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Linked pull request — ConnectedEvent.tsx (CrossReferenceIcon badge,
+    {/* Linked pull request — ConnectedEvent.tsx (CrossReferenceIcon badge,
           open PR state icon inline before the PR title). */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={CrossReferenceIcon} aria-label="Linked pull request" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Linked pull request</span>
-          <Actor />
-          {'linked a pull request that will close this issue '}
-          <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            Add retry logic to the uploader
-          </Link>
-          <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Unlinked pull request — DisconnectedEvent.tsx uses the PR state icon AS
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Linked pull request</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={CrossReferenceIcon} aria-label="Linked pull request" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'linked a pull request that will close this issue '}
+            <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              Add retry logic to the uploader
+            </Link>
+            <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unlinked pull request — DisconnectedEvent.tsx uses the PR state icon AS
           the badge icon (leadingIcon={PullStateIcon}), so the badge octicon is
           green (open) on a default badge. Verified the live render path is
           active (in TIMELINE_ITEMS[__typename], current useIssueState hook,
           story fixture is an OPEN PR) — the Figma audit's gray cross-reference
           icon is behind the live code here. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={GitPullRequestIcon} className={classes.BadgeIconOpen} aria-label="Unlinked pull request" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Unlinked pull request</span>
-          <Actor />
-          {'removed a link to a pull request '}
-          <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            Add retry logic to the uploader
-          </Link>
-          <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Single commit reference — ReferencedEvent.tsx. The timestamp renders
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unlinked pull request</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={GitPullRequestIcon} className={classes.BadgeIconOpen} aria-label="Unlinked pull request" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed a link to a pull request '}
+            <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              Add retry logic to the uploader
+            </Link>
+            <span className={classes.IssueLinkNumber}>#42</span> <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Single commit reference — ReferencedEvent.tsx. The timestamp renders
           inline (showAgoTimestamp={false}) and the commit card is sub-content. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={GitCommitIcon} aria-label="Commit reference" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Single commit reference</span>
-          <Actor />
-          {'added a commit that references this issue '}
-          <Time date="2022-07-24T16:40:00Z" />
-          {/* Simplified ReferencedEventInner card (github-ui composes message +
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Single commit reference</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={GitCommitIcon} aria-label="Commit reference" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added a commit that references this issue '}
+            <Time date="2022-07-24T16:40:00Z" />
+            {/* Simplified ReferencedEventInner card (github-ui composes message +
               verification status + abbreviated OID per commit). */}
-          <div className={classes.CommitRefBox}>
-            <div className={classes.CommitRefRow}>
-              <Link href="#" className={classes.CommitRefMessage} muted>
-                Fix flaky avatar upload retry
-              </Link>
-              <span>
-                <Label variant="success">Verified</Label>{' '}
+            <div className={classes.CommitRefBox}>
+              <div className={classes.CommitRefRow}>
+                <Link href="#" className={classes.CommitRefMessage} muted>
+                  Fix flaky avatar upload retry
+                </Link>
+                <span>
+                  <Label variant="success">Verified</Label>{' '}
+                  <Link href="#" className={classes.CommitRefOid} muted>
+                    abc1234
+                  </Link>
+                </span>
+              </div>
+            </div>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Multiple commit references — same event, pluralized copy + N cards. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Multiple commit references</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={GitCommitIcon} aria-label="Commit references" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added 3 commits that reference this issue '}
+            <Time date="2022-07-23T11:05:00Z" />
+            <div className={classes.CommitRefBox}>
+              <div className={classes.CommitRefRow}>
+                <Link href="#" className={classes.CommitRefMessage} muted>
+                  Fix flaky avatar upload retry
+                </Link>
                 <Link href="#" className={classes.CommitRefOid} muted>
                   abc1234
                 </Link>
-              </span>
-            </div>
-          </div>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Multiple commit references — same event, pluralized copy + N cards. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={GitCommitIcon} aria-label="Commit references" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Multiple commit references</span>
-          <Actor />
-          {'added 3 commits that reference this issue '}
-          <Time date="2022-07-23T11:05:00Z" />
-          <div className={classes.CommitRefBox}>
-            <div className={classes.CommitRefRow}>
-              <Link href="#" className={classes.CommitRefMessage} muted>
-                Fix flaky avatar upload retry
-              </Link>
-              <Link href="#" className={classes.CommitRefOid} muted>
-                abc1234
-              </Link>
-            </div>
-            <div className={classes.CommitRefRow}>
-              <Link href="#" className={classes.CommitRefMessage} muted>
-                Add regression test for retry path
-              </Link>
-              <Link href="#" className={classes.CommitRefOid} muted>
-                def5678
-              </Link>
-            </div>
-            <div className={classes.CommitRefRow}>
-              <Link href="#" className={classes.CommitRefMessage} muted>
-                Document the retry backoff
-              </Link>
-              <Link href="#" className={classes.CommitRefOid} muted>
-                9a0b1c2
-              </Link>
+              </div>
+              <div className={classes.CommitRefRow}>
+                <Link href="#" className={classes.CommitRefMessage} muted>
+                  Add regression test for retry path
+                </Link>
+                <Link href="#" className={classes.CommitRefOid} muted>
+                  def5678
+                </Link>
+              </div>
+              <div className={classes.CommitRefRow}>
+                <Link href="#" className={classes.CommitRefMessage} muted>
+                  Document the retry backoff
+                </Link>
+                <Link href="#" className={classes.CommitRefOid} muted>
+                  9a0b1c2
+                </Link>
+              </div>
             </div>
-          </div>
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -527,86 +589,100 @@ export const EventDuplicates = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Marked this as a duplicate of <canonical>. Right-controls "Undo" button
+    {/* Marked this as a duplicate of <canonical>. Right-controls "Undo" button
           (viewerCanUndo) → Timeline.Actions. The canonical issue is open, so its
           IssueLink uses the open (green) state icon. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={DuplicateIcon} aria-label="Marked as duplicate" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Marked as duplicate</span>
-          <Actor />
-          {'marked this as a duplicate of '}
-          <Link href="#" className={classes.IssueLink}>
-            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-            <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
-            <span className={classes.IssueLinkNumber}>#42</span>
-          </Link>{' '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-        <Timeline.Actions>
-          <Button size="small">Undo</Button>
-        </Timeline.Actions>
-      </Timeline.Item>
-
-      {/* Marked <canonical> as a duplicate of this issue — no right controls. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={DuplicateIcon} aria-label="Marked as canonical" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Marked as canonical</span>
-          <Actor />
-          {'marked '}
-          <Link href="#" className={classes.IssueLink}>
-            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-            <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
-            <span className={classes.IssueLinkNumber}>#43</span>
-          </Link>
-          {' as a duplicate of this issue '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Unmarked this as a duplicate of <canonical>. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={DuplicateIcon} aria-label="Unmarked as duplicate" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Unmarked as duplicate</span>
-          <Actor />
-          {'unmarked this as a duplicate of '}
-          <Link href="#" className={classes.IssueLink}>
-            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-            <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
-            <span className={classes.IssueLinkNumber}>#42</span>
-          </Link>{' '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Unmarked <canonical> as a duplicate of this issue. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={DuplicateIcon} aria-label="Unmarked as canonical" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Unmarked as canonical</span>
-          <Actor />
-          {'unmarked '}
-          <Link href="#" className={classes.IssueLink}>
-            <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-            <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
-            <span className={classes.IssueLinkNumber}>#43</span>
-          </Link>
-          {' as a duplicate of this issue '}
-          <Time date="2022-07-23T11:05:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Marked as duplicate</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={DuplicateIcon} aria-label="Marked as duplicate" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked this as a duplicate of '}
+            <Link href="#" className={classes.IssueLink}>
+              <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+              <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
+              <span className={classes.IssueLinkNumber}>#42</span>
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+          <Timeline.Actions>
+            <Button size="small">Undo</Button>
+          </Timeline.Actions>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Marked <canonical> as a duplicate of this issue — no right controls. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Marked as canonical</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={DuplicateIcon} aria-label="Marked as canonical" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked '}
+            <Link href="#" className={classes.IssueLink}>
+              <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+              <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
+              <span className={classes.IssueLinkNumber}>#43</span>
+            </Link>
+            {' as a duplicate of this issue '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unmarked this as a duplicate of <canonical>. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unmarked as duplicate</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={DuplicateIcon} aria-label="Unmarked as duplicate" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked this as a duplicate of '}
+            <Link href="#" className={classes.IssueLink}>
+              <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+              <span className={classes.IssueLinkTitle}>Upload fails on large avatars</span>{' '}
+              <span className={classes.IssueLinkNumber}>#42</span>
+            </Link>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unmarked <canonical> as a duplicate of this issue. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unmarked as canonical</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={DuplicateIcon} aria-label="Unmarked as canonical" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked '}
+            <Link href="#" className={classes.IssueLink}>
+              <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+              <span className={classes.IssueLinkTitle}>Retry uploads on transient errors</span>{' '}
+              <span className={classes.IssueLinkNumber}>#43</span>
+            </Link>
+            {' as a duplicate of this issue '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -624,71 +700,85 @@ export const EventModeration = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* User blocked (permanent) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="User blocked" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>User blocked</span>
-          <Actor />
-          {'blocked '}
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            six7
-          </Link>{' '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* User temporarily blocked */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="User temporarily blocked" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>User temporarily blocked</span>
-          <Actor />
-          {'temporarily blocked '}
-          <Link href="#" className={classes.LinkWithBoldStyle}>
-            six7
-          </Link>{' '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Comment pinned — IssueCommentPinnedEvent.tsx links the pinned comment. */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={PinIcon} aria-label="Comment pinned" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Comment pinned</span>
-          <Actor />
-          {'pinned a '}
-          <Link href="#" inline>
-            comment
-          </Link>{' '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Comment unpinned */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={PinIcon} aria-label="Comment unpinned" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Comment unpinned</span>
-          <Actor />
-          {'unpinned a '}
-          <Link href="#" inline>
-            comment
-          </Link>{' '}
-          <Time date="2022-07-23T11:05:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    {/* User blocked (permanent) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>User blocked</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="User blocked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'blocked '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              six7
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* User temporarily blocked */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>User temporarily blocked</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="User temporarily blocked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'temporarily blocked '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              six7
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Comment pinned — IssueCommentPinnedEvent.tsx links the pinned comment. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Comment pinned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PinIcon} aria-label="Comment pinned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'pinned a '}
+            <Link href="#" inline>
+              comment
+            </Link>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Comment unpinned */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Comment unpinned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PinIcon} aria-label="Comment unpinned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unpinned a '}
+            <Link href="#" inline>
+              comment
+            </Link>{' '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -707,101 +797,111 @@ export const EventIssueTypes = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Type added */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueOpenedIcon} aria-label="Issue type added" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Issue type added</span>
-          <Actor />
-          {'added the '}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="Bug"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-danger-muted)',
-                color: 'var(--fgColor-danger)',
-                borderColor: 'var(--borderColor-danger-muted)',
-              }}
-            />
-          </span>
-          {' issue type '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Type removed */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueOpenedIcon} aria-label="Issue type removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Issue type removed</span>
-          <Actor />
-          {'removed the '}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="Bug"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-danger-muted)',
-                color: 'var(--fgColor-danger)',
-                borderColor: 'var(--borderColor-danger-muted)',
-              }}
-            />
-          </span>
-          {' issue type '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Type changed */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueOpenedIcon} aria-label="Issue type changed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Issue type changed</span>
-          <Actor />
-          {'changed the issue type from '}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="Bug"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-danger-muted)',
-                color: 'var(--fgColor-danger)',
-                borderColor: 'var(--borderColor-danger-muted)',
-              }}
-            />
-          </span>
-          {' to '}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="Feature"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-accent-muted)',
-                color: 'var(--fgColor-accent)',
-                borderColor: 'var(--borderColor-accent-muted)',
-              }}
-            />
-          </span>{' '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    {/* Type added */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Issue type added</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueOpenedIcon} aria-label="Issue type added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added the '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="Bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>
+            {' issue type '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Type removed */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Issue type removed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueOpenedIcon} aria-label="Issue type removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed the '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="Bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>
+            {' issue type '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Type changed */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Issue type changed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueOpenedIcon} aria-label="Issue type changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed the issue type from '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="Bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>
+            {' to '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="Feature"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-accent-muted)',
+                  color: 'var(--fgColor-accent)',
+                  borderColor: 'var(--borderColor-accent-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -825,211 +925,241 @@ export const EventIssueHierarchy = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Sub-issue added (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTracksIcon} aria-label="Sub-issue added" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Sub-issue added (single)</span>
-          <Actor />
-          {'added a sub-issue '}
-          <Time date="2022-07-26T11:46:07Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#42</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Sub-issue added (multiple) — plural copy + N reference rows */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTracksIcon} aria-label="Sub-issues added" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Sub-issues added (multiple)</span>
-          <Actor />
-          {'added sub-issues '}
-          <Time date="2022-07-25T09:12:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#42</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
-                <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
-                <span className={classes.IssueLinkNumber}>#43</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Sub-issue removed (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTracksIcon} aria-label="Sub-issue removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Sub-issue removed (single)</span>
-          <Actor />
-          {'removed a sub-issue '}
-          <Time date="2022-07-24T16:40:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#42</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Sub-issues removed (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTracksIcon} aria-label="Sub-issues removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Sub-issues removed (multiple)</span>
-          <Actor />
-          {'removed sub-issues '}
-          <Time date="2022-07-23T11:05:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#42</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
-                <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
-                <span className={classes.IssueLinkNumber}>#43</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Parent issue added (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue added" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Parent issue added (single)</span>
-          <Actor />
-          {'added a parent issue '}
-          <Time date="2022-07-22T14:20:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
-                <span className={classes.IssueLinkNumber}>#7</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Parent issues added (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues added" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Parent issues added (multiple)</span>
-          <Actor />
-          {'added parent issues '}
-          <Time date="2022-07-21T08:30:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
-                <span className={classes.IssueLinkNumber}>#7</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
-                <span className={classes.IssueLinkNumber}>#8</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Parent issue removed (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Parent issue removed (single)</span>
-          <Actor />
-          {'removed a parent issue '}
-          <Time date="2022-07-20T10:00:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
-                <span className={classes.IssueLinkNumber}>#7</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Parent issues removed (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Parent issues removed (multiple)</span>
-          <Actor />
-          {'removed parent issues '}
-          <Time date="2022-07-19T13:15:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
-                <span className={classes.IssueLinkNumber}>#7</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
-                <span className={classes.IssueLinkNumber}>#8</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    {/* Sub-issue added (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Sub-issue added (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTracksIcon} aria-label="Sub-issue added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added a sub-issue '}
+            <Time date="2022-07-26T11:46:07Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#42</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Sub-issue added (multiple) — plural copy + N reference rows */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Sub-issues added (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTracksIcon} aria-label="Sub-issues added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added sub-issues '}
+            <Time date="2022-07-25T09:12:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#42</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+                  <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#43</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Sub-issue removed (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Sub-issue removed (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTracksIcon} aria-label="Sub-issue removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed a sub-issue '}
+            <Time date="2022-07-24T16:40:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#42</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Sub-issues removed (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Sub-issues removed (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTracksIcon} aria-label="Sub-issues removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed sub-issues '}
+            <Time date="2022-07-23T11:05:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add retry logic to the uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#42</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueClosedIcon} size={16} className={classes.IssueLinkIcon} />
+                  <span className={classes.IssueLinkTitle}>Document the retry backoff</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#43</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Parent issue added (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Parent issue added (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added a parent issue '}
+            <Time date="2022-07-22T14:20:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#7</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Parent issues added (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Parent issues added (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added parent issues '}
+            <Time date="2022-07-21T08:30:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#7</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#8</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Parent issue removed (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Parent issue removed (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTrackedByIcon} aria-label="Parent issue removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed a parent issue '}
+            <Time date="2022-07-20T10:00:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#7</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Parent issues removed (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Parent issues removed (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={IssueTrackedByIcon} aria-label="Parent issues removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed parent issues '}
+            <Time date="2022-07-19T13:15:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Epic: reliable avatar uploads</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#7</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Q3 reliability tracker</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#8</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -1052,211 +1182,241 @@ export const EventDependencies = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Blocked by (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Marked as blocked" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocked by (single)</span>
-          <Actor />
-          {'marked this as blocked '}
-          <Time date="2022-07-26T11:46:07Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
-                <span className={classes.IssueLinkNumber}>#51</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocked by (multiple) — count in copy + N rows */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Marked as blocked by multiple issues" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocked by (multiple)</span>
-          <Actor />
-          {'marked this as blocked by 2 issues '}
-          <Time date="2022-07-25T09:12:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
-                <span className={classes.IssueLinkNumber}>#51</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
-                <span className={classes.IssueLinkNumber}>#52</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocked by removed (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocked by removed (single)</span>
-          <Actor />
-          {'unmarked this as blocked '}
-          <Time date="2022-07-24T16:40:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
-                <span className={classes.IssueLinkNumber}>#51</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocked by removed (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked by multiple issues" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocked by removed (multiple)</span>
-          <Actor />
-          {'unmarked this as blocked by 2 issues '}
-          <Time date="2022-07-23T11:05:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
-                <span className={classes.IssueLinkNumber}>#51</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
-                <span className={classes.IssueLinkNumber}>#52</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocking (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Marked as blocking" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocking (single)</span>
-          <Actor />
-          {'marked this as blocking '}
-          <Time date="2022-07-22T14:20:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#60</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocking (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Marked as blocking multiple issues" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocking (multiple)</span>
-          <Actor />
-          {'marked this as blocking 2 issues '}
-          <Time date="2022-07-21T08:30:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#60</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
-                <span className={classes.IssueLinkNumber}>#61</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocking removed (single) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocking removed (single)</span>
-          <Actor />
-          {'unmarked this as blocking '}
-          <Time date="2022-07-20T10:00:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#60</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Blocking removed (multiple) */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking multiple issues" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Blocking removed (multiple)</span>
-          <Actor />
-          {'unmarked this as blocking 2 issues '}
-          <Time date="2022-07-19T13:15:00Z" />
-          <ul className={classes.RefList}>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
-                <span className={classes.IssueLinkNumber}>#60</span>
-              </Link>
-            </li>
-            <li className={classes.RefListItem}>
-              <Link href="#" className={classes.IssueLink}>
-                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
-                <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
-                <span className={classes.IssueLinkNumber}>#61</span>
-              </Link>
-            </li>
-          </ul>
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+    {/* Blocked by (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocked by (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Marked as blocked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked this as blocked '}
+            <Time date="2022-07-26T11:46:07Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#51</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocked by (multiple) — count in copy + N rows */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocked by (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Marked as blocked by multiple issues" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked this as blocked by 2 issues '}
+            <Time date="2022-07-25T09:12:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#51</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#52</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocked by removed (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocked by removed (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked this as blocked '}
+            <Time date="2022-07-24T16:40:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#51</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocked by removed (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocked by removed (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Unmarked as blocked by multiple issues" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked this as blocked by 2 issues '}
+            <Time date="2022-07-23T11:05:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Upgrade the storage client</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#51</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Add multipart upload support</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#52</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocking (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocking (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Marked as blocking" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked this as blocking '}
+            <Time date="2022-07-22T14:20:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#60</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocking (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocking (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Marked as blocking multiple issues" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'marked this as blocking 2 issues '}
+            <Time date="2022-07-21T08:30:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#60</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#61</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocking removed (single) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocking removed (single)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked this as blocking '}
+            <Time date="2022-07-20T10:00:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#60</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Blocking removed (multiple) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Blocking removed (multiple)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={BlockedIcon} aria-label="Unmarked as blocking multiple issues" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unmarked this as blocking 2 issues '}
+            <Time date="2022-07-19T13:15:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Ship the avatar uploader</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#60</span>
+                </Link>
+              </li>
+              <li className={classes.RefListItem}>
+                <Link href="#" className={classes.IssueLink}>
+                  <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} />
+                  <span className={classes.IssueLinkTitle}>Roll out to mobile clients</span>{' '}
+                  <span className={classes.IssueLinkNumber}>#61</span>
+                </Link>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )
 
@@ -1283,280 +1443,338 @@ export const EventIssueFields = () => (
       if ((e.target as HTMLElement).closest('a')) e.preventDefault()
     }}
   >
-    <Timeline aria-label="Issue timeline">
-      {/* Set text field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Text field set" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Set · text</span>
-          <Actor />
-          {'set '}
-          <span className={classes.FieldName}>Team</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            Identity
-          </Link>{' '}
-          <Time date="2022-07-26T11:46:07Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Set number field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={NumberIcon} aria-label="Number field set" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Set · number</span>
-          <Actor />
-          {'set '}
-          <span className={classes.FieldName}>Story Points</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            5
-          </Link>{' '}
-          <Time date="2022-07-25T15:30:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Set date field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={CalendarIcon} aria-label="Date field set" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Set · date</span>
-          <Actor />
-          {'set '}
-          <span className={classes.FieldName}>Target Date</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            Aug 1, 2022
-          </Link>{' '}
-          <Time date="2022-07-25T09:12:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Set single-select field — value is a colored token */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={SingleSelectIcon} aria-label="Single select field set" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Set · single select</span>
-          <Actor />
-          {'set '}
-          <span className={classes.FieldName}>Priority</span>
-          {' to '}
-          {/* github-ui renders an `IssueFieldSingleSelectValueToken` (colored
+    {/* Set text field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Set · text</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Text field set" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'set '}
+            <span className={classes.FieldName}>Team</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              Identity
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Set number field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Set · number</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={NumberIcon} aria-label="Number field set" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'set '}
+            <span className={classes.FieldName}>Story Points</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              5
+            </Link>{' '}
+            <Time date="2022-07-25T15:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Set date field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Set · date</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={CalendarIcon} aria-label="Date field set" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'set '}
+            <span className={classes.FieldName}>Target Date</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              Aug 1, 2022
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Set single-select field — value is a colored token */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Set · single select</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={SingleSelectIcon} aria-label="Single select field set" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'set '}
+            <span className={classes.FieldName}>Priority</span>
+            {' to '}
+            {/* github-ui renders an `IssueFieldSingleSelectValueToken` (colored
               Primer Token) for select values; approximated with functional
               color tokens. */}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="High"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-danger-muted)',
-                color: 'var(--fgColor-danger)',
-                borderColor: 'var(--borderColor-danger-muted)',
-              }}
-            />
-          </span>{' '}
-          <Time date="2022-07-24T16:40:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Changed text field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Text field changed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Changed · text</span>
-          <Actor />
-          {'changed '}
-          <span className={classes.FieldName}>Team</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            Platform
-          </Link>{' '}
-          <Time date="2022-07-23T11:05:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Changed number field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={NumberIcon} aria-label="Number field changed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Changed · number</span>
-          <Actor />
-          {'changed '}
-          <span className={classes.FieldName}>Story Points</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            8
-          </Link>{' '}
-          <Time date="2022-07-22T14:20:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Changed date field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={CalendarIcon} aria-label="Date field changed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Changed · date</span>
-          <Actor />
-          {'changed '}
-          <span className={classes.FieldName}>Target Date</span>
-          {' to '}
-          <Link href="#" inline className={classes.FieldValue}>
-            Aug 15, 2022
-          </Link>{' '}
-          <Time date="2022-07-21T08:30:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Changed single-select field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={SingleSelectIcon} aria-label="Single select field changed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Changed · single select</span>
-          <Actor />
-          {'changed '}
-          <span className={classes.FieldName}>Priority</span>
-          {' to '}
-          <span className={classes.TokenWrapper}>
-            <Token
-              as="a"
-              href="#"
-              text="Low"
-              size="small"
-              style={{
-                backgroundColor: 'var(--bgColor-success-muted)',
-                color: 'var(--fgColor-success)',
-                borderColor: 'var(--borderColor-success-muted)',
-              }}
-            />
-          </span>{' '}
-          <Time date="2022-07-20T10:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Cleared text field — no value */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Text field cleared" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Cleared · text</span>
-          <Actor />
-          {'cleared '}
-          <span className={classes.FieldName}>Team</span> <Time date="2022-07-19T13:15:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Cleared number field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={NumberIcon} aria-label="Number field cleared" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Cleared · number</span>
-          <Actor />
-          {'cleared '}
-          <span className={classes.FieldName}>Story Points</span> <Time date="2022-07-18T09:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Cleared date field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={CalendarIcon} aria-label="Date field cleared" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Cleared · date</span>
-          <Actor />
-          {'cleared '}
-          <span className={classes.FieldName}>Target Date</span> <Time date="2022-07-17T12:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Cleared single-select field */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={SingleSelectIcon} aria-label="Single select field cleared" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Cleared · single select</span>
-          <Actor />
-          {'cleared '}
-          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-16T08:30:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Rollup: updated only — multiple field updates collapsed into one row */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Fields updated" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Rollup · updated</span>
-          <Actor />
-          {'updated '}
-          <span className={classes.FieldName}>Team</span>
-          <Link href="#" inline className={classes.FieldValue}>
-            Platform
-          </Link>
-          {' and '}
-          <span className={classes.FieldName}>Story Points</span>
-          <Link href="#" inline className={classes.FieldValue}>
-            8
-          </Link>{' '}
-          <Time date="2022-07-15T10:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Rollup: removed only */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Fields removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Rollup · removed</span>
-          <Actor />
-          {'removed '}
-          <span className={classes.FieldName}>Team</span>
-          {' and '}
-          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-14T10:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-
-      {/* Rollup: updated and also removed — combined row joined by "and also" */}
-      <Timeline.Item>
-        <Timeline.Badge>
-          <Octicon icon={TypographyIcon} aria-label="Fields updated and removed" />
-        </Timeline.Badge>
-        <Timeline.Body>
-          <span className={classes.VariantLabel}>Rollup · updated and removed</span>
-          <Actor />
-          {'updated '}
-          <span className={classes.FieldName}>Team</span>
-          <Link href="#" inline className={classes.FieldValue}>
-            Platform
-          </Link>
-          {', and also removed '}
-          <span className={classes.FieldName}>Priority</span> <Time date="2022-07-13T10:00:00Z" />
-        </Timeline.Body>
-      </Timeline.Item>
-    </Timeline>
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="High"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Changed text field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Changed · text</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Text field changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed '}
+            <span className={classes.FieldName}>Team</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              Platform
+            </Link>{' '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Changed number field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Changed · number</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={NumberIcon} aria-label="Number field changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed '}
+            <span className={classes.FieldName}>Story Points</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              8
+            </Link>{' '}
+            <Time date="2022-07-22T14:20:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Changed date field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Changed · date</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={CalendarIcon} aria-label="Date field changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed '}
+            <span className={classes.FieldName}>Target Date</span>
+            {' to '}
+            <Link href="#" inline className={classes.FieldValue}>
+              Aug 15, 2022
+            </Link>{' '}
+            <Time date="2022-07-21T08:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Changed single-select field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Changed · single select</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={SingleSelectIcon} aria-label="Single select field changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed '}
+            <span className={classes.FieldName}>Priority</span>
+            {' to '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="Low"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-success-muted)',
+                  color: 'var(--fgColor-success)',
+                  borderColor: 'var(--borderColor-success-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-20T10:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Cleared text field — no value */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Cleared · text</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Text field cleared" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'cleared '}
+            <span className={classes.FieldName}>Team</span> <Time date="2022-07-19T13:15:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Cleared number field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Cleared · number</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={NumberIcon} aria-label="Number field cleared" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'cleared '}
+            <span className={classes.FieldName}>Story Points</span> <Time date="2022-07-18T09:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Cleared date field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Cleared · date</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={CalendarIcon} aria-label="Date field cleared" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'cleared '}
+            <span className={classes.FieldName}>Target Date</span> <Time date="2022-07-17T12:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Cleared single-select field */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Cleared · single select</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={SingleSelectIcon} aria-label="Single select field cleared" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'cleared '}
+            <span className={classes.FieldName}>Priority</span> <Time date="2022-07-16T08:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Rollup: updated only — multiple field updates collapsed into one row */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Rollup · updated</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Fields updated" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'updated '}
+            <span className={classes.FieldName}>Team</span>
+            <Link href="#" inline className={classes.FieldValue}>
+              Platform
+            </Link>
+            {' and '}
+            <span className={classes.FieldName}>Story Points</span>
+            <Link href="#" inline className={classes.FieldValue}>
+              8
+            </Link>{' '}
+            <Time date="2022-07-15T10:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Rollup: removed only */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Rollup · removed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Fields removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed '}
+            <span className={classes.FieldName}>Team</span>
+            {' and '}
+            <span className={classes.FieldName}>Priority</span> <Time date="2022-07-14T10:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Rollup: updated and also removed — combined row joined by "and also" */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Rollup · updated and removed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TypographyIcon} aria-label="Fields updated and removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'updated '}
+            <span className={classes.FieldName}>Team</span>
+            <Link href="#" inline className={classes.FieldValue}>
+              Platform
+            </Link>
+            {', and also removed '}
+            <span className={classes.FieldName}>Priority</span> <Time date="2022-07-13T10:00:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
   </div>
 )

From 0182d761b4b4995b5748b63104302dd802937ff1 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sat, 27 Jun 2026 22:22:56 -0700
Subject: [PATCH 3/8] Timeline Issues stories: fix commit-message weight,
 retitle under Events/Issues

Match live ReferencedEventInner: commit-reference message is default
weight/color (drop semibold). Retitle story to
Components/Timeline/Events/Issues to nest by surface; filename unchanged
so the *.features.stories.tsx docs convention is preserved.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/Timeline/Timeline.issues.features.stories.module.css    | 2 +-
 .../react/src/Timeline/Timeline.issues.features.stories.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
index 0da69722410..69a96b15911 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -127,7 +127,7 @@
 }
 
 .CommitRefMessage {
-  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-body-size-small);
   color: var(--fgColor-default);
 }
 
diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index 9dcc99c5d3d..1da704f4703 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -89,7 +89,7 @@ const Time = ({date}: {date: string}) => (
 )
 
 export default {
-  title: 'Components/Timeline/Issues Features',
+  title: 'Components/Timeline/Events/Issues',
   component: Timeline,
   subcomponents: {
     'Timeline.Item': Timeline.Item,

From 4050b753041b428ec8e947a2a29ffb40028e975b Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sat, 27 Jun 2026 22:31:12 -0700
Subject: [PATCH 4/8] docs(Timeline): note issue event stories are
 Storybook-only by design

These stories are intentionally not wired into components-json / primer.style
docs; individual events are not consumer-facing components.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/Timeline/Timeline.issues.features.stories.tsx      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index 1da704f4703..eed507f8afc 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -43,6 +43,13 @@ import classes from './Timeline.issues.features.stories.module.css'
  * (`issue-timeline-events-for-figma.md`) and verified against the live React
  * implementation in `github/github-ui` (`packages/timeline-items`).
  *
+ * SCOPE: These are Storybook-only examples by design. They are intentionally
+ * NOT wired into components-json / the primer.style docs page (do NOT add this
+ * file to `Timeline.docs.json` or `build.ts`). Individual timeline events are not
+ * consumer-facing components — the primer.style Timeline page reflects the base
+ * `Timeline` component's own stories, and any docs-site representation is a
+ * Phase 3 consideration via base-component story changes, out of scope here.
+ *
  * FUTURE FILTERING (taxonomy still open — github/primer#6663): category
  * `data-*` attributes (e.g. `data-event-category="closed"`) will attach to each
  * `Timeline.Item` below so stories can be filtered/grouped by event family. We

From f3eda9e4276e6403d73b6a4b8305e0470f411d17 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sat, 27 Jun 2026 22:40:05 -0700
Subject: [PATCH 5/8] fix(Timeline): commit-ref message muted + monospace to
 match live

Live ReferencedEventInner renders the message headline via
.commitHashLink (muted + monospace), not default-color sans-serif.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/Timeline/Timeline.issues.features.stories.module.css   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
index 69a96b15911..0dfbef0c8aa 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -127,8 +127,9 @@
 }
 
 .CommitRefMessage {
+  font-family: var(--fontStack-monospace);
   font-size: var(--text-body-size-small);
-  color: var(--fgColor-default);
+  color: var(--fgColor-muted);
 }
 
 .CommitRefOid {

From 3ca0a5d1a2d3b9d1e096c9ed45084ea588c13829 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sun, 28 Jun 2026 01:30:06 -0700
Subject: [PATCH 6/8] feat(Timeline): add EventProject shared-event group
 (Issue version)

Adds the ProjectV2 shared timeline events (added/removed/status-changed)
as the Issue-surface version, sourced from live github-ui timeline-items.
Documents the PR (ERB) divergence inline for the future PR surface.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...imeline.issues.features.stories.module.css |  15 +++
 .../Timeline.issues.features.stories.tsx      | 117 ++++++++++++++++++
 2 files changed, 132 insertions(+)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
index 0dfbef0c8aa..7129c360b25 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -78,6 +78,21 @@
   color: var(--fgColor-muted);
 }
 
+/* Issue-version ProjectV2 reference (github-ui `ProjectV2.tsx`): an inline
+   default-colored TableIcon octicon followed by a regular-weight, default-color
+   link. The underline comes from the Link `inline` prop (always-on underline,
+   which also satisfies the high-contrast a11y rule). Mirrors live
+   `.projectLink { color: var(--fgColor-default) }`. NOTE: the PR (ERB) surface
+   renders this differently — see the EventProject group comment. */
+.ProjectRefIcon {
+  vertical-align: middle;
+  margin-right: var(--base-size-4);
+}
+
+.ProjectRefLink {
+  color: var(--fgColor-default);
+}
+
 /* Open (green) state icon variant for IssueLink references that point at an
    open issue/PR (e.g. the canonical issue in a "marked as duplicate of" row). */
 .IssueLinkIconOpen {
diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index eed507f8afc..71404fa6bf7 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -1785,3 +1785,120 @@ export const EventIssueFields = () => (
     </section>
   </div>
 )
+
+/**
+ * The Project event group — shared timeline events (ProjectV2), Issue version.
+ *
+ * Sourced from the live React `timeline-items` components, which are the ISSUE
+ * implementation of these "shared" events: `AddedToProjectV2Event.tsx`,
+ * `RemovedFromProjectV2Event.tsx`, `ProjectV2ItemStatusChangedEvent.tsx`, and
+ * the shared `ProjectV2.tsx` sub-component. All three use a `TableIcon` badge.
+ *
+ * Issue-version `{ProjectV2}` reference (live `ProjectV2.tsx`): an inline
+ * default-colored `TableIcon` octicon, then a `<Link inline>` with REGULAR
+ * weight and `color: var(--fgColor-default)` (NOT bold, NOT accent-blue). The
+ * `inline` prop supplies the always-on underline. Status text is PLAIN TEXT
+ * (live `ProjectV2ItemStatusChangedEvent.tsx` renders `status`/`previousStatus`
+ * as bare strings, not bold).
+ *
+ * PR-SURFACE DIVERGENCE (build the PR version from ERB later, NOT from this):
+ * The PR (ERB) path renders these events DIFFERENTLY —
+ *   - Project link: `app/views/issues/events/_memex_project_link.html.erb` uses
+ *     `<a class="Link--primary text-bold">` — i.e. a BOLD project name, NO inline
+ *     `TableIcon`, and hover-only underline.
+ *   - Status: `_project_item_status_changed_event.html.erb` wraps the status in
+ *     `<strong>` (BOLD).
+ * So: Issue = inline icon + regular-weight always-underlined link + plain-text
+ * status; PR = bold link, no icon, bold status. Whoever builds the PR surface
+ * must use the ERB spec above, not this Issue composition.
+ */
+export const EventProject = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Added to project */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Added to project</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TableIcon} aria-label="Added to project" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added this to '}
+            {/* Issue-version ProjectV2 reference (github-ui `ProjectV2.tsx`). */}
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectRefIcon} />
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              Roadmap
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Removed from project */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Removed from project</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TableIcon} aria-label="Removed from project" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed this from '}
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectRefIcon} />
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              Roadmap
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Project status changed. Two forms per live
+        `ProjectV2ItemStatusChangedEvent.tsx`: with no previous status,
+        "moved this to {status} in {project}"; with a previous status,
+        "moved this from {previousStatus} to {status} in {project}". Status
+        strings are PLAIN TEXT (not bold). Both forms shown under one caption. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Project status changed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TableIcon} aria-label="Project status changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'moved this to In Progress in '}
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectRefIcon} />
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              Roadmap
+            </Link>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TableIcon} aria-label="Project status changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'moved this from Todo to In Progress in '}
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectRefIcon} />
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              Roadmap
+            </Link>{' '}
+            <Time date="2022-07-24T16:42:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)

From 2dabb7f391570d2a4d6931b13c92a2003295ca76 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sun, 28 Jun 2026 01:33:27 -0700
Subject: [PATCH 7/8] fix(Timeline): default-color project icon in EventClosed
 'closed via project'

Live ClosedEvent.tsx renders the project closer TableIcon at default color
(not muted). Reuse .ProjectRefIcon and drop the now-unused .ProjectIcon.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...Timeline.issues.features.stories.module.css | 18 ++++++------------
 .../Timeline.issues.features.stories.tsx       |  2 +-
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
index 7129c360b25..c7e69869f15 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.module.css
@@ -72,18 +72,12 @@
   color: var(--fgColor-muted);
 }
 
-.ProjectIcon {
-  vertical-align: middle;
-  margin-right: var(--base-size-4);
-  color: var(--fgColor-muted);
-}
-
-/* Issue-version ProjectV2 reference (github-ui `ProjectV2.tsx`): an inline
-   default-colored TableIcon octicon followed by a regular-weight, default-color
-   link. The underline comes from the Link `inline` prop (always-on underline,
-   which also satisfies the high-contrast a11y rule). Mirrors live
-   `.projectLink { color: var(--fgColor-default) }`. NOTE: the PR (ERB) surface
-   renders this differently — see the EventProject group comment. */
+/* Issue-version ProjectV2 reference (github-ui `ProjectV2.tsx` + `ClosedEvent.tsx`):
+   an inline default-colored TableIcon octicon followed by a default-color link
+   (`.ProjectRefLink`). The underline comes from the Link `inline` prop (always-on
+   underline, which also satisfies the high-contrast a11y rule). Mirrors live
+   `.projectLink`/`.stateReasonLink` (both `color: var(--fgColor-default)`). NOTE:
+   the PR (ERB) surface renders this differently — see the EventProject group. */
 .ProjectRefIcon {
   vertical-align: middle;
   margin-right: var(--base-size-4);
diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index 71404fa6bf7..89ad00e6777 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -249,7 +249,7 @@ export const EventClosed = () => (
               completed
             </Link>
             {' by moving to Done in '}
-            <Octicon icon={TableIcon} size={16} className={classes.ProjectIcon} />
+            <Octicon icon={TableIcon} size={16} className={classes.ProjectRefIcon} />
             <Link href="#" className={classes.LinkWithBoldStyle}>
               Roadmap
             </Link>{' '}

From e0034d786cbfb2b0a18e6e69b4ece756dc6c5d81 Mon Sep 17 00:00:00 2001
From: Jan Maarten <83665577+janmaarten-a11y@users.noreply.github.com>
Date: Sun, 28 Jun 2026 01:40:40 -0700
Subject: [PATCH 8/8] Add shared badge-row timeline event stories (Issues
 surface)

Add 7 shared timeline event groups (Issue versions) to the Issues
features story file: Labels, Title, Milestones, Assignments, Lock/Unlock,
Comment deleted, and Cross-references. Sourced from the live github-ui
React timeline-items components; PR (ERB) divergences documented inline.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../Timeline.issues.features.stories.tsx      | 634 ++++++++++++++++++
 1 file changed, 634 insertions(+)

diff --git a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
index 89ad00e6777..9998062f195 100644
--- a/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.issues.features.stories.tsx
@@ -20,11 +20,18 @@ import {
   IssueTrackedByIcon,
   IssueTracksIcon,
   LinkExternalIcon,
+  LockIcon,
+  MilestoneIcon,
   NumberIcon,
+  PencilIcon,
+  PersonIcon,
   PinIcon,
   SingleSelectIcon,
   TableIcon,
+  TagIcon,
+  TrashIcon,
   TypographyIcon,
+  UnlockIcon,
 } from '@primer/octicons-react'
 import Avatar from '../Avatar'
 import {Button} from '../Button'
@@ -1902,3 +1909,630 @@ export const EventProject = () => (
     </section>
   </div>
 )
+
+/**
+ * The Labels event group — shared timeline events (Issue version).
+ *
+ * Sourced from live `LabeledEvent.tsx` / `UnlabeledEvent.tsx` (badge `TagIcon`).
+ * Copy is just "added {label}" / "removed {label}" (live `LABELS.timeline.added`
+ * / `removed`, then the `Label` pill — no "the"/"label" filler words). The
+ * rolled-up form (`RolledupLabeledEvent`) joins them: "added {…} and removed {…}".
+ *
+ * Labels render as colored pills; the color comes from the label in live code
+ * (`@github-ui/label-token` `LabelToken`). We compose the closest Primer
+ * equivalent with `Token` + the label's semantic color tokens (same pattern as
+ * the IssueTypes group).
+ *
+ * PR ERB source: `app/views/issues/events/_labeled_event.html.erb` — verify on
+ * the PR build (label pill markup is shared, copy is the same).
+ */
+export const EventLabels = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Label added */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Label added</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TagIcon} aria-label="Label added" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Label removed */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Label removed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TagIcon} aria-label="Label removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Added + removed (rollup) — RolledupLabeledEvent joins both renderings
+        with "and" between them. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Labels added and removed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TagIcon} aria-label="Labels added and removed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="enhancement"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-accent-muted)',
+                  color: 'var(--fgColor-accent)',
+                  borderColor: 'var(--borderColor-accent-muted)',
+                }}
+              />
+            </span>
+            {' and removed '}
+            <span className={classes.TokenWrapper}>
+              <Token
+                as="a"
+                href="#"
+                text="bug"
+                size="small"
+                style={{
+                  backgroundColor: 'var(--bgColor-danger-muted)',
+                  color: 'var(--fgColor-danger)',
+                  borderColor: 'var(--borderColor-danger-muted)',
+                }}
+              />
+            </span>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Title event group — shared timeline event (Issue version).
+ *
+ * Sourced from live `RenamedTitleEvent.tsx` (badge `PencilIcon`). Copy is
+ * "changed the title {old} {new}" where the OLD title is struck through (`<del>`,
+ * default color) and the NEW title is plain (default color, no underline). NOTE
+ * audit-vs-live DRIFT: the audit phrases this "changed the title from {old} to
+ * {new}", but live renders NO "from"/"to" words — just strikethrough old then
+ * new (`LABELS.timeline.renamedTitle` = "changed the title").
+ *
+ * PR ERB source: `app/views/issues/events/_renamed_event.html.erb` — verify on
+ * the PR build.
+ */
+export const EventTitle = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Title changed */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Title changed</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PencilIcon} aria-label="Title changed" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'changed the title '}
+            <del>Fix the uplaod bug</del> Fix the upload bug <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Milestones event group — shared timeline events (Issue version).
+ *
+ * Sourced from live `MilestonedEvent.tsx` / `DemilestonedEvent.tsx` (badge
+ * `MilestoneIcon`). Copy: "added this to the {milestone} milestone" /
+ * "removed this from the {milestone} milestone" (`LABELS.timeline.addedToMilestone`
+ * / `removedFromMilestone` + the milestone link + `milestone`). The milestone
+ * link is a regular-weight, default-color `<Link inline>` (live `.milestoneLink`
+ * = `color: var(--fgColor-default)`); the `inline` prop gives the always-on
+ * underline (also satisfies the high-contrast a11y rule).
+ *
+ * PR ERB source: `app/views/issues/events/_milestoned_event.html.erb` — verify
+ * on the PR build.
+ */
+export const EventMilestones = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Added to milestone */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Added to milestone</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={MilestoneIcon} aria-label="Added to milestone" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'added this to the '}
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              v2.0
+            </Link>
+            {' milestone '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Removed from milestone */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Removed from milestone</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={MilestoneIcon} aria-label="Removed from milestone" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed this from the '}
+            <Link href="#" inline className={classes.ProjectRefLink}>
+              v2.0
+            </Link>
+            {' milestone '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Assignments event group — shared timeline events (Issue version).
+ *
+ * Sourced from live `AssignedEvent.tsx` / `UnassignedEvent.tsx` (badge
+ * `PersonIcon`). Copy: self → "self-assigned this" / "removed their assignment"
+ * (no actor-name prefix); other → "assigned {user}" / "unassigned {user}";
+ * multiple → joined with "and". The assignee is a BOLD text link with NO avatar
+ * in the React Issue impl (`AssignmentEventAssignee` → `ProfileReference` inside
+ * a `<Link>`, no avatar element).
+ *
+ * PR/Dependabot DIVERGENCE: Dependabot's assignment events render the assignee
+ * via a different ActorComponent that DOES include an inline avatar (avatar +
+ * name), unlike this Issue impl (bold name only). Whoever builds the
+ * Dependabot/PR surface must use that ActorComponent, not this composition.
+ */
+export const EventAssignments = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Self-assigned */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Self-assigned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Self-assigned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'self-assigned this '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Assigned someone else — assignee is a bold link, no avatar. */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Assigned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Assigned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'assigned '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              hubot
+            </Link>{' '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Assigned multiple — joined with "and". */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Assigned multiple</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Assigned multiple" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'assigned '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              hubot
+            </Link>
+            {' and '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              octocat
+            </Link>{' '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Self-unassigned */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Self-unassigned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Self-unassigned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'removed their assignment '}
+            <Time date="2022-07-23T11:05:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unassigned someone else */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unassigned</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Unassigned" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unassigned '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              hubot
+            </Link>{' '}
+            <Time date="2022-07-22T14:20:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unassigned multiple — joined with "and". */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unassigned multiple</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={PersonIcon} aria-label="Unassigned multiple" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unassigned '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              hubot
+            </Link>
+            {' and '}
+            <Link href="#" className={classes.LinkWithBoldStyle}>
+              octocat
+            </Link>{' '}
+            <Time date="2022-07-21T08:30:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Lock/Unlock event group — shared timeline events (Issue version).
+ *
+ * Sourced from live `LockedEvent.tsx` / `UnlockedEvent.tsx`. Locked uses the
+ * `LockIcon` badge; UNLOCKED uses the `UnlockIcon` badge (badge DRIFT vs the
+ * single "LockIcon" family note — live `UnlockedEvent` passes
+ * `leadingIcon={UnlockIcon}`). Locked copy: "locked as {reason} and limited
+ * conversation to collaborators" (reason from `VALUES.lockedReasonStrings`:
+ * off topic / resolved / spam / too heated); with no reason: "locked and limited
+ * conversation to collaborators". Unlocked copy: "unlocked this conversation".
+ *
+ * PR ERB source: `app/views/issues/events/_locked_event.html.erb` — verify on
+ * the PR build.
+ */
+export const EventLockUnlock = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Locked with reason — one row per reason (off topic / resolved / spam /
+        too heated). */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Locked (with reason)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LockIcon} aria-label="Locked as off topic" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'locked as off topic and limited conversation to collaborators '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LockIcon} aria-label="Locked as resolved" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'locked as resolved and limited conversation to collaborators '}
+            <Time date="2022-07-26T11:47:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LockIcon} aria-label="Locked as spam" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'locked as spam and limited conversation to collaborators '}
+            <Time date="2022-07-26T11:48:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LockIcon} aria-label="Locked as too heated" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'locked as too heated and limited conversation to collaborators '}
+            <Time date="2022-07-26T11:49:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Locked (no reason) */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Locked (no reason)</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LockIcon} aria-label="Locked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'locked and limited conversation to collaborators '}
+            <Time date="2022-07-25T09:12:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Unlocked — UnlockIcon badge (not LockIcon). */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Unlocked</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={UnlockIcon} aria-label="Unlocked" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'unlocked this conversation '}
+            <Time date="2022-07-24T16:40:00Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Comment-deleted event group — shared timeline event (Issue version).
+ *
+ * Sourced from live `CommentDeletedEvent.tsx` (badge `TrashIcon`). Copy:
+ * "deleted a comment from {user}" (`LABELS.timeline.deletedACommentFrom` + the
+ * deleted comment author as an inline `<Link>` wrapping a `ProfileReference`).
+ * The author link uses the `inline` prop (always-on underline / high-contrast).
+ *
+ * PR ERB source: `app/views/issues/events/_comment_deleted_event.html.erb` —
+ * verify on the PR build.
+ */
+export const EventCommentDeleted = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Comment deleted */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Comment deleted</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={TrashIcon} aria-label="Comment deleted" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'deleted a comment from '}
+            <Link href="#" inline>
+              octocat
+            </Link>{' '}
+            <Time date="2022-07-26T11:46:07Z" />
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)
+
+/**
+ * The Cross-references event group — shared timeline events (Issue version).
+ *
+ * Sourced from live `CrossReferencedEvent.tsx` + `IssueLink.tsx` (badge
+ * `LinkExternalIcon`). The body message is "mentioned this" (then timestamp);
+ * the closing-PR form is "linked a pull request that will close this issue";
+ * rolled-up forms read "mentioned this in {n} issues / pull requests". The
+ * referenced source is rendered in a Secondary slot as an `IssueLink` row:
+ * a state octicon (from `useIssueState().sourceIcon` — open issue green
+ * `IssueOpenedIcon`, open PR green `GitPullRequestIcon`) + the title + the
+ * abbreviated #number reference. We reuse the plain (borderless) `.RefList`.
+ *
+ * PR ERB source: `app/views/issues/events/_cross_referenced_event.html.erb` —
+ * verify on the PR build.
+ */
+export const EventCrossReferences = () => (
+  <div
+    className={classes.RealisticTimeline}
+    onClick={e => {
+      if ((e.target as HTMLElement).closest('a')) e.preventDefault()
+    }}
+  >
+    {/* Mentioned from an issue */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Mentioned in an issue</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LinkExternalIcon} aria-label="Mentioned in an issue" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'mentioned this '}
+            <Time date="2022-07-26T11:46:07Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Octicon icon={IssueOpenedIcon} size={16} className={classes.IssueLinkIconOpen} aria-label="Open" />
+                <Link href="#" inline className={classes.IssueLinkTitle}>
+                  Track flaky upload retries
+                </Link>
+                <span className={classes.IssueLinkNumber}> #128</span>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Mentioned from a pull request */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Mentioned in a pull request</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LinkExternalIcon} aria-label="Mentioned in a pull request" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'mentioned this '}
+            <Time date="2022-07-25T09:12:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+                <Link href="#" inline className={classes.IssueLinkTitle}>
+                  Add retry logic to the uploader
+                </Link>
+                <span className={classes.IssueLinkNumber}> #42</span>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+
+    {/* Linked a closing pull request */}
+    <section className={classes.Variant}>
+      <h3 className={classes.VariantLabel}>Linked a closing pull request</h3>
+      <Timeline aria-label="Issue timeline">
+        <Timeline.Item>
+          <Timeline.Badge>
+            <Octicon icon={LinkExternalIcon} aria-label="Linked a closing pull request" />
+          </Timeline.Badge>
+          <Timeline.Body>
+            <Actor />
+            {'linked a pull request that will close this issue '}
+            <Time date="2022-07-24T16:40:00Z" />
+            <ul className={classes.RefList}>
+              <li className={classes.RefListItem}>
+                <Octicon icon={GitPullRequestIcon} size={16} className={classes.PrStateIcon} aria-label="Open" />
+                <Link href="#" inline className={classes.IssueLinkTitle}>
+                  Fix the upload retry race condition
+                </Link>
+                <span className={classes.IssueLinkNumber}> #57</span>
+              </li>
+            </ul>
+          </Timeline.Body>
+        </Timeline.Item>
+      </Timeline>
+    </section>
+  </div>
+)