Record

Anatomy

.preceda-ledger

A column of groups. Ledger moves open groups to the front of the source.

.preceda-ledger__group

A <section> named by its heading; --open for “The file does not yet hold”.

.preceda-ledger__heading

Small caps over an ink rule; __count at the right (binding when open).

.preceda-ledger__row

A dt/dd group: __key (small caps) | __value (serif) | __action; __meta beneath the value.

--confirmed / --inferred / --open / --rejected / --editing

Fact status: inferred in ink-2; open as an italic question with a binding key; rejected struck; editing on sunken paper.

.preceda-record-action

The quiet text control shared across the record: Edit, Answer in correspondence, View.

Variants

State matrix

At 390 px

Below 640 px the key sits on its own line above the value, with the action at its right.

Accessibility

• Each group is a section named by its heading; rows are a description list, so key and value are announced together.
• Open groups are moved in the source, not with CSS order, so reading and focus order match what is seen.
• Status is in words (meta line, italic question) as well as ink.
• Actions are 40 px text controls with the shared focus ring.

Usage

<div class="preceda-ledger">
  <section class="preceda-ledger__group preceda-ledger__group--open" aria-labelledby="open">
    <h3 class="preceda-ledger__heading" id="open"><span>The file does not yet hold</span><span class="preceda-ledger__count">2 questions</span></h3>
    <dl class="preceda-ledger__rows">
      <div class="preceda-ledger__row preceda-ledger__row--open">
        <dt class="preceda-ledger__key">Notice under s. 35(3)</dt>
        <dd class="preceda-ledger__value">Whether a notice was served on him</dd>
        <dd class="preceda-ledger__action"><a class="preceda-record-action" href="#…">Answer in correspondence</a></dd>
      </div>
    </dl>
  </section>
</div>

<Ledger>
  <LedgerGroup heading="On file" count={`${facts.length} facts`}>
    {facts.map((fact) => (
      <LedgerRow key={fact.key} term={fact.label} state={fact.status === 'derived' ? 'inferred' : 'confirmed'}
        meta={[sourceLabel(fact.source)]} action={<EditFact fact={fact} />}>{fact.value}</LedgerRow>
    ))}
  </LedgerGroup>
  <LedgerGroup heading="The file does not yet hold" open count={`${open.length} questions`}>…</LedgerGroup>
</Ledger>

Anatomy

.preceda-table__head

Running head: __title (small caps, names the table), __context (serif, centre), __count (small caps, right). Ink rule beneath.

.preceda-table__table th

Small-caps column heads over an ink rule; scope="col".

.preceda-table__table td

Hairline beneath each row; padding on the space scale.

__cell--key / --mono / --numeric / --sans / --prose / --muted

The first column; citations; figures (tabular, end-aligned); chrome text; propositions; secondary.

__row--struck

Key and mono cells struck in the struck tone; the proposition stays readable.

__row--current

A binding hairline at the start: the authority placed at the paragraph being read.

.preceda-table__note

One line beneath, over a rule, explaining counts and struck rows.

data-label

The column name, shown above each value when rows stack below 640 px.

Variants

State matrix

At 390 px

Below 640 px (or with data-layout="compact") each row stacks: the key first, then each value under its small-caps column name from data-label. The table stays a table for assistive technology.

Accessibility

• A real <table> named by its running-head title (aria-labelledby); column heads have scope="col".
• When rows stack, the header row is visually hidden, not removed, so cells keep their headers.
• A struck row says “not in corpus · struck” in words; the strike is never the only signal.
• aria-busy while loading, with a sentence in the body.

Usage

<div class="preceda-table">
  <div class="preceda-table__head"><p class="preceda-table__title" id="toa">Table of authorities</p>
    <span class="preceda-table__context">Anticipatory bail · Saket Sessions</span><p class="preceda-table__count">4 relied on</p></div>
  <div class="preceda-table__scroll"><table class="preceda-table__table" aria-labelledby="toa">…</table></div>
  <p class="preceda-table__note">Treatment counts are citing decisions in the corpus.</p>
</div>

<Table title="Table of authorities" context={matterLine} count={`${n} relied on`} note={note}>
  <thead><tr><TableHeaderCell>Authority</TableHeaderCell>…</tr></thead>
  <tbody>
    {rows.map((row) => (
      <TableRow key={row.id} struck={row.verdict?.strike}>
        <TableCell variant="key" label="Authority">…</TableCell>
        <TableCell variant="mono" label="Citation">{row.citation}</TableCell>
      </TableRow>
    ))}
  </tbody>
</Table>

Anatomy

.preceda-register__head

Heading (and a small-caps standfirst) over an ink rule, with the page’s act at the right.

.preceda-register__columns

Small-caps column heads, aria-hidden (each row reads in full on its own).

.preceda-register__row

An <li>: __number | __main (__title + __subtitle) | __status | __date. Hairline beneath; paper-hover on hover.

--current

The oxblood point before the number; the link carries aria-current.

.preceda-register__link

The title link; its ::after covers the row. Focus draws the ring on the whole row.

.preceda-register__lead--binding / --verify

The lead state word in its tone: “Draft in hand”, “Facts open”.

.preceda-register__actions

Controls that sit above the row link (Delete, Remove).

--unnumbered

Judges, advocates, saved cases: no number column.

Variants

State matrix

At 390 px

Below 640 px each row stacks: number, title, instrument line, the lead state word on its own line in binding, then the rest of the state and the date. Column heads are dropped.

Accessibility

• An <ol> named by the heading; each row is one list item with one link (the title), so rows are a single tab stop each.
• The row-wide target is the link’s own box, not a click handler on the <li>; focus rings the whole row.
• The oxblood point is decorative; the current row also says so with aria-current="true".
• Row controls sit above the link and keep their own names (“Remove”).

Usage

<ol class="preceda-register__list">
  <li class="preceda-register__row preceda-register__row--current">
    <span class="preceda-register__number">7</span>
    <div class="preceda-register__main">
      <p class="preceda-register__title"><a class="preceda-register__link" href="/matter/…" aria-current="true">Anticipatory bail, brother-in-law</a></p>
      <span class="preceda-register__subtitle">Application under s. 482 BNSS</span>
    </div>
    <p class="preceda-register__status"><span class="preceda-register__lead preceda-register__lead--binding">Draft in hand</span><span>1 to verify</span></p>
    <time class="preceda-register__date" datetime="2026-09-22T10:53">Today, 10:53</time>
  </li>
</ol>

<Register heading="Matters" actions={<OpenMatter />} columns={['Matter', 'State', 'Last worked']}>
  {matters.map((m) => (
    <RegisterRow key={m.id} number={m.number} current={m.id === openId}
      title={<Link className="preceda-register__link" to="/matter/$id" params={{ id: m.publicId }}>{m.title}</Link>}
      subtitle={m.instrumentLine} lead={m.stateWord} leadTone={m.stateTone} status={m.stateDetails}
      date={formatWorked(m.updatedAt)} dateTime={m.updatedAt} />
  ))}
</Register>

Anatomy

.preceda-timeline

An <ol>. Timeline moves missed items to the front of the source, keeping order otherwise.

__when

<time> date in the serif (tabular) with the time beneath in small sans.

__marker

The small-caps word: Missed, Due, v3, Revised, 04. Tone ink via --binding, --verify.

__body

__title in the reading face, __meta phrases joined by middots, optional __detail.

__actions

Record actions at the end: View / Viewing, Confirm, Set as current.

__item--missed / --due / --current / --done / --error

Missed (binding word and date), due, the version on the desk (binding hairline), superseded (ink-2), a failed step.

--unmarked

No marker column, for short activity lists.

Variants

State matrix

At 390 px

Below 640 px each row reads date and time on one line with its action at the right, then the marker word, then the title and meta.

Accessibility

• An ordered list, newest first; missed items are moved in the source so the first thing read is the first thing seen.
• “Missed” and “Due” are words, not colours; the date is a <time> with a machine-readable value.
• The version on the desk carries aria-current and “Viewing” is a pressed toggle.
• Busy actions set aria-busy and say “Setting…”.

Usage

<ol class="preceda-timeline">
  <li class="preceda-timeline__item preceda-timeline__item--missed">
    <span class="preceda-timeline__when"><time datetime="2026-09-20">20 Sept</time></span>
    <span class="preceda-timeline__marker preceda-timeline__marker--binding">Missed</span>
    <div class="preceda-timeline__body"><p class="preceda-timeline__title">Vakalatnama for Applicant No. 2</p>
      <p class="preceda-timeline__meta"><span>2 days overdue</span></p></div>
    <span></span>
  </li>
</ol>

<Timeline>
  {entries.map((e) => (
    <TimelineItem key={e.id} date={e.dateLabel} dateTime={e.date} time={e.time}
      state={e.missed ? 'missed' : e.due ? 'due' : 'default'} marker={e.marker}
      title={e.title} meta={e.meta} actions={e.action} />
  ))}
</Timeline>

Anatomy

.preceda-disclosure

The <details>. --ruled sits between hairlines; --quiet is a one-line toggle.

.preceda-disclosure__summary

Small caps, 40 px (44 px below 1024 px); ▾ indicator turns when closed. Hover to ink.

__count / __count--binding

Tabular count after the label; binding when counsel must act (“1 question waiting”).

__meta

A sans aside on the summary line: “41 s · round 3”.

__body

The content, padded on the space scale.

Variants

State matrix

At 390 px

At 390 px the summary grows to a 44 px target and runs full width; the indicator stays at the end of the line.

Accessibility

• Native <details>/<summary>: Enter and Space toggle, and the expanded state is announced without ARIA.
• The ▾ indicator is CSS content with empty alternative text, so it is not read.
• Disabled sets aria-disabled on the summary and prevents toggling; say why in the meta.
• Controlled use: pass open and onOpenChange; the component keeps the DOM in step.

Usage

<details class="preceda-disclosure preceda-disclosure--ruled">
  <summary class="preceda-disclosure__summary"><span class="preceda-disclosure__label">Audit trail</span><span class="preceda-disclosure__count">12 steps</span></summary>
  <div class="preceda-disclosure__body">…</div>
</details>

<Disclosure variant="ruled" summary="Audit trail" count={`${steps.length} steps`}
  open={open} onOpenChange={setOpen}>
  <Timeline variant="audit">…</Timeline>
</Disclosure>

Anatomy

.preceda-status-label

Small caps in the label face at the folio size; tabular figures.

--neutral / --binding / --gilt / --verify / --struck

Tone roles from the tokens. Struck strikes the word.

--sans

Chrome sans, for state lines in the register and meta rows.

--point

The oxblood point before the word: the open or current item.

__count

After a middot: citing decisions, days, questions.

treatment / authorityRole

Closed maps treatmentLabels and authorityRoleLabels supply the word and tone.

.preceda-state-line

A run of labels and phrases joined by middots.

Variants

State matrix

At 390 px

Labels do not wrap internally; a state line wraps between its phrases.

Accessibility

• Every label is a word; the tone only reinforces it. Struck labels are also struck.
• All tone inks are in the contrast matrix at 4.5:1 on every surface in Paper and Lamp.
• The point is decorative CSS; pair it with the word (and aria-current where it marks the current item).

Usage

<span class="preceda-status-label preceda-status-label--neutral">
  <span class="preceda-status-label__word">followed</span><span class="preceda-status-label__count">4,212</span>
</span>

<StatusLabel treatment="follows" count="4,212" />
<StatusLabel authorityRole={authority.role} />
<StateLine><StatusLabel variant="sans" tone="binding">Draft in hand</StatusLabel><span>1 to verify</span></StateLine>

Anatomy

.preceda-figure

A <figure>: __label (figcaption, small caps) then __value (title size, tabular) then __note.

__unit

A unit after the value in the reading size: days, ₹.

--binding / --verify / --gilt

Tone the value when it asks for action or verification.

--small

Heading size, for sidebars.

--empty / --loading

An en rule for not assessed; “Counting…” while loading, aria-busy.

.preceda-figures

A row of figures divided by rules; wraps on narrow screens.

Variants

State matrix

At 390 px

At 390 px a row of figures wraps two to a line; the rules stay between neighbours.

Accessibility

• The caption precedes the value in the source, so “Citing decisions, 4,212” is read in that order.
• Tone is never the only signal: the note says “Approaching deadline”.
• Loading sets aria-busy and a word in place of the value.

Usage

<figure class="preceda-figure">
  <figcaption class="preceda-figure__label">Citing decisions</figcaption>
  <span class="preceda-figure__value">4,212</span>
  <p class="preceda-figure__note">since 2014</p>
</figure>

<Figures>
  <Figure label="Limitation" value={days} unit="days" tone={band === 'warning' ? 'verify' : 'neutral'} note={bandLabel} />
</Figures>