Navigation

Anatomy

.preceda-link

The 0.1 chrome link: Inter 14 in binding ink, rule-strong underline that darkens to the ink on hover.

--inline

Inherits the family, size and weight of the sentence (a judgment, a letter).

--standalone

A destination on its own line: serif 15, 40px target, a hairline rule under the words (__text).

--back

“‹ Matters”: ink serif at the reading size; the guillemet (__glyph) is aria-hidden.

--subdued

A secondary destination in tertiary ink (“Request an introduction”). Never a disabled link.

.preceda-link-list

Next steps on one line between drawn middots, with an optional small-caps lead.

external

A trailing arrow and “(opens in a new tab)” for assistive technology; target=_blank rel=noopener.

Variants

State matrix

At 390 px

Standalone and back links are 44px tall on touch; next steps get extra block padding so each is its own target, and the line wraps at middots rather than mid-phrase.

Accessibility

• A link navigates; an act that changes something is a button (button.preceda-link for a text-styled act).
• Underlines are kept: in running text the underline, not the colour, marks the link.
• The back guillemet is aria-hidden; the link text names the destination (“Matters”).
• Router links keep their behaviour through asChild.

Usage

<a class="preceda-link preceda-link--standalone" href="/login"><span class="preceda-link__text">Members sign in</span></a>
<a class="preceda-link preceda-link--back" href="/matters"><span class="preceda-link__glyph" aria-hidden="true">‹</span><span class="preceda-link__text">Matters</span></a>
<ul class="preceda-link-list" aria-label="Next">
  <li class="preceda-link-list__label" aria-hidden="true">Next</li>
  <li class="preceda-link-list__item"><a class="preceda-link preceda-link--inline" href="#">Draft the application</a></li>
</ul>

import { Link, LinkList } from '@luvkapur/preceda-design-system/react';

<Link asChild variant="back"><RouterLink to="/matters">Matters</RouterLink></Link>
<LinkList label="Next">
  {actions.map((a) => <button key={a.id} className="preceda-link preceda-link--inline" onClick={() => run(a)}>{a.label}</button>)}
</LinkList>

Anatomy

.preceda-masthead

The <header>: a size container with one rule beneath, on paper. --sticky pins it (layer: sticky).

__bar

44px grid: brand | sections | account. Below a 640px masthead, sections move to their own scrolling row.

__brand-link

MastheadBrand: the home link around T2’s outlined Wordmark, set at 17px type in currentColor. `sealed` sets the header lockup (seal + PRECEDA) instead.

__nav / __item

nav[aria-label="Primary"]: serif 15 in secondary ink; the current section in ink over a 1px binding rule, aria-current="page".

__account

Small Inter in tertiary ink, parts between middots; links in secondary ink. A quiet MenuTrigger here (the account menu) is set at the line’s size. Only the first part stays on a narrow masthead.

__skip

“Skip to content”, visible only on keyboard focus.

Variants

State matrix

At 390 px

Inside the workspace below desk width, use CompactHead instead. Elsewhere at 390px the masthead keeps the wordmark and the first account part on one line, and moves the sections to a scrolling row beneath.

Accessibility

• header (banner) > nav “Primary”; the current section carries aria-current="page", drawn as a rule as well as ink.
• The brand link is named by the wordmark’s <title>, “Preceda, home” (override with label).
• Pass skipTo with the main region’s id to render a skip link that appears on focus.
• Section links are 44px tall; the focus ring is drawn inside the header so it is never clipped.

Usage

<header class="preceda-masthead">
  <div class="preceda-masthead__bar">
    <div class="preceda-masthead__brand">
      <a class="preceda-masthead__brand-link" href="/">
        <svg class="preceda-wordmark" viewBox="…" fill="currentColor" role="img" aria-labelledby="wm"><title id="wm">Preceda, home</title>…</svg>
      </a>
    </div>
    <nav class="preceda-masthead__nav" aria-label="Primary">
      <ul class="preceda-masthead__list">
        <li><a class="preceda-masthead__item" href="/matters" aria-current="page"><span class="preceda-masthead__item-text">Matters</span></a></li>
      </ul>
    </nav>
    <div class="preceda-masthead__account">
      <span class="preceda-masthead__account-part">Adv. R. Mehra</span>
      <span class="preceda-masthead__account-part">Introductions remaining: 2</span>
    </div>
  </div>
</header>

import { Masthead, MastheadAccount, MastheadBrand, MastheadNav, MastheadNavItem } from '@luvkapur/preceda-design-system/react';

<Masthead
  skipTo="main"
  brand={<MastheadBrand asChild><RouterLink to="/" /></MastheadBrand>}
  nav={
    <MastheadNav>
      <MastheadNavItem asChild current={inMatters}><RouterLink to="/matters">Matters</RouterLink></MastheadNavItem>
    </MastheadNav>
  }
  account={<MastheadAccount><span>{name}</span><span>Introductions remaining: {n}</span></MastheadAccount>}
/>

Anatomy

.preceda-compact-head

<header> grid: start | centre | end, 44px plus the top safe-area inset, one rule beneath. --sticky pins it.

__start

A back link (“‹ Matters”), padded to a 44px target.

__center

The wordmark (an unlinked MastheadBrand, T2’s outlined PRECEDA); with data-collapsed="true", the matter title in the serif, truncated.

__end

One or two acts: “More” (⋯), or the member’s initials (__initials) linking to the account or, as a MenuTrigger, opening the account menu.

Variants

State matrix

At 390 px

This is the mobile form. It respects env(safe-area-inset-*) so it clears the notch in a standalone PWA; the collapse is scroll-driven with a plain fade and never changes the active tab.

Accessibility

• A header landmark; the back link names its destination and the “More” act has a label.
• Collapsing swaps visible text only; the page’s h1 (the matter title) stays in the document.
• Every target is 44 × 44px.

Usage

<header class="preceda-compact-head preceda-compact-head--sticky" data-collapsed="false">
  <div class="preceda-compact-head__start"><a class="preceda-link preceda-link--back" href="/matters">…Matters</a></div>
  <div class="preceda-compact-head__center"><span class="preceda-masthead__brand-link"><svg class="preceda-wordmark" role="img" …><title>Preceda</title>…</svg></span></div>
  <div class="preceda-compact-head__end"><button class="preceda-button preceda-button--quiet preceda-button--icon" aria-label="More actions">…</button></div>
</header>

import { CompactHead, IconButton, Link, Menu, MenuItem, MenuList, MenuTrigger } from '@luvkapur/preceda-design-system/react';

<CompactHead
  sticky
  collapsed={!titleInView}
  back={<Link asChild variant="back"><RouterLink to="/matters">Matters</RouterLink></Link>}
  title={matter.title}
  actions={<IconButton icon="more" label="More actions on this matter" onClick={openMenu} />}
/>

Anatomy

.preceda-bottom-nav

nav[aria-label="Primary"] on paper with a rule above; pads for the home indicator (safe-area bottom).

--fixed

Fixed to the viewport (layer: dock). Give the page .preceda-bottom-nav-clearance.

__item

48px target: 20px icon over the small-role word, secondary ink; aria-current="page" sets ink and a 1px binding rule on top.

__count

A figure in binding ink by the glyph (“1”), read with its words (“question waiting”).

Variants

State matrix

At 390 px

Phone only; hide from desk width up (the Masthead takes over). Do not show it inside the matter workspace: the dock and CompactHead own that screen.

Accessibility

• A second “Primary” navigation landmark only exists when the masthead’s is not rendered, so there is never two.
• The word is always visible; the icon is decorative.
• The count is not colour alone: it is a figure with hidden words.

Usage

<nav class="preceda-bottom-nav preceda-bottom-nav--fixed" aria-label="Primary">
  <ul class="preceda-bottom-nav__list">
    <li><a class="preceda-bottom-nav__item" href="/matters" aria-current="page">
      <svg class="preceda-icon preceda-icon--20" aria-hidden="true"><use href="/icons.svg#preceda-icon-document"/></svg>
      <span class="preceda-bottom-nav__label">Matters</span>
    </a></li>
  </ul>
</nav>

import { BottomNav, BottomNavItem } from '@luvkapur/preceda-design-system/react';

<BottomNav fixed>
  <BottomNavItem asChild icon="document" current={inMatters} count={waiting} countLabel="questions waiting">
    <RouterLink to="/matters">Matters</RouterLink>
  </BottomNavItem>
</BottomNav>

Anatomy

nav[aria-label="Breadcrumb"] > ol

An ordered list; separators “›” are drawn by CSS, not read.

__link

Ancestors: small Inter in tertiary ink with a rule underline; binding ink on hover.

__current

The page itself, secondary ink, aria-current="page"; truncates with an ellipsis.

__fold

Past maxItems (4) the middle folds into “…”, a button that expands the trail in place.

Variants

State matrix

At 390 px

At 390px the trail wraps at separators and the current page truncates; below three levels prefer a single back link (“‹ BNSS”) in the CompactHead.

Accessibility

• nav “Breadcrumb” with an ordered list; the current page is aria-current="page" and not a link.
• Separators are CSS content and are not announced.
• The fold is a button named “Show 2 more levels”.

Usage

<nav class="preceda-breadcrumb" aria-label="Breadcrumb">
  <ol class="preceda-breadcrumb__list">
    <li class="preceda-breadcrumb__item"><a class="preceda-breadcrumb__link" href="/">Search</a></li>
    <li class="preceda-breadcrumb__item"><span class="preceda-breadcrumb__current" aria-current="page">Legislation</span></li>
  </ol>
</nav>

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

<Breadcrumb items={[
  { label: 'Search', link: <RouterLink to="/" /> },
  { label: 'Legislation', link: <RouterLink to="/legislation" /> },
  { label: act.shortTitle },
]} />

Anatomy

.preceda-tabs

role="tablist" over one rule. Overflows sideways with scroll-snap; the scrollbar is hidden.

.preceda-tab

Utility (0.1): Inter 13, tertiary ink; selected in binding ink over a 2px binding rule.

--desk

Serif 15 (17 on the phone) in secondary ink; hover draws a rule-strong line; selected is ink over a 1px binding rule.

__count

A figure after the label (“Authorities 4”), in the folio role.

__item + __close

A transient tab (an opened judgment) with a labelled cross beside it; Delete also closes it.

.preceda-tab-panel

role="tabpanel", labelled by its tab, focusable.

.preceda-tab-panels--swipe

Panes side by side with mandatory snap; a swipe selects the tab, a tab scrolls the pane in. Off-screen panes are inert.

<TabList>

0.1 roving focus for consumer-owned tabs (still exported; now forwards ref and takes variant).

Variants

State matrix

At 390 px

Pinned directly under the CompactHead. The desk row is set at 17px and scrolls sideways, snapping to a tab; it never wraps. With swipe, the panes sit side by side and a horizontal swipe changes the tab without changing the scroll position of the desk.

Accessibility

• WAI-ARIA tabs: one tab stop (the selected tab); ArrowLeft/Right (and Up/Down) move, Home/End jump; the focused tab scrolls into view.
• Automatic activation selects on focus for loaded panes; pass activation="manual" when a pane fetches, so Enter or Space selects.
• Each tab has aria-controls; each panel aria-labelledby. Only the selected panel is in the tab order and the accessibility tree (others are hidden, or inert while swiping).
• The selected tab is marked by ink and a rule, not colour alone. A disabled tab is aria-disabled and struck through.
• Closable tabs: the cross is labelled (“Close Case”) and skipped by Tab; Delete on the tab closes it and the product moves selection.

Usage

<div class="preceda-tabs preceda-tabs--desk" role="tablist" aria-label="Desk">
  <button class="preceda-tab" role="tab" id="t-draft" aria-controls="p-draft" aria-selected="true">Draft</button>
  <button class="preceda-tab" role="tab" id="t-auth" aria-controls="p-auth" aria-selected="false" tabindex="-1">
    Authorities <span class="preceda-tab__count">4</span>
  </button>
</div>
<div class="preceda-tab-panel" role="tabpanel" id="p-draft" aria-labelledby="t-draft" tabindex="0">…</div>

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

<Tabs
  label="Desk"
  variant="desk"
  swipe={isPhone}
  value={activeTab}
  onValueChange={setActiveTab}
  onClose={() => { setViewingCaseId(null); setActiveTab('draft'); }}
  items={[
    { value: 'draft', label: 'Draft', panel: <DraftPane />, tabProps: { 'data-testid': 'tab-draft' } },
    { value: 'authorities', label: 'Authorities', count: toVerify, panel: <AuthoritiesPane /> },
    …(viewingCaseId ? [{ value: 'case', label: 'Case', closable: true, panel: <CaseViewer /> }] : []),
  ]}
/>

Anatomy

.preceda-load-more

Centred foot over a hairline: count, status, act.

__count

“Showing 30 of 1,284 judgments” in the small role, tabular figures.

__status

role="status": announces “Loading…” (visually hidden; the button shows it) and states a failure in binding ink.

act

A small secondary Button (“Load 30 more”); loading shows the working point; after a failure it reads “Try again”.

__sentinel

With auto, an IntersectionObserver target 400px ahead of the act fetches the next page before counsel reaches it.

--end

No more pages: the total between two short rules.

Variants

State matrix

At 390 px

The act stays a full 44px target; with auto the next page is usually in place before the thumb reaches the foot. Keep the count so counsel knows where they are in a long list.

Accessibility

• Automatic loading never removes the button; keyboard and screen-reader users can always ask for the next page.
• Loading, failure and the end are announced politely; the page does not move focus.
• The product should move focus to the first new row only when the act (not the sentinel) loaded it.

Usage

<div class="preceda-load-more">
  <p class="preceda-load-more__count">Showing 30 of 1,284 judgments</p>
  <p class="preceda-load-more__status" role="status" aria-live="polite"></p>
  <button class="preceda-button preceda-button--secondary preceda-button--sm" type="button">Load 30 more</button>
</div>

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

<LoadMore
  auto
  onLoadMore={fetchNextPage}
  loading={loadingMore}
  hasMore={hasMore}
  error={pageError}
  count={`Showing ${results.length} of ${total} judgments`}
  label="Load 30 more"
/>

Anatomy

nav.preceda-pager

A labelled nav landmark on a hairline.

__link--previous / --next

The product’s own link element (a router link or <a href>), given the class, rel and words.

__status

“Page 2 of 221” in folio figures; a text may say “Part 2 of 26”.

Variants

State matrix

At 390 px

Below 640 px the position takes its own row above the two links.

Accessibility

• A nav landmark named by the product (“Judgment pages”, “Text pages”); rel="prev" and rel="next" on the links.
• With one page the pager renders nothing; a missing previous or next leaves an aria-hidden spacer.

Usage

<nav class="preceda-pager" aria-label="Judgment pages">
  <a class="preceda-pager__link preceda-pager__link--previous" rel="prev" href="?page=1">Previous page</a>
  <p class="preceda-pager__status">Page 2 of 221</p>
  <a class="preceda-pager__link preceda-pager__link--next" rel="next" href="?page=3">Next page</a>
</nav>

<Pager page={page} pages={pages} previous={<Link search={{ page: page - 1 }} />} next={<Link search={{ page: page + 1 }} />} />