Overlays

Anatomy

<dialog class="preceda-dialog">

Native modal: top layer, inert page, `cancel` on Esc. Raised paper, rule-strong border, dialog shadow.

__header / __kicker / __title

Optional small-caps kicker, the serif heading-role title, a 40px close control.

__description

One sentence of context in the body role; wired to aria-describedby.

__body

Scrolls inside the dialog; the header and foot stay put.

__actions / __footnote

A ruled foot, primary act last; a tertiary line of consequence.

--narrow / --wide

480 px for confirms, 768 px for reference sheets such as shortcuts.

Variants

State matrix

At 390 px

Below 640 px the dialog rises from the foot at full width with square lower corners, clears the home indicator, and stacks its actions full width with the primary act nearest the thumb (44 px).

Accessibility

• showModal(): the rest of the page is inert and hidden from assistive technology.
• Focus moves to [autofocus], `initialFocus`, or the first control; it returns to the opener (or `returnFocus`) on close.
• Tab and Shift+Tab wrap inside the dialog; Esc fires onClose("escape") unless `dismissible={false}`.
• aria-labelledby is the title; aria-describedby is the description.

Usage

<dialog class="preceda-dialog" aria-labelledby="d-title" aria-describedby="d-desc">
  <div class="preceda-dialog__sheet">
    <header class="preceda-dialog__header">
      <h2 class="preceda-dialog__title" id="d-title">Which court passed the impugned order?</h2>
      <button class="preceda-dialog__close" type="button" aria-label="Close">…</button>
    </header>
    <p class="preceda-dialog__description" id="d-desc">This completes the jurisdiction paragraph.</p>
    <div class="preceda-dialog__body">…</div>
    <div class="preceda-dialog__actions">…</div>
  </div>
</dialog>

<Dialog open={open} onClose={() => setOpen(false)}
  kicker="Secure read-only link" title={`Share ${title}`}
  description="Recipients see a frozen snapshot, even if the draft changes later."
  footnote="Anyone with the link can view. Uploaded documents are never shared.">
  <ShareForm />
</Dialog>

Anatomy

<ConfirmDialog>

A narrow Dialog with role="alertdialog", Cancel and the named act.

destructive

The act uses `preceda-button--destructive` (T3) and initial focus lands on Cancel.

busy

An async onConfirm shows the busy label; Esc, backdrop and Cancel are disabled until it settles.

error

A rejected onConfirm keeps the dialog open with a compact error Note, announced assertively.

Variants

State matrix

At 390 px

At 390 px it rises from the foot like every dialog; Cancel sits above the act so the destructive button is not under the resting thumb by accident — both are 44 px and full width.

Accessibility

• role="alertdialog": the title and consequence are read on open.
• Destructive confirms put initial focus on Cancel, so Enter never destroys by reflex.
• While busy the act has aria-busy and the dialog cannot be dismissed half-way through.

Usage

<dialog class="preceda-dialog preceda-dialog--narrow" role="alertdialog" aria-labelledby="t" aria-describedby="c">…
  <div class="preceda-dialog__actions">
    <button class="preceda-button preceda-button--quiet" autofocus>Cancel</button>
    <button class="preceda-button preceda-button--destructive">Delete matter</button>
  </div>
</dialog>

<ConfirmDialog open={open} destructive onClose={() => setOpen(false)}
  title="Delete this matter?" description="The draft, 3 letters and 6 authorities will be deleted. This cannot be undone."
  confirmLabel="Delete matter" busyLabel="Deleting…" onConfirm={() => deleteMatter(id)} />

Anatomy

.preceda-menu-trigger

aria-haspopup="menu", aria-expanded; ruled text button with ▾, `--quiet`, or `--kebab` (⋯, needs aria-label).

.preceda-menu

role="menu" in a native auto popover (top layer, light dismiss), positioned by the internal helper: flips and shifts to stay in the visual viewport.

__item

role="menuitem", 40 px (44 px on phones); `__hint` at right; `__description` beneath.

__item--destructive

Binding ink; names what it destroys; follow with a ConfirmDialog.

[aria-disabled="true"]

Focusable, not choosable, ink-tertiary; the description says why.

__separator / __group-label

A hairline between groups; a small-caps group label (role="group").

Variants

State matrix

At 390 px

At 390 px items grow to 44 px and the list shifts to stay 8 px inside the visual viewport; with the keyboard up it flips above the trigger when there is more room there.

Accessibility

• WAI-ARIA menu button: Enter, Space or ArrowDown opens on the first item; ArrowUp opens on the last.
• In the list: Arrow keys wrap, Home/End jump, printable keys typeahead, Esc closes and returns focus, Tab closes.
• Disabled items stay focusable with aria-disabled so their reason (aria-describedby) is read.
• data-testid and aria-* on MenuItem pass through to the element.

Usage

<button class="preceda-menu-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="m">Actions ▾</button>
<div class="preceda-menu" id="m" role="menu" popover="auto">
  <button class="preceda-menu__item" role="menuitem" tabindex="-1"><span class="preceda-menu__label">Copy</span><span class="preceda-menu__hint">Rich text</span></button>
  <div class="preceda-menu__separator" role="separator"></div>
  <button class="preceda-menu__item" role="menuitem" tabindex="-1" aria-disabled="true" aria-describedby="why">…</button>
</div>

<Menu placement="bottom-end">
  <MenuTrigger>Actions</MenuTrigger>
  <MenuList>
    <MenuItem hint="Rich text" onSelect={copy} data-testid="artifact-copy">Copy</MenuItem>
    <MenuSeparator />
    <MenuItem disabled description={wordBlocker} data-testid="export-word">Word unavailable</MenuItem>
    <MenuItem destructive onSelect={() => setConfirming(true)}>Delete draft</MenuItem>
  </MenuList>
</Menu>

Anatomy

PopoverTrigger

aria-haspopup="dialog", aria-expanded, aria-controls.

.preceda-popover

role="dialog" in a native auto popover: top layer, light dismiss; positioned against the trigger (flip, shift).

__title

Small-caps heading over a hairline; names the panel.

__list / __option / __option-state

A flush list of choices, 40 px each, with a state word at right (“Added”).

__foot

A hairline and one secondary act.

Variants

State matrix

At 390 px

At 390 px the panel keeps 8 px from each edge and caps its height to the space available; a task longer than a few choices belongs in a Sheet instead.

Accessibility

• Non-modal: the page stays interactive; the panel is announced as a dialog named by its title.
• Focus moves to the first control on open, and back to the trigger on Esc or light dismiss.
• State words (“Added”) accompany disabled options, so the state is not colour alone.

Usage

<button aria-haspopup="dialog" aria-expanded="false" aria-controls="p">Add to matter</button>
<div class="preceda-popover" id="p" role="dialog" aria-labelledby="p-t" popover="auto">
  <h2 class="preceda-popover__title" id="p-t">Add to matter</h2>
  <ul class="preceda-popover__list"><li><button class="preceda-popover__option">…</button></li></ul>
</div>

<Popover>
  <PopoverTrigger>Add to matter</PopoverTrigger>
  <PopoverContent title={`Add ${caseName} to`}>
    <MatterChoices onAdd={add} />
  </PopoverContent>
</Popover>

Anatomy

.preceda-tooltip

role="tooltip" in a manual popover (it never closes an open menu). Ink slip, paper text, small role.

__keys

An optional shortcut hint after the label.

relation

`describe` (aria-describedby) keeps the control’s own name; `label` (aria-labelledby) names an icon-only control.

Variants

State matrix

At 390 px

Touch never shows a tooltip. On a phone every icon-only control must also carry its accessible name, and anything counsel must read is written on the page.

Accessibility

• Shows on keyboard focus (focus-visible) at once and on hover after a delay; hides on blur, Esc and pointer leave.
• Hoverable and persistent (WCAG 1.4.13): moving onto the tooltip keeps it; Esc dismisses it without moving focus or closing a dialog.
• Icon-only controls keep aria-label; the tooltip repeats it visually.

Usage

<button aria-label="Copy the draft" aria-labelledby="t">…</button>
<span class="preceda-tooltip" id="t" role="tooltip" popover="manual">Copy the draft</span>

<Tooltip content="Copy the draft" shortcut="⌘C" relation="label">
  <IconButton aria-label="Copy the draft" icon="copy" />
</Tooltip>

Anatomy

<dialog class="preceda-bottom-sheet">

Native modal: top layer, inert page, Esc. Paper, rounded top corners, dialog shadow.

__grip

A 40 px-wide button over a short rule. Drag between snaps; past the lowest it dismisses. Arrow Up/Down step snaps; Enter cycles.

__header / __title / __close

Small-caps title (“Correspondence”) and the return control (“Desk ▾”). The head drags too.

__body

Scrolls; overscroll is contained so the page does not move.

__footer

The docked composer; padded by the safe-area inset, lifted above the keyboard via the visual viewport.

--peek / --half / --full / --content

Snap heights from `--preceda-bottom-sheet-{peek,half,full}` (36, 58 dvh, full less the top inset); `content` fits up to half.

Variants

State matrix

At 390 px

This is a mobile surface. At desk width the sheet caps at 672 px and centres, but the workspace uses the always-open correspondence pane instead.

Accessibility

• Modal dialog: the page is inert; focus moves to the sheet (its title is read) and returns to the opener.
• The grip is a named button with Arrow Up/Down and Enter; dragging is never the only way to resize or dismiss.
• Esc and the visible return control both close; Tab stays inside.
• The footer rides above the on-screen keyboard; safe-area insets clear the home indicator.

Usage

<dialog class="preceda-bottom-sheet preceda-bottom-sheet--full" aria-labelledby="s-t">
  <div class="preceda-bottom-sheet__grip-row"><button class="preceda-bottom-sheet__grip" aria-label="Resize sheet"><span class="preceda-bottom-sheet__grip-bar"></span></button></div>
  <header class="preceda-bottom-sheet__header"><h2 class="preceda-bottom-sheet__title" id="s-t">Correspondence</h2><button class="preceda-bottom-sheet__close">Desk ▾</button></header>
  <div class="preceda-bottom-sheet__body">…</div>
  <div class="preceda-bottom-sheet__footer">…composer…</div>
</dialog>

<Sheet open={open} onClose={() => setOpen(false)} title="Correspondence" closeLabel="Desk"
  snapPoints={['half', 'full']} footer={<Composer … />}>
  {letters}
</Sheet>

Anatomy

.preceda-dock

Paper, a rule above, safe-area padding below. `--fixed` pins it to the viewport foot (hidden from 1024 px).

__grip

A button over a short rule; pull up more than 24 px, or tap, to open the sheet.

__summary

One line and a button (aria-expanded): “Correspondence · 3 letters” in the serif; the status at right.

__status--waiting

“1 question waiting” in binding ink — the words carry it, the colour marks it.

__content

The composer and the working line (on a hairline).

Variants

State matrix

At 390 px

The dock is the mobile form of the correspondence pane (ph-desk-paper). The page pads its foot by the dock height so the last paragraph of the draft is never hidden.

Accessibility

• A region named “Correspondence”; the grip and summary are buttons with aria-expanded and aria-controls pointing at the sheet.
• Pulling is never required: tap or Enter opens the sheet.
• “1 question waiting” is words first; binding ink is the second signal.

Usage

<section class="preceda-dock preceda-dock--fixed" aria-label="Correspondence">
  <button class="preceda-dock__grip" aria-label="Open correspondence" aria-expanded="false" aria-controls="sheet"><span class="preceda-dock__grip-bar"></span></button>
  <button class="preceda-dock__summary" aria-expanded="false" aria-controls="sheet">
    <span class="preceda-dock__title">Correspondence<span class="preceda-dock__count">3 letters</span></span>
    <span class="preceda-dock__status preceda-dock__status--waiting">1 question waiting</span>
  </button>
  <div class="preceda-dock__content">…composer… …working line…</div>
</section>

<Dock fixed title="Correspondence" count={`${letters} letters`} status={waiting ? `${waiting} question waiting` : undefined}
  waiting={waiting > 0} expanded={open} controls={sheetId} onExpand={() => setOpen(true)}>
  <Composer … />
  <WorkingLine label={phase} since={turn.startedAt} />
</Dock>

Anatomy

.preceda-coachmark

role="dialog", non-modal, in a manual top-layer popover; positioned against its anchor (flip, shift). A binding rule on the edge that faces the anchor.

__kicker / __count

Small caps: “Tour” and the count, “2 of 9”, in tabular figures.

__title / __body

A serif subheading, one line; a sentence or two in ink-secondary.

__choices / __choice

Optional acts in the body: the recorded questions on a sample matter.

__controls

Skip tour at the start (a text act); Back (quiet) and Next or Finish (ink) at the end, over a hairline.

.preceda-coachmark-spotlight

A cutout over the anchor whose shadow dims the page; a hairline binding rule marks the edge. Never takes the pointer.

Variants

State matrix

At 390 px

Below 640 px the same step rises as the bottom Sheet: the count as its small-caps head, the head and body in its body, Skip · Back · Next in its foot. The anchor is scrolled to the top of the screen above it.

Accessibility

• A non-modal dialog named by its head and described by its body; the page stays usable around it.
• Focus moves to Next on open and on each step, and back to where it was on close.
• Esc skips the tour at once, with no confirmation; a menu open under it closes first.
• The count is text (“Step 3 of 9”), not a row of dots. Motion is a short fade and is dropped under reduced motion.

Usage

<div class="preceda-coachmark" role="dialog" aria-modal="false" aria-labelledby="c-t" popover="manual" data-side="bottom">
  <p class="preceda-coachmark__kicker"><span>Tour</span><span class="preceda-coachmark__count">2 of 9</span></p>
  <h2 class="preceda-coachmark__title" id="c-t">Ask the associate a question.</h2>
  <div class="preceda-coachmark__body"><p>…</p></div>
  <div class="preceda-coachmark__controls">
    <button class="preceda-coachmark__skip">Skip tour</button>
    <span class="preceda-coachmark__moves"><button class="preceda-button preceda-button--quiet preceda-button--sm">Back</button><button class="preceda-button preceda-button--ink preceda-button--sm">Next</button></span>
  </div>
</div>

<Coachmark open={active} anchor='[data-testid="matter-composer"]'
  title="Ask the associate a question." step={3} total={9}
  onBack={back} onNext={next} onSkip={skip}>
  <p>…</p>
</Coachmark>

Anatomy

.preceda-kbd

One key: small role, ink-secondary on raised paper, rule border, rule-strong foot.

.preceda-kbd-combo

An outer <kbd> holding keys and joiners (“+” or “then”); spoken as “Command + K”.

.preceda-shortcut

A shortcut list row on a hairline: the act at left, the keys at right.

Variants

State matrix

At 390 px

Shortcut lists are hidden on touch-only devices; where keys appear on a phone (an external keyboard), rows keep the act and keys on one line.

Accessibility

• Combinations carry a spoken aria-label (“Command + K”); symbol keys have names.
• Keys are text, not images, so they scale with the page.

Usage

<kbd class="preceda-kbd-combo" aria-label="Command + K"><kbd class="preceda-kbd" aria-hidden="true">⌘</kbd><span class="preceda-kbd-combo__joiner" aria-hidden="true">+</span><kbd class="preceda-kbd" aria-hidden="true">K</kbd></kbd>

<Kbd keys={['⌘', 'K']} />
<Shortcut action="Go to matters" keys={['G', 'M']} sequence />