division-ds 0.1.2 → 0.2.1

package/public/docs/components/tabs.md

@@ -0,0 +1,180 @@
+# Tabs
+
+> Sections of one view, with only one visible at a time. The active tab is filled with the signal colour, the same way every other selection in the system is.
+
+- **Best for:** Switching between equally important sections of one view.
+- **Not for:** Steps in a sequence: use Stepper. Moving between pages: use links (Navbar, Sidebar).
+- Molecule. Source: `src/components/molecules/tabs/Tabs.tsx`
+- Rendered docs page: `/components/tabs`
+
+## Import
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'src/components/molecules/tabs/Tabs'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value (Root)` | `string` |  | The active tab, when the page controls it. |
+| `variant` | `'fill' \| 'line'` | `'fill'` | How the active tab is shown (Root). 'line' underlines it, for a row inside a panel that already has lots of fills. |
+| `defaultValue` | `string` |  | The tab that starts active, when the component manages it (Root). |
+| `onValueChange` | `(value: string) => void` |  | Called when the active tab changes (Root). |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Which arrow keys move between tabs (Root). Vertical also puts the list beside the panels. |
+| `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | 'manual' waits for Enter or Space before switching, for panels that are slow to draw (Root). |
+| `value (Trigger)` | `string` |  | This tab's own value. |
+| `disabled` | `boolean` | `false` | Turns off one tab (Trigger). |
+| `icon (Trigger)` | `ReactNode` |  | A small symbol before the label, hidden from screen readers (aria-hidden). |
+| `count (Trigger)` | `number` |  | A number after the label, included in the name screen readers announce. |
+| `className` | `string` |  | Merged with the root classes. If two Tailwind utilities clash, the later one wins. Available on every part. |
+| `ref` | `Ref<HTMLElement>` |  | Passed through to the underlying page element. Available on every part. |
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Default
+
+```tsx
+<div className="max-w-sm w-full">
+  <Tabs defaultValue="replica">
+    <TabsList aria-label="Kit sections">
+      <TabsTrigger value="replica">Replica</TabsTrigger>
+      <TabsTrigger value="optics">Optics</TabsTrigger>
+      <TabsTrigger value="parts">Parts</TabsTrigger>
+    </TabsList>
+    <TabsContent value="replica">Electric carbine replica.</TabsContent>
+    <TabsContent value="optics">Tube sight and holo sight.</TabsContent>
+    <TabsContent value="parts">Magazines, a battery and a charger.</TabsContent>
+  </Tabs>
+</div>
+```
+
+### With a disabled tab
+
+```tsx
+<div className="max-w-sm w-full">
+  <Tabs defaultValue="replica">
+    <TabsList aria-label="Kit sections">
+      <TabsTrigger value="replica">Replica</TabsTrigger>
+      <TabsTrigger value="optics">Optics</TabsTrigger>
+      <TabsTrigger value="parts" disabled>
+        Parts
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="replica">Electric carbine replica.</TabsContent>
+    <TabsContent value="optics">Tube sight and holo sight.</TabsContent>
+    <TabsContent value="parts">Magazines, a battery and a charger.</TabsContent>
+  </Tabs>
+</div>
+```
+
+### Line, with icons and counts
+
+```tsx
+<div className="max-w-md w-full">
+  <Tabs defaultValue="open" variant="line">
+    <TabsList aria-label="Orders">
+      <TabsTrigger value="open" icon={<Inbox />} count={12}>
+        Open
+      </TabsTrigger>
+      <TabsTrigger value="packed" icon={<Package />} count={4}>
+        Packed
+      </TabsTrigger>
+      <TabsTrigger value="archived" icon={<Archive />} count={0}>
+        Archived
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="open">Twelve orders waiting to be packed.</TabsContent>
+    <TabsContent value="packed">Four orders packed, waiting for the courier.</TabsContent>
+    <TabsContent value="archived">No archived orders yet.</TabsContent>
+  </Tabs>
+</div>
+```
+
+### Vertical, line
+
+```tsx
+<div className="max-w-md w-full">
+  <Tabs defaultValue="profile" orientation="vertical" variant="line">
+    <TabsList aria-label="Settings">
+      <TabsTrigger value="profile" icon={<User />}>
+        Profile
+      </TabsTrigger>
+      <TabsTrigger value="security" icon={<Shield />}>
+        Security
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="profile">Callsign, squad and home field.</TabsContent>
+    <TabsContent value="security">Password and signed-in devices.</TabsContent>
+  </Tabs>
+</div>
+```
+
+### Controlled: the page keeps track of which tab is open
+
+```tsx
+function ControlledExample() {
+  const [value, setValue] = useState('replica')
+
+  return (
+    <div className="max-w-sm w-full">
+      <div className="flex gap-2 mb-4">
+        <Button size="sm" variant="secondary" onClick={() => setValue('replica')}>
+          Show replica
+        </Button>
+        <Button size="sm" variant="secondary" onClick={() => setValue('optics')}>
+          Show optics
+        </Button>
+      </div>
+      <Tabs value={value} onValueChange={setValue}>
+        <TabsList aria-label="Kit sections">
+          <TabsTrigger value="replica">Replica</TabsTrigger>
+          <TabsTrigger value="optics">Optics</TabsTrigger>
+        </TabsList>
+        <TabsContent value="replica">Electric carbine replica.</TabsContent>
+        <TabsContent value="optics">Tube sight and holo sight.</TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+<ControlledExample />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves into the tab row, onto the active tab. Pressing Tab again moves into the panel. |
+| `ArrowLeft` `ArrowRight` | Previous or next tab. It wraps round at the ends and skips turned-off tabs. |
+| `ArrowUp` `ArrowDown` | The same, when orientation is vertical. |
+| `Home` `End` | First or last tab. |
+
+## Do
+
+- Keep tab labels to one or two words.
+- Use tabs for equals: sections a person would move between freely.
+- Give the tab row an aria-label that names the whole set.
+- Use the line variant inside a card or settings panel, and the fill variant at the top of a view.
+- Use a count for something a person would act on, like open orders or unread reports.
+
+## Don't
+
+- Don't use tabs for steps in a sequence. That's what Stepper is for.
+- Don't put a second row of tabs inside a panel.
+- Don't mix fill and line tabs on one page.
+- Don't give every tab an icon just because one has one. Icons go on all of them or none.
+- Don't use tabs to move between pages. A tab changes what's shown, not where you are.
+
+## Anatomy
+
+- **Tabs**: The root. Holds which tab is active, whether the page controls that or the component does.
+- **TabsList**: The tablist, the row of tabs. It needs an aria-label (a name read out by screen readers). On a narrow screen it scrolls sideways inside itself.
+- **TabsTrigger**: A single tab. Fill variant: the active tab is the signal fill with ink-coloured text, and hovering adds a 12% signal tint. Line variant: the active tab is primary text over a 2px (pixel) signal bar, which moves to the inline end (the side text runs towards) when the tabs are vertical.
+- **Icon**: Optional, before the label. aria-hidden, so screen readers skip it.
+- **Count**: Optional, after the label. You see it as a number, and screen readers read it as part of the name: Open (12).
+- **TabsContent**: A tabpanel, the area a tab shows. It's labelled by its tab and can take focus, so a keyboard user can reach panels that hold only text.

package/public/docs/components/tag.md

@@ -0,0 +1,105 @@
+# Tag
+
+> A removable chip for filters and selections. Its dismiss button is named after the thing it removes, so a row of them doesn't sound like six identical 'Remove' buttons to a screen reader.
+
+- **Best for:** A removable chip, such as an active filter or a selected value.
+- **Not for:** A status. Use Badge.
+- Atom. Source: `src/components/atoms/tag/Tag.tsx`
+- Rendered docs page: `/components/tag`
+
+## Import
+
+```tsx
+import { Tag } from 'src/components/atoms/tag/Tag'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `string` |  | The tag text. Required. |
+| `onDismiss` | `() => void` |  | Adds the dismiss button. It runs once the tag has faded out, not on the click. Remove the tag from your list here, and the tags after it slide into its place (M7, a motion token). With reduced motion turned on, it runs at once. |
+| `dismissLabel` | `(text: string) => string` | `t => `Remove ${t}`` | Replaces the built dismiss name, for example with another verb or another language. |
+| `className` | `string` |  | Merged with the component's classes. Later Tailwind utilities (the small styling classes this system uses) win. |
+| `ref` | `Ref<HTMLSpanElement>` |  | Forwarded to the span element. |
+| `...rest` | `Omit<HTMLAttributes<HTMLSpanElement>, 'children'>` |  | Every native span attribute except children, spread onto the root span. |
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Static tags
+
+```tsx
+<Tag>Holo sight</Tag>
+<Tag>Spare magazine</Tag>
+<Tag>Speed loader</Tag>
+```
+
+### Removable
+
+```tsx
+const FIELD_KIT = ['Holo sight', 'Spare magazine', 'Speed loader', 'Field goggles']
+
+function RemovableExample() {
+  const [tags, setTags] = useState(FIELD_KIT)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-2">
+        {tags.length === 0 ? (
+          <span className="text-sm text-[var(--color-text-secondary)]">No filters applied.</span>
+        ) : (
+          tags.map(tag => (
+            <Tag key={tag} onDismiss={() => setTags(current => current.filter(t => t !== tag))}>
+              {tag}
+            </Tag>
+          ))
+        )}
+      </div>
+      {/* The Button atom, not a bare <button>: a hand-rolled one here had no system focus ring
+          at all, only the UA default. `ghost` is the existing variant for a text-weight action. */}
+      <Button variant="ghost" size="sm" wrapperClassName="self-start" onClick={() => setTags(FIELD_KIT)}>
+        Reset
+      </Button>
+    </div>
+  )
+}
+
+<RemovableExample />
+```
+
+### Long text
+
+```tsx
+<Tag onDismiss={() => {}}>Stick battery 11.1 V, 1300 mAh, lithium polymer</Tag>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves focus to the dismiss button, if there is one. The chip itself can't take focus. |
+| `Enter` | Dismisses the tag. |
+| `Space` | Dismisses the tag. |
+
+## Do
+
+- Keep the text short enough to read as a chip.
+- Move focus somewhere sensible after a dismissal: to the next tag, or to the container if the row is now empty.
+- Override dismissLabel when 'Remove' is the wrong verb, for example 'Clear filter'.
+
+## Don't
+
+- Don't make the whole chip clickable as well as its dismiss button. Two targets in one chip leaves people guessing.
+- Don't shrink the dismiss button below 24×24.
+- Don't use a Tag for status. That's a Badge.
+- Don't move the bevel from the backing layer onto the chip. A Tag can hold a dismiss button that takes focus, and clip-path (the CSS, or Cascading Style Sheets, property that cuts the corner) on the chip would clip that button's focus ring, the outline that shows keyboard focus, off the corner it sits in.
+
+## Anatomy
+
+- **Chip**: 28px (pixels) tall. The cut corner, the border.hairline-strong edge and the sunken fill sit on a backing layer, not on the chip itself. That layer is aria-hidden, a setting that hides it from screen readers.
+- **Text**: Required, and a plain string, because the dismiss name is built from it.
+- **Dismiss button**: A ghost IconButton at 24×24. That's the minimum target size in WCAG 2.2 (the Web Content Accessibility Guidelines, the public rulebook for making websites usable by people with disabilities). It only appears when onDismiss is given.

package/public/docs/components/textarea.md

@@ -0,0 +1,148 @@
+# Textarea
+
+> A text box for several lines. It has the same chrome (border, fill and states) as Input, resizes vertically and shows four rows by default. Like Input, it doesn't label itself.
+
+- **Best for:** Free text over several lines, inside a FormField.
+- **Not for:** A single line. Use Input.
+- Atom. Source: `src/components/atoms/textarea/Textarea.tsx`
+- Rendered docs page: `/components/textarea`
+
+## Import
+
+```tsx
+import { Textarea, textareaVariants } from 'src/components/atoms/textarea/Textarea'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Requires
+
+- A <FormField> around it. On its own the control has no label. FormField supplies the label, the help text and the error, and links up their ids.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `invalid` | `boolean` | `false` | Sets aria-invalid and the invalid border. aria-invalid is an ARIA (Accessible Rich Internet Applications) attribute that tells screen readers the value has a problem. It doesn't render error text. |
+| `rows` | `number` | `4` | The browser's own rows attribute. Size it to the answer you expect. |
+| `aiValue` | `string` |  | The value an AI proposed, with the same contract as Input. The mark and the revert button sit in the top right corner. While the field holds exactly this value it shows the AI-filled state: an ai.border edge, a faint ai.wash tint and a sparkle mark that describes the field as Filled by AI. Once the person changes it, the field looks normal again and a Revert to suggestion button puts the value back through onChange (no button on a disabled or read-only field). An invalid field keeps its invalid border. |
+| `className` | `string` |  | Merged with the control's classes. Later Tailwind utilities (the small styling classes this system uses) win. |
+| `ref` | `Ref<HTMLTextAreaElement>` |  | Forwarded to the textarea element. |
+| `...rest` | `Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>` |  | Every native textarea prop except aria-invalid, spread onto the element. aria-invalid is removed from the type instead of being quietly overridden at runtime. invalid is the only source of both the attribute and the border, so letting a caller set one directly would let what people see and what screen readers hear drift apart. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export const textareaVariants = cva( …
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Default
+
+```tsx
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Field notes
+  <Textarea placeholder="What did you observe on site?" />
+</label>
+```
+
+### Rows
+
+```tsx
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Short (2 rows)
+  <Textarea rows={2} placeholder="One-line summary, wraps if needed" />
+</label>
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Tall (8 rows)
+  <Textarea rows={8} placeholder="Full incident report" />
+</label>
+```
+
+### States
+
+```tsx
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Invalid
+  <Textarea invalid defaultValue="Site coordinates unclear" />
+</label>
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Disabled
+  <Textarea disabled defaultValue="Locked until review closes" />
+</label>
+{/* read-only is a different state from disabled and looks different — the text stays
+    selectable and the control stays in the tab order, so `read-only:text-[...]` dims the
+    text without the disabled fill. It was styled but never demonstrated. */}
+<label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+  Read-only
+  <Textarea readOnly defaultValue="Submitted 14:02, no further edits" />
+</label>
+```
+
+### Filled by AI, with a revert
+
+```tsx
+const AI_NOTES = 'Ships with two midcaps and a sling. Ask for the 1.2 J spring if you play indoors.'
+
+<div className="flex flex-col gap-2 w-full max-w-sm">
+  <label htmlFor="ai-notes" className="text-sm">Order notes</label>
+  <AiLabel explanation="Drafted from the replica's listing. Check the details before you send it." />
+  <Textarea id="ai-notes" aiValue={AI_NOTES} defaultValue={AI_NOTES} />
+</div>
+```
+
+### With a counter
+
+```tsx
+function CounterExample() {
+  const max = 140
+  const [value, setValue] = useState('')
+  return (
+    <label className="flex flex-col gap-1 text-sm w-full max-w-xs">
+      Field day summary
+      <Textarea
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        maxLength={max}
+        aria-describedby="textarea-docs-counter"
+      />
+      <span id="textarea-docs-counter" className="text-xs text-[var(--color-text-secondary)]">
+        {value.length} / {max}
+      </span>
+    </label>
+  )
+}
+
+<CounterExample />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves focus to it. |
+| `Enter` | Starts a new line. It doesn't submit the form. |
+
+## Do
+
+- Size rows to the answer you expect.
+- Leave vertical resize on. Taking it away doesn't help anyone.
+- Show a character counter as text the field points to with aria-describedby, not as a colour change.
+
+## Don't
+
+- Don't allow horizontal resize. It breaks the layout around it.
+- Don't bevel it. The cut would land exactly where the resize grip is, and clip-path (the CSS, or Cascading Style Sheets, property that cuts the corner) would take the focus ring with it. Input's page states the general rule.
+- Don't reach for inputVariants here. The shared heights are wrong for a box with several lines, and the small duplication is on purpose.
+- Don't trap Enter to submit unless there's another way to add a line.
+
+## Anatomy
+
+- **Textarea**: Four rows, never shorter than 88px (pixels), vertical resize only.
+- **Border**: The same three states as Input.
+- **Focus ring**: The outline that shows keyboard focus. It sits on the control itself.

package/public/docs/components/timeline.md

@@ -0,0 +1,152 @@
+# Timeline
+
+> Events in time order down a vertical line. Each one has a square marker with an icon, a title line, a time and an optional body. You can group them by day, or not.
+
+- **Best for:** A record of what happened to one thing, newest or oldest first: a shipment, a depot, an account.
+- **Not for:** Steps of a flow someone is going through: use Stepper. Rows people sort and compare: use DataTable.
+- Molecule. Source: `src/components/molecules/timeline/Timeline.tsx`
+- Rendered docs page: `/components/timeline`
+
+## Import
+
+```tsx
+import { Timeline, TimelineGroup, TimelineItem } from 'src/components/molecules/timeline/Timeline'
+```
+
+Paths are from the Division DS repository root. Installed with shadcn they start `src/division-ds/` instead of `src/` (`src/division-ds/components/...`); import them relative to your file.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label (Timeline)` | `string` |  | Required. Names the list. |
+| `className (Timeline)` | `string` |  | Added to the root ol. |
+| `title (TimelineGroup)` | `string` |  | Required. A day or a period, for example "Today". |
+| `level (TimelineGroup)` | `2 \| 3 \| 4` | `3` | The heading level of the group title (2 means an h2, and so on). |
+| `icon (TimelineItem)` | `ReactNode` |  | Required. A lucide icon, there for decoration only. |
+| `tone (TimelineItem)` | `'neutral' \| 'signal' \| 'ok' \| 'warning' \| 'hostile' \| 'info'` | `'neutral'` | Colours the marker, with the same meanings as Badge. The title still says it in words. |
+| `title (TimelineItem)` | `ReactNode` |  | Required. What happened, in one line. |
+| `meta (TimelineItem)` | `ReactNode` |  | Beside the title: who did it, or a Badge with the outcome. |
+| `time (TimelineItem)` | `string` |  | Required. An ISO datetime (a date and time written in the international standard format), used for <time dateTime>. |
+| `timeLabel (TimelineItem)` | `string` |  | Required. What people see, for example "09:40" or "Mon 12 Oct". |
+| `details (TimelineItem)` | `ReactNode` |  | Extra information, folded away behind a "Show details" button. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type TimelineTone = 'neutral' | 'signal' | 'ok' | 'warning' | 'hostile' | 'info'
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Grouped by day
+
+```tsx
+<div className="w-full max-w-xl">
+  <Timeline label="Activity on Depot 4">
+    <TimelineGroup title="Today" level={4}>
+      <TimelineItem
+        icon={<Truck />}
+        tone="info"
+        title="Shipment SHP-204 left for Sibiu"
+        meta="Dispatch"
+        time="2026-10-15T09:40:00+03:00"
+        timeLabel="09:40"
+      >
+        Nine items, 22.1 kg, with the regular courier.
+      </TimelineItem>
+      <TimelineItem
+        icon={<Phone />}
+        title="Call with Ilse Varga"
+        meta={
+          <>
+            <span>Oskar Behn</span>
+            <Badge tone="ok">Resolved</Badge>
+          </>
+        }
+        time="2026-10-15T08:15:00+03:00"
+        timeLabel="08:15"
+        details="Agreed to move the Friday pickup to Thursday morning. Bay 2 stays free until noon."
+      >
+        The late pallet from Arad is booked for tomorrow.
+      </TimelineItem>
+    </TimelineGroup>
+    <TimelineGroup title="Yesterday" level={4}>
+      <TimelineItem
+        icon={<TriangleAlert />}
+        tone="warning"
+        title="Floor scale out of calibration"
+        time="2026-10-14T16:05:00+03:00"
+        timeLabel="16:05"
+      >
+        Readings 0.4 kg high. Work order WO-32 opened.
+      </TimelineItem>
+      <TimelineItem
+        icon={<PackageCheck />}
+        tone="ok"
+        title="Inbound delivery checked in"
+        time="2026-10-14T10:30:00+03:00"
+        timeLabel="10:30"
+      />
+    </TimelineGroup>
+  </Timeline>
+</div>
+```
+
+### Without groups
+
+```tsx
+<div className="w-full max-w-xl">
+  <Timeline label="Work order WO-29">
+    <TimelineItem icon={<Wrench />} title="Opened" time="2026-10-09T08:00:00+03:00" timeLabel="Fri 9 Oct" />
+    <TimelineItem
+      icon={<Wrench />}
+      tone="signal"
+      title="Assigned to Mara Lind"
+      time="2026-10-12T11:20:00+03:00"
+      timeLabel="Mon 12 Oct"
+    />
+    <TimelineItem
+      icon={<CircleCheck />}
+      tone="ok"
+      title="Closed: pallet jack serviced"
+      time="2026-10-13T15:45:00+03:00"
+      timeLabel="Tue 13 Oct"
+    />
+  </Timeline>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves to each "Show details" button, and to any link inside an event. |
+| `Enter` `Space` | On "Show details": shows or hides the details. |
+
+## Do
+
+- Label the timeline for what it records, for example "Activity on Depot 4".
+- Group by day once there are more than a handful of events.
+- Keep the title to one line and put the rest in the body or details.
+- Pick a tone for what the event means (ok for done, hostile for failed), and say it in the title too.
+
+## Don't
+
+- Don't use a Timeline for a flow someone is going through. That's what Stepper is for.
+- Don't put the only copy of something important in details.
+- Don't colour every marker. Neutral is the default for a reason.
+
+## Anatomy
+
+- **List**: An ol (numbered list element) named by label. It holds items, groups, or both.
+- **Group**: A list item with a heading in a monospaced font, a thin line running to the edge, and its own ol.
+- **Marker**: A 28px (pixel) square holding the icon, outlined and coloured by tone.
+- **Rail**: A thin line from each marker to the next. There's none after the last event in a list.
+- **Title line**: The title, then meta, then the time on the right inside a <time dateTime> element, which gives machines the exact date.
+- **Body**: Optional text under the title.
+- **Details**: Optional, hidden behind a "Show details" button. The button has aria-expanded, which tells screen readers whether the details are open.