Feedback

Anatomy

.preceda-working-line

Sans at the small role (12/1.45), ink-tertiary, one line. role="status" so the phrase is announced politely.

__point

A 5px oxblood square. It breathes (opacity only) while live; still under reduced motion.

__text

The phrase. Truncates with an ellipsis; `--wrap` lets it wrap.

__elapsed

Tabular “41 s” after a middot. Hidden from assistive technology so it is not read every second.

--ruled / --waiting / --stalled

On a hairline; hollow point while waiting on counsel; ink-secondary with a grey point when stopped short.

Variants

State matrix

At 390 px

On the phone the working line sits at the foot of the dock, beneath the composer, so a turn never blocks reading. It truncates to one line.

Accessibility

• role="status" (polite): the phrase is announced when it changes, never interrupting.
• The ticking time is aria-hidden; screen-reader users hear the phrase, not a clock.
• Colour is never alone: waiting is a hollow point and different words; stalled changes the ink and the words.
• The breathing point is opacity only and stops under prefers-reduced-motion.

Usage

<p class="preceda-working-line preceda-working-line--live" role="status" aria-live="polite">
  <span class="preceda-working-line__point" aria-hidden="true"></span>
  <span class="preceda-working-line__text">Reading authorities on s. 482 BNSS</span>
  <span class="preceda-working-line__elapsed" aria-hidden="true">41 s</span>
</p>

import { WorkingLine } from '@luvkapur/preceda-design-system/react';

<WorkingLine label="Reading authorities on s. 482 BNSS" since={turn.startedAt} />
<WorkingLine state="waiting" label="Waiting for your answer to 2 questions" />

Anatomy

.preceda-progress

Grid: label and figure on one line, the rule beneath. role="progressbar" with value min/max/now/text.

__track / __fill

A 2px rule in `rule`, filled in binding to `--preceda-progress-value` (0–1).

__value

The printed figure, tabular, ink-tertiary; binding when complete.

--neutral / --inline

Ink-tertiary fill for measures with no call to act; a short inline rule for table cells.

Variants

State matrix

At 390 px

The rule takes the full measure; the label may wrap, the figure never does.

Accessibility

• role="progressbar" with aria-valuemin/max/now and a spoken aria-valuetext (“6 of 9 verified”).
• The figure is printed, so length is never the only signal.
• Label with a visible label; use aria-label only for inline rules beside visible text.

Usage

<div class="preceda-progress" role="progressbar" aria-labelledby="p" aria-valuemin="0" aria-valuemax="9" aria-valuenow="6" aria-valuetext="6 of 9 verified" style="--preceda-progress-value: 0.667">
  <span class="preceda-progress__label" id="p">Authorities verified</span>
  <span class="preceda-progress__value" aria-hidden="true">6 of 9 verified</span>
  <span class="preceda-progress__track" aria-hidden="true"><span class="preceda-progress__fill"></span></span>
</div>

<Progress label="Authorities verified" value={6} max={9} valueText="6 of 9 verified" />
<Progress inline tone="neutral" value={41} max={52} aria-label="Followed" />

Anatomy

.preceda-skeleton

role="status" aria-busy="true" with a spoken label (“Loading the draft”). Breathes once every ~2 s.

__bar

A 12px bar in paper-sunken per line of text; `--short / --medium / --long / --title / --label`.

--sheet

A document on the desk: running head over a rule, centred title block, numbered paragraphs.

--register

Rows on hairlines, as in the matters register.

Variants

State matrix

At 390 px

The sheet skeleton tightens its margins and gutter to the mobile document sheet.

Accessibility

• One status region per loading area, named for what is loading; the bars are aria-hidden.
• Remove the skeleton and aria-busy together when content arrives.
• Breathing is opacity only and stops under prefers-reduced-motion.

Usage

<div class="preceda-skeleton" role="status" aria-busy="true" aria-label="Loading the headnote">
  <span class="preceda-skeleton__shapes" aria-hidden="true">
    <span class="preceda-skeleton__bar preceda-skeleton__bar--long"></span>
    <span class="preceda-skeleton__bar"></span>
    <span class="preceda-skeleton__bar preceda-skeleton__bar--short"></span>
  </span>
</div>

<Skeleton lines={3} label="Loading the headnote" />
<Skeleton variant="sheet" label="Loading the draft" />

Anatomy

.preceda-note

A hairline above; body in the serif at the body role. role="note" by default.

__label

Run-in small caps: “Note”, “Caution”, “Error” — or a precise word (“Limitation”, “Partial draft”).

__title

Optional run-in lead sentence in ink.

__actions

Next acts as a middot-separated line of binding links.

__dismiss

Optional 40px close control.

--caution / --error / --compact

Umber or binding label and hairline; sans at ui size inside forms and dialogs.

Variants

State matrix

At 390 px

At 390 px the note keeps the full measure; actions wrap onto a second line. Notes live in the correspondence sheet or under the document, never floating.

Accessibility

• The label word differs by tone, so colour never carries the meaning alone.
• Static notes are role="note"; pass live="polite" for an outcome that just happened, live="assertive" only for an error that stops counsel’s act.
• Actions are real buttons or links with 40px targets on mobile via their line height and padding in context.

Usage

<aside class="preceda-note preceda-note--error" role="note">
  <p class="preceda-note__body">
    <span class="preceda-note__label">Error</span>
    <span class="preceda-note__title">The FIR could not be read.</span>
    The file appears to be a scanned image without a text layer.
  </p>
  <ul class="preceda-note__actions">
    <li><button class="preceda-note__action" type="button">Attach a text PDF</button></li>
  </ul>
</aside>

<Note tone="error" title="The FIR could not be read." actions={[<button className="preceda-note__action" onClick={attach}>Attach a text PDF</button>]}>
  The file appears to be a scanned image without a text layer.
</Note>

Anatomy

.preceda-banner

Full width, a rule above and below; tone wash only for caution and error. role="region" named by its label.

__label

Small caps naming the kind: “Limit reached”, “Shared view”, “Deadline passed”.

__message / __detail

One line of consequence in ink; an optional second sentence in ink-secondary.

__actions / __action / __dismiss

One act at the end of the line, and an optional dismiss.

--centered

A standalone gate: centred, the act beneath.

Variants

State matrix

At 390 px

At 390 px the banner stays full-bleed; the act wraps beneath the message rather than squeezing it.

Accessibility

• role="region" named by the label; pass live="polite" when the banner appears in response to an act (the limit is hit mid-session).
• Caution and error carry a word in the label, not just the wash.
• Wash colours are text-bearing and contrast-tested on paper and raised.

Usage

<section class="preceda-banner" role="region" aria-label="Free searches">
  <span class="preceda-banner__label">Free searches</span>
  <p class="preceda-banner__message">3 of 10 remaining today.</p>
  <span class="preceda-banner__actions"><a class="preceda-banner__action" href="/account">Upgrade to Pro</a></span>
</section>

<Banner centered label="Limit reached" detail="Pro members search without a daily limit."
  actions={<Link className="preceda-banner__action" to="/account">Upgrade to Pro</Link>}>
  You have used your {limit} free searches for today.
</Banner>

Anatomy

ToastProvider

Owns the stack (max 3) and two live regions (polite, assertive) that stay in the document.

.preceda-toast-region

A manual popover at the viewport foot, so it rises above open dialogs; bottom-right at desk, full width on phones.

.preceda-toast

Raised paper, hairline, sheet shadow; message in ui sans; optional action and dismiss (40px).

--error

A binding hairline and the word “Error”; announced assertively.

Variants

State matrix

At 390 px

At 390 px the stack spans the width above the safe-area inset, newest nearest the thumb. It sits above the dock but never covers the composer for longer than its duration.

Accessibility

• Announcements go through polite and assertive live regions that are always rendered; errors are prefixed “Error:”.
• Auto-dismiss pauses on hover and on focus inside the stack (WCAG 2.2.1); a toast with an act stays at least 8 s.
• Esc dismisses the focused toast. Dismiss buttons are named.
• While a package Dialog or Sheet is open the stack renders inside it, so it is not inert.

Usage

<!-- Rendered by ToastProvider; the classes for a product that manages its own stack. -->
<section class="preceda-toast-region" popover="manual" aria-label="Notifications">
  <ol class="preceda-toast-region__list">
    <li><div class="preceda-toast"><p class="preceda-toast__message">Link copied</p>
      <span class="preceda-toast__actions"><button class="preceda-toast__dismiss" aria-label="Dismiss">…</button></span></div></li>
  </ol>
</section>
<div class="preceda-toast-region__announcer" role="status" aria-live="polite">Link copied</div>

<ToastProvider>{app}</ToastProvider>

const toast = useToast();
toast.show('Copied');
toast.show({ message: 'Could not revoke this link.', tone: 'error', action: { label: 'Try again', onAction: retry } });

Anatomy

.preceda-empty

Serif subheading title in ink, guidance in the body role in ink-secondary.

__actions

At most one act, usually a binding link.

--desk

The empty sheet on the desk, centred on raised paper.

--inline

Inside a tab panel or list, on a hairline, at body size.

Variants

State matrix

At 390 px

On the phone the desk sheet shrinks its padding and height; the sentence stays on one or two lines.

Accessibility

• The title is a real heading at the level the page needs (`headingLevel`), or a paragraph inside a panel that already has one.
• Nothing here is decorative-only, so nothing is hidden from assistive technology.

Usage

<div class="preceda-empty preceda-empty--desk">
  <h2 class="preceda-empty__title">Nothing on the desk yet.</h2>
  <p class="preceda-empty__guidance">Instruct the associate in correspondence; the draft will be prepared here.</p>
</div>

<EmptyState variant="desk" guidance="Instruct the associate in correspondence; the draft will be prepared here." />
<EmptyState variant="inline" headingLevel={3} title="No authorities on this matter yet." />

Anatomy

.preceda-error-page

A <main> at the reading measure, vertically centred in 60dvh.

__head / __code

Small-caps running head over an ink rule; the status figure in tabular folio numerals.

__title / __body

Title role (serif 30); reading-role paragraph in ink-secondary.

__actions

Primary way back first: a button to retry, links back.

__reference

A reference counsel can quote in a report — an error digest, never an internal record id.

Variants

State matrix

At 390 px

At 390 px the title drops to the heading role and the page loses its vertical centring, so the ways back stay above the fold.

Accessibility

• The page is the <main> landmark with one h1; move focus to the h1 after a client-side navigation lands here.
• The status figure is a word first (“Not found”) and a number second.
• The reference is plain text so it can be selected and copied.

Usage

<main class="preceda-error-page">
  <p class="preceda-error-page__head"><span>Not found</span><span class="preceda-error-page__code">404</span></p>
  <h1 class="preceda-error-page__title">This page is not in the reporter.</h1>
  <p class="preceda-error-page__body">The address may be mistyped, or the page may have moved.</p>
  <div class="preceda-error-page__actions"><a class="preceda-link" href="/">‹ Back to search</a></div>
</main>

// routes/__root.tsx
notFoundComponent: () => <ErrorPage as="div" headingLevel={3} kind="not-found" actions={<Link className="preceda-link" to="/">‹ Back to search</Link>} />,
errorComponent: ({ error }) => <ErrorPage as="div" headingLevel={3} kind="error" reference={digest(error)}
  actions={<><button className="preceda-button" onClick={() => location.reload()}>Try again</button><Link …>‹ Back to search</Link></>} />,