` takes `aria-label` from the title, not `aria-labelledby`. The string matches the visible heading and the region is non-interactive, so there is no name mismatch; a visible-heading reference is a future enhancement. * `className` merges onto the root, so a caller who passes `truncate` can clip a reading. The component truncates nothing; the JSDoc warns of it. **Not checked by any gate.** Print, `forced-colors` and `prefers-contrast`. ## Data attributes [#data-attributes] ## API reference [#api-reference] `now` and `precision` are required: the card never reads the clock, so pass one `now` to every card on a screen. `value` is `number | null`, never a string; a pair is `segments`. A third action, a second `recommended` and a `titleLevel` outside 2 to 6 each warn once and fall back. ## Related [#related] * [MetricTile](./metric-tile.mdx) is the same data with no room to explain itself. * [Card](./card.mdx) is a neutral box with no clinical contract. * [CareCard](./care-card.mdx) is a card whose subject is an instruction, not a measurement. * [AlertBanner](./alert-banner.mdx) is for something that must interrupt. * [DisclaimerNote](./disclaimer-note.mdx) is where the not-medical-advice note lives. --- # ScaleInput Source: https://opsinjs.pensievelabs.org/components/scale-input Markdown: https://opsinjs.pensievelabs.org/components/scale-input.md Section: Components · kind: component · status: shipped · also known as: pain scale, rating scale, likert Audited against WCAG 2.2 AA. Clinical review pending. ## Preview [#preview] ## Installation [#installation] ## Usage [#usage] ```tsx import { ScaleInput } from "@/components/ui/scale-input" ``` ```tsx ``` ## When to use it [#when-to-use-it] ## Clinical meaning [#clinical-meaning] **Asserts.** The reader chose this point on a scale the product defined. The value goes back through `onValueChange`, with no total, band, verdict or interpretation added. **Never read as.** A score, a measurement or a result opsinjs derived. A far point is a high self-report, and whether it matters is a clinical judgement this component does not make. It never diagnoses, triages or advises. See [Who this is for](../health/who-this-is-for.mdx). **Colour axis.** Neither. The scale writes neither `data-status` nor `data-category`, and the chosen point takes the neutral primary fill. A product that decides a rating matters says so on its own status surface. See [The two colour axes](../health/two-colour-axes.mdx). **Thresholds.** None. The point count arrives through `points` and the end words through `minLabel` and `maxLabel`. opsinjs ships no scale, no anchor words and no scoring. See [Clinical interaction guidelines](../health/clinical-interaction-guidelines.mdx) and [Numbers, units and precision](../health/numbers-units-precision.mdx). ## Anatomy [#anatomy] ## Examples [#examples] ### A rating with end words [#a-rating-with-end-words] Ten points with a word at each end, from `label`, `points`, `minLabel` and `maxLabel`. ### No answer yet [#no-answer-yet] `value` is `null`, so the scale draws with no point chosen rather than defaulting to a middle the reader never picked. ## Content guidelines [#content-guidelines] Write `label` as the thing being rated in the reader's words, "Comfort right now" rather than "1 to 10". It is the accessible name and the only place the question is stated. Take the end words from the product's instrument, short and opposite, never a verdict. Keep the point count fixed. **`label="Comfort right now"` with end words from the product's instrument.** Named question, fixed ends, so answers compare over time. **No `label`, invented end words, a point count that drifts between screens.** Nameless radios whose answers cannot be compared. ## Accessibility [#accessibility] **Audited against WCAG 2.2 AA, in a source pass and a rendered pass.** The audit is author-run, not an independent review, and clinical review is pending. * One tab stop with a roving focus: `role="radiogroup"` on the root, `role="radio"` and `aria-checked` on each point, and selection follows focus. * Every point floors its hit area at `--opsin-target-minimum` in rem, and the row wraps rather than shrinking a point below its target. **Fixed in this pass.** In forced colours the chosen point now repaints to the system Highlight pair with a Highlight border and `forced-color-adjust-none`, so selection stays distinct. **Deferred, and named.** The question reaches the radiogroup only as an `aria-label`, weaker than a visible label, the recommended enhancement, a decision shared with combobox. In normal mode the selection carries no glyph, so luminance inversion and the border carry it without hue. Every contrast pair on the host's ground is unmeasured, and the report below prints only what has been measured. ## Data attributes [#data-attributes] ## API reference [#api-reference] `points` has no default, and fewer than two renders nothing with a development warning. `value` is `number | null`: `null` draws nothing chosen, and a number outside 1 to `points` does the same and warns. `label` is required: a radiogroup with no accessible name is a defect the types cannot prevent. ## Related [#related] * [RadioGroup](./radio-group.mdx) is for a fixed set of labelled choices with no ordered ends. * [Textarea](./textarea.mdx) is for an answer in the reader's own words. * [Questionnaire](./questionnaire.mdx) is the name recorded for a multi-question instrument opsinjs does not ship. * [Field](./field.mdx) is the wrapper each rated item of a multi-question instrument sits in. --- # ScoreDial Source: https://opsinjs.pensievelabs.org/components/score-dial Markdown: https://opsinjs.pensievelabs.org/components/score-dial.md Section: Components · kind: component · status: shipped · also known as: gauge, dial, ring, score, index, bmi Audited against WCAG 2.2 AA. Clinical review pending. ## Preview [#preview] ## Installation [#installation] ## Usage [#usage] ```tsx import { ScoreDial } from "@/components/ui/score-dial" ``` ```tsx ``` ## When to use it [#when-to-use-it] ## Clinical meaning [#clinical-meaning] **Asserts.** The product computed a number from stated inputs, and it fell in a named band. It asserts a calculation, never a fact about the reader's body. **Never read as.** A measurement, a diagnosis, a percentage or a rank. [Risk and statistics](../health/risk-and-statistics.mdx) keeps probabilities off it. The scale reads *on a scale of 10 to 20*, never *out of 20*. **Colour axis.** Status sits on the indicator and the band the score fell in, only when the product passed `status`. Other bands stay neutral. Category tints the label alone, so [the two colour axes](../health/two-colour-axes.mdx) never meet. **Thresholds.** The product owns every band and cut-off; opsinjs ships none. `ScoreBand.source` is required, as [Reference ranges](../health/reference-ranges.mdx) demands. `status` is an input, never derived. `attention` and `urgent` are refused. **Staleness.** `calculatedAt` renders as a plain date, with no staleness treatment. Add a RelativeTime when an old score must read as old. When only part of the input data was available, `coverage` must say so. Name what was counted in your derivation; it will not guess a noun. ## Anatomy [#anatomy] ## Examples [#examples] ### opsinjs ships no bands [#opsinjs-ships-no-bands] With an empty `bands`, the dial draws the scale, places the number and names no band. ### A score built from less than usual [#a-score-built-from-less-than-usual] `coverage` puts the gap on the dial's face. `status="watch"` is a prop on the dial, not a field on a band. ### Zero is a score; absence is not [#zero-is-a-score-absence-is-not] `value={0}` reached the bottom of its scale. `value={null}` never ran, so nothing is placed. ## Accessibility [#accessibility] Audited against WCAG 2.2 AA in a source pass and a rendered pass. The audit is author-run, not an independent review, and clinical review is still pending. It found nothing to change: no serious defect in the source, and a clean rendered pass over axe, target size and 320px reflow. There are no interactive elements, so keyboard and pointer criteria pass vacuously. **Argued from the source.** * The graphic is `role="img"` with a complete `aria-label` and `focusable="false"`, never a `meter`, `progressbar` or `slider`, which would assert a within-range value it may not make. * Every status tint carries a word and a glyph and stamps `data-status`, never colour alone. * The band name, scale, source and derivation are visible text no prop removes, the layout is one stacked column that never truncates at 200% text, and nothing animates. **Deferred.** No live region mounts, because it is static and read-only, so nothing announces a score change; adding one is a recommended enhancement, not a fix. The tinted band strokes below the non-text floor in light, left as-is because the band name, the StatusPill word and glyph, the indicator and `data-status` all say the same thing. **Unmeasured.** The pair the arc stroke forms against its card is not in the measured set; the source records it and types no number. ## Data attributes [#data-attributes] ## API reference [#api-reference] `bands` is required with no default, and an empty array is legitimate. A `ScoreBand` carries an inclusive `from`, an exclusive `to`, a `name` in the reader's language and a required `source`. `status` accepts only `steady | watch`. `precision` is required, as [Numbers, units and precision](../health/numbers-units-precision.mdx) demands. A non-finite `value` prints and speaks *not available*. ## Related [#related] * [RangeBar](./range-bar.mdx) is a measured value against a published range, not a calculation. * [Progress](./progress.mdx) is a task advancing towards a goal, not a score. * [GoalRing](./goal-ring.mdx) is the ring the reader fills by doing something. * [MetricTile](./metric-tile.mdx) is the compact readout, with no room for a derivation. * [Value](./value.mdx) is honest when the derivation cannot be stated. --- # ScrollArea Source: https://opsinjs.pensievelabs.org/components/scroll-area Markdown: https://opsinjs.pensievelabs.org/components/scroll-area.md Section: Components · kind: component · status: shipped · also known as: scroller, overflow container Audited against WCAG 2.2 AA. Clinical review pending. ## Preview [#preview] ## Installation [#installation] ## Usage [#usage] ```tsx import { ScrollArea } from "@/components/ui/scroll-area" ``` ```tsx

{item.label}

``` ## When to use it [#when-to-use-it] ## Anatomy [#anatomy] ## Examples [#examples] ### A long list [#a-long-list] The list outruns its box, so `maxHeight` bounds the region and the rail appears while the page around it keeps its native scroll. ### In a card [#in-a-card] One bounded panel with a heading fixed above the region, so `maxHeight` makes only the card body overflow and scroll. ## Accessibility [#accessibility] This component was audited against WCAG 2.2 AA in a source pass and a rendered pass. The audit is author-run, not an independent review, and clinical review is still pending. The audit found one serious defect and fixed it. The viewport was not a reliable keyboard tab stop and carried no accessible name, so a screen reader that reached it met an unnamed stop. It now holds a tab stop and takes a name through `label` or `labelledBy`, and the default demo and both examples name their region, one by pointing `labelledBy` at its on-screen heading. The rendered pass found nothing else to change: no colour-axis, token, `px`, or colour-literal issue, and reflow and target size passed. Two items stay open. In the card example the rounded corners can partly clip the focus ring at the flush bottom edge, though the indicator stays perceivable. The thumb's contrast and the pairs below are not measured in source, so the report below stands as its own record. ## Data attributes [#data-attributes] ## API reference [#api-reference] `maxHeight` gives the region something to overflow, so set it in a rem rather than a pixel count. Given neither it nor a height class, the region grows to fit and a development warning names the omission. `className` is the one route by which colour reaches the region, and the two-colour-axes rule applies in full. ## Related [#related] * [Card](./card.mdx) draws a bounded surface but grows with its content rather than scrolling it. * [Sheet](./sheet.mdx) is an overlay owning its own scroll, not an inline region. * [Table](./table.mdx) is content a scroll area may wrap to scroll sideways. --- # SegmentedControl Source: https://opsinjs.pensievelabs.org/components/segmented-control Markdown: https://opsinjs.pensievelabs.org/components/segmented-control.md Section: Components · kind: component · status: shipped · also known as: segmented buttons, toggle group Audited against WCAG 2.2 AA. Clinical review pending. ## Preview [#preview] ## Installation [#installation] ## Usage [#usage] ```tsx import { SegmentedControl } from "@/components/ui/segmented-control" ``` ```tsx ``` ## When to use it [#when-to-use-it] ## Anatomy [#anatomy] ## Examples [#examples] ### Switching a chart window [#switching-a-chart-window] The three options set the window of one chart rather than swapping between three charts, which is why it is a radiogroup. The chart is a placeholder. ## Content guidelines [#content-guidelines] Keep the labels short, parallel and in sentence case, one or two words each, so the row reads as siblings. Name the value the option sets, not an instruction, and give it no terminal punctuation. Order them the way the reader thinks, shortest to longest, and keep one wording across screens. **"Day" · "Week" · "Month"** Three parallel windows, one word each, ordered shortest to longest. **"Today" · "This week's readings" · "Show me the month"** Three lengths and three grammars, so the row stops reading as one set. ## Accessibility [#accessibility] **Audited against WCAG 2.2 AA**, in a source pass over the full rubric and a rendered pass in the browser. The audit is author-run, not an independent review, and clinical review is still pending. A radio group, so the row is one tab stop with a roving focus, with `radiogroup` plus `radio` and `aria-checked` per segment for name, role and value. Selection is carried three ways and never by colour alone: `aria-checked`, the card surface lifting the segment off the track, and a hairline. **What the audit changed here.** The 44px hit-area floor sat on the height axis only, so a single-character label or the `sm` size could shrink a segment below the house minimum. The floor now sits on both axes, matching `scale-input` and `tab-bar`. **What a reader should still know.** `label` is applied only as the group's `aria-label`, so there is no persistent visible group heading. Every option carries visible text, so the choices are seen, but a visible group label is a recommended enhancement, deferred as one repair across the wrappers that share this pattern. No contrast pair has been measured, so greyscale legibility of the selected segment is argued, not confirmed. ## API reference [#api-reference] `value` and `onValueChange` make this controlled, with no internal selection state. A `value` matching no option renders the row with nothing chosen and raises a development warning. `label` is required: a radiogroup with no accessible name is a defect the type system cannot otherwise prevent. ## Related [#related] * [Tabs](./tabs.mdx) swap between distinct panels of content. This control sets a parameter of one view. * [Field](./field.mdx) with a select is the control for a choice too large or too wordy for one row. * [Button](./button.mdx) performs an action rather than setting a value. --- # Select Source: https://opsinjs.pensievelabs.org/components/select Markdown: https://opsinjs.pensievelabs.org/components/select.md Section: Components · kind: component · status: shipped · also known as: dropdown, picker Audited against WCAG 2.2 AA. Clinical review pending. ## Preview [#preview] ## Installation [#installation] ## Usage [#usage] ```tsx import { Select } from "@/components/ui/select" ``` ```tsx

```

## When to use it [#when-to-use-it]

## Examples [#examples]

### A notes field [#a-notes-field]

The case Textarea was built for, standalone rather than inside a Field. `aria-label`
carries the prompt, and the placeholder shows the kind of answer wanted rather than
repeating the question.

### With a character limit [#with-a-character-limit]

`maxLength` caps the text, and the footnote states the limit in words, because the
native attribute refuses the next keystroke in silence. This box is named by a real
`<label htmlFor>` pointed at its `id`.

## Content guidelines [#content-guidelines]

Put the question in a label or `aria-label`, never only in the placeholder, which is
grey and vanishes the moment a reader types. Use the placeholder for an example of the
answer. State a length limit in words before the reader reaches it, and count down to
the ceiling rather than up from zero.

<DoDont>
  <DoDont.Do>
    **Label "Anything you want to add?", placeholder "A sentence or two is plenty."**
  </DoDont.Do>

<DoDont.Dont>
    **No label, the question in the placeholder.** It vanishes on the first keystroke.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

**Audited against WCAG 2.2 AA in a source pass and a rendered pass.** The audit is
author-run and is not an independent review, and clinical review is still pending. The
rendered pass on the component view was clean: no axe violations, no target-size hit, no
focus-visible failure, and no reflow at 320px. The source pass confirmed the same, so the
audit found nothing to change and no fix was applied.

The box draws only neutral chrome roles, so no status colour, colour literal or ramp step
reaches it, and the type is the `body` step rather than a pixel size.

* The box needs an accessible name and invents none. A Field label, an `aria-label`, or
  an `id` with a real `<label htmlFor>` gives it one, and the default export models the
  visible-label path.
* With none of `aria-label`, `id` or `name` present, a development warning names the gap
  rather than shipping an unnamed box.
* `invalid` sets `aria-invalid` and leaves the border neutral, because a form error is
  not a clinical status. The message is [Field](./field.mdx)'s to place, so standalone
  the box cannot associate an external message id.
* The focus ring rides in the box's own classes, so a project without the product
  stylesheet keeps it. Height floors at the house target.

Known residual items a reader should weigh. The box accepts an `aria-label` on its own,
and a persistent visible label is the recommended enhancement rather than a requirement,
which is why the default export uses one. `maxLength` is forwarded but the box renders no
visible counter and no live remaining-count region, so pair the limit with a visible count
near the box as the Content guidelines say. Disabled state uses a muted fill rather than an
opacity wash so the text stays legible, and WCAG exempts disabled controls from the contrast
floor.

**Not checked by any gate.** Every contrast pair, and what the box draws under
`forced-colors: active` and `prefers-contrast: more`, including the browser's own
resize handle.

## API reference [#api-reference]

`value` with `onChange` makes the box controlled; `defaultValue` leaves it owning its
own text. `rows` sets the resting height and defaults to three. `invalid` sets
`aria-invalid` and draws no colour. `className` is merged last and must resolve no
`--opsin-status-*` or `--opsin-category-*` role.

## Related [#related]

* [Field](./field.mdx) with an input is the control for a single-line answer, such as a
  name or a place.
* [ReadingInput](./reading-input.mdx) is the control for a measurement with a unit,
  which a free-text box cannot format.

---

# TimelineEntry

Source: https://opsinjs.pensievelabs.org/components/timeline-entry
Markdown: https://opsinjs.pensievelabs.org/components/timeline-entry.md
Section: Components · kind: component · status: shipped · also known as: history item, event list, activity feed

<StubNotice
  name="timeline-entry"
  status="shipped"
  questions="[
  "No contrast pair has been measured. The neutral marker and the hairline connector are painted on whatever ground the host provides, and that pairing is unchecked.",
  "No screen reader has met this component, so whether an entry reads well inside a product's own list has not been listened to by anybody.",
  "No locale is forwarded to the composed RelativeTime, so the recorded time takes the runtime default and a server render can disagree with a browser.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { TimelineEntry } from "@/components/ui/timeline-entry"
```

```tsx
<ol>
  <TimelineEntry
    when="2026-03-14T08:12:00+00:00"
    now={new Date().toISOString()}
    title="Repeat prescription issued"
    status="watch"
    isLast
  >
    Issued by the example clinic.
  </TimelineEntry>
</ol>
```

## When to use it [#when-to-use-it]

## Clinical meaning [#clinical-meaning]

**Asserts.** That the named event was recorded at the given instant, and nothing
more. A gap between two entries is not evidence that nothing happened in it.

**Never read as.** A diagnosis, a verdict, or a guarantee that the history is
complete or current. The entry never triages, diagnoses or advises, and every
word in it is the product's.

**Colour axis.** Neither, on the entry. The rail and the marker are neutral
chrome. A supplied `status` is delegated to a nested StatusPill, which carries
the status axis with a word and a glyph. See
[The two colour axes](../health/two-colour-axes.mdx).

**Thresholds.** The product owns them all. The entry holds no threshold, no
staleness boundary and no event text.
[Uncertainty, staleness and missing data](../health/uncertainty-and-staleness.mdx)
covers why it never guesses whether a recorded time is too old to trust, and
[Trends and change](../health/trends-and-change.mdx) covers why one entry is one
event, not a direction.

## Anatomy [#anatomy]

## Examples [#examples]

### A history on one rail [#a-history-on-one-rail]

Every row names and dates its event, the connector runs to the last entry and
stops, and one row carries a status the product assigned.

### The status rides the pill [#the-status-rides-the-pill]

Two entries alike but for `status`. The rail, the marker and the entry stay
neutral, and status changes only the pill beside the title.

## Content guidelines [#content-guidelines]

Name the event in the title as something that happened: `Repeat prescription
issued`, `Blood test booked`. A bare noun leaves the reader guessing whether it
was done, due, or cancelled. Let any status stay on the pill.

<DoDont>
  <DoDont.Do>
    **"Repeat prescription issued"** with the recorded time beneath it and the status on a pill.
  </DoDont.Do>

<DoDont.Dont>
    **The whole entry tinted amber** to flag the event. A status carried by colour alone dies in greyscale.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

**Audited against WCAG 2.2 AA in a source pass and a rendered pass.** The
rendered pass (axe, target size, focus visible, reflow at 320px) and the source
pass against the rubric were both clean. This audit is author run, not an
independent review.

* The rail and the marker carry `aria-hidden`, so a screen reader meets the
  time, the title, any status word and the body in reading order.
* The recorded time is the system RelativeTime, a semantic `time` element, so
  the exact instant stays in the accessibility tree when only the phrase shows.
* Nothing in the entry is focusable, so keyboard, focus and target size do not
  apply.

**Read this before you rely on it.**

* The marker and the connector are decorative chrome under `aria-hidden`, so
  they are exempt from Non-text Contrast (1.4.11). They use role tokens anyway.
* The root renders a bare `li`, so the product must supply the `ol` or `ul`
  around it for list semantics to hold. On Safari with VoiceOver a
  `list-style: none` list can drop its list role, a platform quirk shared by
  every list based component here rather than a fault in this one.

## API reference [#api-reference]

`when` is ISO 8601 with an offset, the contract RelativeTime enforces on its
`at`. `now` is required because this component never reads the clock, so read
the clock once per screen and pass one value to every entry. The event word is
fixed and no `locale` is forwarded, so a product needing either composes
RelativeTime directly.

## Related [#related]

* [RelativeTime](./relative-time.mdx) is the recorded time alone, with no event or rail around it.
* [Card](./card.mdx) is a bounded block around related content; an entry can sit inside one.
* [TrendSparkline](./trend-sparkline.mdx) is one reading moving over time, where this lists distinct events.

---

# Toast

Source: https://opsinjs.pensievelabs.org/components/toast
Markdown: https://opsinjs.pensievelabs.org/components/toast.md
Section: Components · kind: component · status: shipped · also known as: snackbar, transient message, notification toast

<StubNotice
  name="toast"
  status="shipped"
  questions="[
  "Whether a self-dismissing confirmation is announced in full before it leaves has been reasoned about from the Base UI roles rather than heard in a screen reader.",
  "Whether the default five seconds is long enough for a reader who reads slowly, uses a switch device, or is partway through another task is unmeasured.",
  "Whether the title, the description and the close control clear the text and non-text contrast floors has been argued from the roles rather than measured.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { Toast } from "@/components/ui/toast"
import { Toast as ToastManager } from "@base-ui/react/toast"
```

```tsx
function SaveButton() {
  const manager = ToastManager.useToastManager()
  return (
    <button onClick={() => manager.add({ title: "Saved" })}>Save note</button>
  )
}

function Screen() {
  return (
    <Toast position="bottom-right">
      <SaveButton />
    </Toast>
  )
}
```

## When to use it [#when-to-use-it]

## Anatomy [#anatomy]

## Examples [#examples]

### A save confirmation [#a-save-confirmation]

A button pushes a "Saved" toast that stays a few seconds and then leaves. The words are fictional and name nothing measured.

### With an action [#with-an-action]

`actionProps` adds one quiet control beside the message, so a reader who removed a note by mistake can reverse it. Here Undo only closes the toast.

## Content guidelines [#content-guidelines]

Keep a toast to the fact of the action, past tense, a word or two: "Saved", "Reminder set", "Note removed". Never write a clinical word, a reading or a level of urgency into one. Give an action a verb, and make it safe to ignore.

<DoDont>
  <DoDont.Do>
    **"Saved" with an optional "Undo".** The action still happened if the reader looks away.
  </DoDont.Do>

<DoDont.Dont>
    **A toast carrying a number, a result or an urgency.** Whoever needs it most misses it.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

Audited against WCAG 2.2 AA in a source pass and a rendered pass that together raised no axe violation, no target-size hit and no 320px reflow failure. This is an author-run audit, not an independent review; clinical review is pending.

**The audit found nothing in the source to change.** Roles, names, the polite live region, pause on hover and focus, Escape and focus return all come correctly from `@base-ui/react`. The X icon is `aria-hidden` and the close carries a translatable `aria-label`. Colours are role tokens, type sizes are `text-opsin-*` tokens, and the controls floor their hit area at `--opsin-target-minimum`.

**Residual items to know.** A toast pushed with a description and no title yields a dialog with no accessible name, because `ToastList` rightly emits no empty title; the default and both examples always pass a title, and a description-only toast is still announced by the live region through `aria-describedby`. Whether an appearing toast overlaps a control focused elsewhere is a product-layout question outside component scope. Contrast pairs are unmeasured, so the report below carries what was measured.

## API reference [#api-reference]

`position` defaults to `bottom-right`, `limit` to three and `timeout` to 5000ms. Passing `timeout={0}` stops every toast dismissing itself and raises a development warning, because a message that must persist is an AlertBanner or a Callout. `label` and `closeLabel` are props so they can be translated, and both default to English.

## Related [#related]

* [AlertBanner](./alert-banner.mdx) is for a message that needs attention now and stays until the reader deals with it.
* [Callout](./callout.mdx) sets a standing note or caveat apart for as long as the reader is on the surface.

---

# Tooltip

Source: https://opsinjs.pensievelabs.org/components/tooltip
Markdown: https://opsinjs.pensievelabs.org/components/tooltip.md
Section: Components · kind: component · status: shipped · also known as: hover label

<StubNotice
  name="tooltip"
  status="shipped"
  questions="[
  "No contrast pair has been measured: footnote ink on the card fill, and the arrow's fill against whatever surface sits behind it, are argued from the roles only.",
  "Nobody has listened to a tooltip in a screen reader, so whether the aria-describedby label is announced as a description, or at all on touch, is unheard.",
  "Nothing stops a caller putting the one fact a control cannot be used without behind a hover a phone reader never triggers; no lint catches it.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { Tooltip } from "@/components/ui/tooltip"
```

```tsx
<Tooltip content="A rolling mean across the nights you have logged.">
  <button type="button">Overnight average</button>
</Tooltip>
```

## When to use it [#when-to-use-it]

## Anatomy [#anatomy]

## Examples [#examples]

### On an icon button [#on-an-icon-button]

Each icon button carries its own name through `aria-label`; `content` repeats it
visibly. The labels name fictional actions.

### A supplementary hint [#a-supplementary-hint]

The setting is named in plain words, so a touch reader needs no hover, and
`content` adds one optional sentence.

## Content guidelines [#content-guidelines]

Keep a tooltip to a phrase in sentence case, with no terminal punctuation unless
it is a full sentence. Write what the control does or means, never an
instruction that only appears on hover.

<DoDont>
  <DoDont.Do>
    **"Reminders wait until the morning during the hours you set here"** beside a
    labelled setting.
  </DoDont.Do>

<DoDont.Dont>
    **The only label on an icon-only control, shown on hover alone.** A touch
    reader sees a bare glyph.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

Audited against WCAG 2.2 AA: a source pass over the whole rubric, and a rendered
pass over the measured findings. Author-run, not independent; clinical review
is still pending. The rendered pass found no axe violation, no target-size
breach, no focus-visible gap and no clipping at 320px. The source pass found
nothing to change in `tooltip.tsx`.

What holds:

* Base UI wires the popup through `aria-describedby`, so the label is a
  description, never a replacement for the control's own name.
* Focus opens the tooltip, Escape dismisses it without moving focus, and the
  label follows focus off the trigger.
* No status colour, no colour literal, no ramp step: `footnote` step, no `px`
  size, neither colour axis.

Open:

* A tooltip is unreachable on a hover-less touch device, so `content` stays
  supplementary.
* The popup's non-text contrast (SC 1.4.11) is the shared `border-border` role
  token, reasoned rather than measured.
* The popup staying hoverable across the gap (SC 1.4.13) is a Base UI 1.7.0
  default, not a manual trace.

## API reference [#api-reference]

`content` is required; an empty one raises a development warning. `children`
must be focusable. `side` defaults to `top` and Base UI flips it at the screen
edge. `delay` defaults to 600 and governs the pointer only; focus opens the
tooltip at once.

## Related [#related]

* [Term](./term.mdx) attaches a plain-English meaning to a clinical word inline.
* [Field](./field.mdx) carries a hint that is part of a form control and always visible.
* [Callout](./callout.mdx) sets essential information apart on the surface.

---

# TrendSparkline

Source: https://opsinjs.pensievelabs.org/components/trend-sparkline
Markdown: https://opsinjs.pensievelabs.org/components/trend-sparkline.md
Section: Components · kind: component · status: shipped · also known as: chart, graph, sparkline, over time, trend, mini chart, line chart

<StubNotice
  name="trend-sparkline"
  status="shipped"
  questions="[
  "Accessible charts requires a data-table twin beside every chart, and this component has none, so nothing checks a caller placed one.",
  "window is a display string, so two sparklines compare only where their series cover the same span.",
  "minimumPoints is required with no default, so the copied demo carries a threshold-shaped number A11Y014 cannot see.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { TrendSparkline } from "@/components/ui/trend-sparkline"
```

```tsx
<TrendSparkline
  label="Example measurement"
  unit="steps"
  precision={0}
  locale="en-GB"
  window="the last 6 entries"
  series={series}
  minimumPoints={readingsATrendNeeds}
/>
```

## When to use it [#when-to-use-it]

## Clinical meaning [#clinical-meaning]

**Asserts.** That these readings, in this unit, were recorded at these times. Nothing
about cause.

**Never read as.** A prediction, an explanation or a verdict. Upward is not worse and
downward is not better, because valence belongs to the measurement and often to the
person. Direction only ([Trends and change](../health/trends-and-change.mdx)).

**Colour axis.** Category, on the line alone
([Category identity](../health/category-identity.mdx)). Status is never drawn: the
marked reading is neutral and its verdict is a [StatusPill](./status-pill.mdx) in the
caption.

**Thresholds.** None. `changeThreshold` is required before any direction word prints,
and `minimumPoints` before any line is drawn
([Numbers, units and precision](../health/numbers-units-precision.mdx)).

**Gaps and age.** A `{ value: null }` entry breaks the path and is never interpolated.
The caption prints the last reading's date and invents no staleness boundary
([Uncertainty and staleness](../health/uncertainty-and-staleness.mdx)).

## Anatomy [#anatomy]

## Examples [#examples]

### A band behind the line, and one marked reading [#a-band-behind-the-line-and-one-marked-reading]

`range` shades a band only where it carries a source and both bounds. The one-sided
range beside it is stated in words, drawn as nothing.

### Not enough readings [#not-enough-readings]

`minimumPoints` of four, against series of four and three. The short one draws nothing
and appends its `caption` to the refusal.

### A row of tiles [#a-row-of-tiles]

What `category` is for: finding one line among several. Greyscale loses no fact.

## States [#states]

| Data state | What TrendSparkline renders                                                                 |
| ---------- | ------------------------------------------------------------------------------------------- |
| Error      | A non-finite value is counted apart from gaps and called unreadable in the caption.         |
| Loading    | None. The surface fetching the series owns the skeleton.                                    |
| Empty      | Below `minimumPoints` it draws no line and prints the refusal, naming count and minimum.    |
| Partial    | A `{ value: null }` entry is a real break, counted in the caption. Nothing is interpolated. |
| Stale      | The caption prints the last reading's date. No boundary invented, no verdict passed.        |

## Content guidelines [#content-guidelines]

Captions state direction where a `changeThreshold` allows one, then magnitude, window,
the marked reading, coverage, date and range. Avoid *improving*, *worsening*, *better*
and *on track*, because each is valence nobody signed. Pass `locale`, or date order is
the runtime's.

<DoDont>
  <DoDont.Do>
    **"Down, from 20 steps to 16 steps, over the last 14 days."** Checkable against
    the picture.
  </DoDont.Do>

<DoDont.Dont>
    **"Trending in the right direction."** Valence with no author, magnitude or
    window.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

Audited against WCAG 2.2 AA in a source pass and a rendered pass. The audit is
author-run, not an independent review, and clinical review is still pending.

**What the audit found.** Nothing to change. The rendered pass was clean, with no serious
axe, target-size or focus breach at 320px, and the source pass
confirmed every check: the two colour axes stay apart, and status is carried by the
caption [StatusPill](./status-pill.mdx), never by colour alone. The committed
`check:a11y` gate reruns the literal, bound, colour and axis rules.

**Residual and deferred.**

* No per-point data table twin. The text alternative is the `role="img"` name plus the
  visible caption. A full table is an enhancement, not an AA requirement.
* `className` merges onto the whole subtree, so an `sr-only` variant can hide the
  caption, the only text carrier. A documented API risk; keep it visible.
* Under forced colours the line drops its category tint to `CanvasText`. Category is
  identity only, so nothing else is lost, and this is intentional.

## Data attributes [#data-attributes]

## API reference [#api-reference]

`precision`, `series` and `minimumPoints` are required with no default, because none is a
number opsinjs could supply. `TrendPoint` and `ReferenceRange` come from `@/lib/opsinjs`,
so no second copy can drift.

## Related [#related]

* [RangeBar](./range-bar.mdx) shows where one value sits in a reference range, not how a series moved.
* [MetricTile](./metric-tile.mdx) can embed a sparkline. A sparkline is not a tile.
* [ScoreDial](./score-dial.mdx) is a state at one moment, not a shape over time.
* [EmptyState](./empty-state.mdx) owns the too-short refusal where the surface has no chart slot.

---

# Value

Source: https://opsinjs.pensievelabs.org/components/value
Markdown: https://opsinjs.pensievelabs.org/components/value.md
Section: Components · kind: component · status: shipped · also known as: number, unit, format, formatted number, format a number, numeric display, figure

<StubNotice
  name="value"
  status="shipped"
  questions="[
  "Whether a per-language spoken unit form belongs in tokens/units.json, in the product, or in neither, given that only an English reader hears words today.",
  "Whether a hero value should move from title1 up to largeTitle, an answer that changes every hero number in MetricTile, ResultCard, ScoreDial and RangeBar at once.",
  "Whether the muted absence at the display size clears contrast, and how the value behaves at 200% text, since neither has been looked at in either theme.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { Value } from "@/components/ui/value"
```

```tsx
<Value value={1000.2} unit="kg" precision={1} />
```

## When to use it [#when-to-use-it]

## Clinical meaning [#clinical-meaning]

**Asserts.** That this quantity has this magnitude in this unit, to this
precision. `1000.2` and `1000.20` claim different things.

**Never read as.** A judgement. Value carries no status and no band; a bare
number means nothing without the context its surface supplies.

**Colour axis.** Neither. A reading inherits the text colour of its context. An
absence at `display` takes the muted theme role.

**Thresholds.** None here, and none in `tokens/units.json`, which holds no
reference range, no plausibility bound and no default precision. Precision
belongs to the metric, so `precision` is required. See
[Numbers, units and precision](../health/numbers-units-precision.mdx) and
[Reference ranges](../health/reference-ranges.mdx).

**Masking.** [On-screen privacy](../health/on-screen-privacy.mdx) lists this
among the components that implement a fixed-width mask. Value has no `masked`
prop and reserves no width, so masking a reading today moves the layout.

<SafetyCallout severity="attention" evidence="opinion" title="The unit table says what a number is measured in. It never says what a number should be.">
  `mmol/L` to `mg/dL` is refused, because the factor is a property of the analyte
  rather than of either unit. `convertUnit` returns nothing rather than a
  substituted default. See [Unit systems](../health/unit-systems.mdx).
</SafetyCallout>

## Anatomy [#anatomy]

## Examples [#examples]

### Zero is a reading. Absence is not. [#zero-is-a-reading-absence-is-not]

Three rows share a unit and a precision and differ only in the reading: a
number, a `null`, and a number that arrived broken. Rule 13 keeps them apart.

### One precision makes a column comparable [#one-precision-makes-a-column-comparable]

Four readings of one metric at one `precision`, aligned by the layout and by
tabular figures.

### What a screen reader is actually given [#what-a-screen-reader-is-actually-given]

One magnitude with six units, and beside each the phrase that reaches speech,
which a screenshot cannot show.

## Content guidelines [#content-guidelines]

A caller's `absenceLabel` is rendered exactly as passed, with no check, so run
your own absence copy past the banned-word list. Write a unit symbol exactly as
`tokens/units.json` spells it, case included. A number with no unit by design
takes `null`, never an omitted prop.

<DoDont>
  <DoDont.Do>
    **"1000.2 kg"** for a device that measures to 100 g. One decimal place,
    spoken as *1000.2 kilograms*.
  </DoDont.Do>

<DoDont.Dont>
    **"1000.2481 kg"** because that is what the device sent. Four decimal places
    assert a precision the instrument lacks.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

**Audited against WCAG 2.2 AA** in a source pass and a rendered pass on
`/view/base/base-lyra/component/value`. The audit is author-run, not an
independent review, and clinical review is still pending.

It changed nothing in source. The unit symbol is `aria-hidden` only when a
spoken form exists and the words follow it, so an English reader hears *1000.2
kilograms* as one phrase. Absence is spoken in words, never drawn at hero
weight, and carries no decorative glyph. The component imposes no truncation, no
fixed height and no `whitespace-nowrap`. The rendered pass returned empty axe,
target-size, focus-visible and 320px reflow results.

Three items sit outside this source. A Value must never be the sole accessible
name of a tappable control, because the visible symbol and the spoken words
share no substring, so the control owes its own name carrying the symbol (WCAG
2.2 SC 2.5.3). The only path to a clipped reading is a caller passing a
truncating class through `className`, which `twMerge` lets win, so truncation is
a caller responsibility documented on `ValueProps.className`. The spoken span
uses `select-none` to keep the words off the clipboard while leaving them in the
accessibility tree, untested by a copy test.

## Data attributes [#data-attributes]

## API reference [#api-reference]

`precision` is required and nothing is defaulted in its place. `unit={null}`
declares a dimensionless number. Omitting `unit` raises OPSIN-0003 instead.
Under server rendering, pass `locale` explicitly, or the server's own ICU
default formats the first paint and hydration reformats it.

## Related [#related]

* [RelativeTime](./relative-time.mdx) does the same job for points in time, and shares the absence contract.
* [ReadingInput](./reading-input.mdx) is the entry counterpart, so the two must agree on precision and units.
* [MetricTile](./metric-tile.mdx) is a Value with a label, a time and a surface of its own.
* [RangeBar](./range-bar.mdx) is a Value with its reference range drawn around it.
* [Callout](./callout.mdx) owns the framing a bare risk proportion needs before it can be shown.

---

# VisuallyHidden

Source: https://opsinjs.pensievelabs.org/components/visually-hidden
Markdown: https://opsinjs.pensievelabs.org/components/visually-hidden.md
Section: Components · kind: component · status: shipped · also known as: sr only, screen reader only, clip

<StubNotice
  name="visually-hidden"
  status="shipped"
  questions="[
  "Nobody has listened to this component in VoiceOver, NVDA, JAWS or TalkBack, so announcement everywhere is argued from the clip pattern rather than measured.",
  "Whether the component should refuse or warn when a focusable control sits inside it is unsettled, so an always-hidden keyboard trap is not prevented.",
  "The contrast report is empty because nothing is painted, so a reviewer must read it as nothing to measure rather than a gap left unfilled.",
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

## Installation [#installation]

## Usage [#usage]

```tsx
import { VisuallyHidden } from "@/components/ui/visually-hidden"
```

```tsx
<button type="button">
  <XIcon aria-hidden="true" />
  <VisuallyHidden>Close the panel</VisuallyHidden>
</button>
```

## When to use it [#when-to-use-it]

## Examples [#examples]

### A name for an icon-only button [#a-name-for-an-icon-only-button]

The button shows only a cross, so a screen-reader user meets a control with no
name. The words inside VisuallyHidden become its accessible name, and the icon
is `aria-hidden`.

### Context for a repeated link [#context-for-a-repeated-link]

Three rows end in the same two words, which a screen reader can list with no
sentence around them. Appending the subject inside VisuallyHidden names each
link without changing a pixel.

## Content guidelines [#content-guidelines]

Write the hidden words a sighted reader already has, no more. For an icon-only
control, name the action in full. Keep the leading space when you splice hidden
words into visible text, because a screen reader concatenates them. Never hide a
caveat, a source or a clinical status, because everyone needs those.

<DoDont>
  <DoDont.Do>
    **"Close the reminders panel"** names the action a sighted reader takes from the cross.
  </DoDont.Do>

<DoDont.Dont>
    **An empty VisuallyHidden** names nothing, and the markup now looks labelled when it is not.
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

**Checked by `pnpm run check:a11y` on every commit.** The component sets no
colour and no type size, so the gate's token and unit rules pass trivially.

**Audited against WCAG 2.2 AA in a source pass and a rendered pass.** The
audit is author run, not an independent review, and clinical review is still
pending. The source pass covered the clip technique, the accessibility tree
and the two shipped examples; the rendered pass ran axe against the live
preview and checked target size, focus visibility and reflow at 320px, and
found nothing to flag.

* Content is announced because the span is clipped, not `display:none`,
  `visibility:hidden` or the `hidden` attribute, each of which removes content
  from the tree. The clip pattern was checked against the WebAIM sr-only
  reference and stays hidden through 200% text and increased text spacing,
  because neither touches the clip's own overflow and clip-path.
* It is text rather than a control, so it is never focusable and never a tab
  stop.
* The audit fixed one gap the component's own open question named: nothing
  previously warned when a focusable control was placed inside the always
  hidden clip, a keyboard trap with no visible focus ring. The component now
  walks its children in development and warns when it finds a focusable
  descendant, the same pattern it already used for empty children. The
  warning is development only, so it changes no markup, class or visual
  output.
* The component paints nothing, so no colour or type size applies and there is
  nothing to reflow at 200% text.

**Not checked by any gate.** Whether a screen reader announces the content
across VoiceOver, NVDA, JAWS and TalkBack. Whether hidden text duplicates a
visible name beside it is a per-usage question the component cannot see from
its own source, so it stays a concern for the caller rather than something
this audit could check.

## API reference [#api-reference]

`children` is required, because a VisuallyHidden with nothing to announce is a
silent no-op. Empty children, an empty string, `undefined` or `false` raise a
development warning naming the mistake. The span still renders, because a
presentation layer reports rather than throws. `className` reaches the span for
positioning, and a class that makes the content visible defeats the component.

## Related [#related]

* [Link](./link.mdx) is the anchor a skip link is built from, and a skip link becomes visible on focus.
* [Field](./field.mdx) names a visible input and wires its label, its hint and its error together.
* [Term](./term.mdx) renders a definition every reader can see, not one for assistive technology alone.

---

# Anatomy of a component page

Source: https://opsinjs.pensievelabs.org/components/anatomy-of-a-component-page
Markdown: https://opsinjs.pensievelabs.org/components/anatomy-of-a-component-page.md
Section: Components · kind: handbook · also known as: page contract, page template, lean component page, documentation structure

## The short version [#the-short-version]

A shipped page is fourteen sections in a fixed order: eight required, five optional, one
gated on category. `<PageTemplate kind="component" />` and `assert-ia` both **fail the
build** on a missing required section, an unknown one, or one out of order.

Rule LEAN001 fails the build when the body passes 1,000 words, or 1,250 on a `health-*`
page. The lean page keeps every contract and drops every argument, and
[ADR 0024](../project/decisions/0024-the-component-page-is-lean.mdx) records what was cut.

Start from `content/_templates/component.mdx` or [Button](./button.mdx). Never start from
a blank file, and never from a health component's page for a component that is not one,
because that copies a clinical contract onto something it does not govern.

## How it works [#how-it-works]

### What opens the page [#what-opens-the-page]

There is no `## Status` heading. `<StubNotice status="shipped">` sits above `## Preview`,
first after the definition, and carries at most three open safety questions, one sentence
each. SAFE001 requires its sentences in authored MDX, never a generated string: audited
against WCAG 2.2 AA by the authors and not independently reviewed, clinical review still
pending, and not for a production health surface until a clinician signs it. See
[ADR 0025](../project/decisions/0025-the-audit-is-author-run.mdx) for the record.
C6001 fails the build when the notice is missing or sits below a heading. The H1 and the
definition come from `title` and `description`, never from MDX.

### The fourteen sections [#the-fourteen-sections]

`SHIPPED_SECTIONS` in `lib/status.ts` fixes the numbering, which is the order a page must
present. Five are optional: Anatomy, States, Content guidelines, Data attributes and CSS
variables. Each earns its place by the test in its row and keeps this position when it
appears. Omitting one is not a defect; inventing content to fill it is.

| #  | Section            | Written or generated | Required               | What it is for                                                                                                                                                                                                   |
| -- | ------------------ | -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1  | Preview            | generated            | always                 | `<ComponentPreview>` and nothing else                                                                                                                                                                            |
| 2  | Installation       | generated            | always                 | `<ComponentInstall>` alone. Its manual tab hosts `<ComponentSource>`, the only place source appears                                                                                                              |
| 3  | Usage              | written              | always                 | The import line and the minimal JSX. Two code blocks, zero prose                                                                                                                                                 |
| 4  | When to use it     | written              | always                 | `<WhenToUse>` alone: at most four cases for, five against, one line each. Every *against* names the component to use instead                                                                                     |
| 5  | Clinical meaning   | written              | health categories only | What it asserts, what it must never be read as, which colour axis reaches which element, who owns the thresholds, one or two sentences each. Required when `category` starts with `health-`, forbidden otherwise |
| 6  | Anatomy            | written              | optional               | `<Anatomy>` where the component has two or more parts, one line each. `<CompositionTree>` only where the tree nests below the root's children                                                                    |
| 7  | Examples           | written + generated  | always                 | One H3 per example: a sentence or two on what it shows and which prop drives it, then the preview                                                                                                                |
| 8  | States             | written              | optional               | The five data states as a table, on a component that displays a reading. Left out where most rows would say not applicable                                                                                       |
| 9  | Content guidelines | written              | optional               | One `<DoDont>` pair, on a component that renders copy the product writes                                                                                                                                         |
| 10 | Accessibility      | written + generated  | always                 | What a gate checks, what is argued from the source, what nothing checks, labelled apart. Then the keyboard table and the contrast report. Never delegated upstream                                               |
| 11 | Data attributes    | written              | optional               | The styling contract, where the component stamps more than `data-slot`                                                                                                                                           |
| 12 | CSS variables      | generated            | optional               | Where the component declares a custom property of its own                                                                                                                                                        |
| 13 | API reference      | generated            | always                 | `<PropsTable>` from a named exported interface, plus a few sentences at most for a default or refusal the table cannot carry                                                                                     |
| 14 | Related            | written              | always                 | Two to five one-line bullets naming what the component is confused with, each pointing at the alternative                                                                                                        |

A `planned` page is eight sections: Preview, Installation, When to use it, Clinical
meaning (health categories only), Anatomy (optional), Proposed API, Accessibility and
Related. `## Proposed API` replaces `## API reference`, written as a specification and
marked do-not-generate-against, and the two never both appear.

<Todo>
  The page header is specified to carry more than it renders. The status badge, the
  category, the base and style switcher and Copy Page are all specified in this
  handbook's history and are rendered by nothing: `PageActions` exists in
  `components/mdx.tsx` and has zero invocations in the corpus, and `PageTemplate`
  emits a machine-readable contract script and its children and nothing visible. A
  footer carrying a changelog link, an edit link and `<Feedback />` is likewise
  specified and absent from every component page. Either build the header and the
  footer, or delete the components that promise them.
</Todo>

### Why the order [#why-the-order]

Installation is section 2 so a developer who came for the install command finds it at
once, with only the notice above it. **When to use it** is section 4 because the
expensive mistake is reaching for [AlertBanner](./alert-banner.mdx) when the situation
calls for [Callout](./callout.mdx), so every entry on the *against* side names an
alternative.

### What is generated [#what-is-generated]

Prop tables, CSS-variable tables, contrast reports and example source come from
`scripts/*.mts`. A page carries **names**, not code and not measured numbers, and CI fails
on a regeneration diff.

## Do this [#do-this]

* **Fill in the template**, or copy [Button](./button.mdx) and replace every fact.
* **Write the definition for the patient, not the engineer.** That one-sentence
  `description` ends up in search results, in `llms.txt` and under the H1.
* **Name an alternative in every prohibition.** An `avoid` entry takes an `instead`, and
  the value is a checked catalogue id.
* **Declare `governedBy` on every `health-*` component**, and have the doctrine page list
  it back. `assert-ia` checks both directions.
* **Take aliases from the catalogue.** `registry/catalogue.ts` owns the alias namespace.
* **Say what the component refuses, in one line.** What it renders when the range is
  unknown, what it will not derive, what it must never be read as.
* **Link doctrine rather than restating it.** One sentence and a link to
  [Two colour axes](../health/two-colour-axes.mdx) beats a paraphrase that drifts.
* **Write a Related bullet as a sentence**, subject first, verb from the closed table in
  [Documentation templates](../handbook/contributing/documentation-templates.mdx):
  `- [Link](./link.mdx) is for navigation.`

## Not this [#not-this]

* **Do not write an essay under a heading.** A section is a component call or a short
  paragraph. Doctrine goes on the page that owns it, reasoning in the commit message.
* **Do not leave a heading empty**, and do not write *TODO: fill this in*. Omit the
  section, or use `<Todo>` when the gap is real and must be tracked.
* **Do not paste code into MDX.** `<ComponentSource>` and `<ComponentInstall>` resolve a
  name against the registry and render the real thing.
* **Do not state a measured number you did not generate.** No contrast ratios, no
  invented percentages. `<NoDataYet>` is the honest rendering of a table with no source.
* **Do not invent a citation.** Not a study, not a statistic, not a DOI, not a date. See
  [Evidence and references](../health/evidence-and-references.mdx).
* **Do not add a section this contract does not have.** A page that genuinely needs one
  changes `lib/status.ts` and the template together.
* **Do not give a non-health component a clinical meaning.** [Card](./card.mdx) is a box,
  and a verdict hidden inside a box escapes review.
* **Do not grow the notice.** Three open questions, one sentence each. The rest stay in git
  history, still open.

## Gotchas [#gotchas]

**Links are relative.** Write `[Two colour axes](../health/two-colour-axes.mdx)`. fumadocs
resolves it through `createRelativeLink`. An absolute site link is banned with no
exception.

**The MDX vocabulary is closed.** Only the tags in this contract exist. Content authors
never define one; an unknown JSX tag fails the build.

**Component ids are kebab-case in every path, frontmatter field and prop; PascalCase only
in prose.** `range-bar` in `usedIn`, `RangeBar` in a sentence.

**British spelling in prose, American in code.** `colour` and `behaviour` in what a reader
reads; `color`, `ColorScale` and `--color-*` in code.

**`aliases` are globally unique**, not unique per page. If two pages claim `gauge`, the
build fails on the second page rather than the wrong one.

**The word budget counts everything in the body.** JSX props, keyboard rows and code
blocks count too. A page over budget has a section arguing rather than stating.

**A `planned` page is a specification, not a placeholder.** If you cannot say what the
component asserts, what it refuses, how it composes and what it must never be read as, it
is not ready for a page.

## Related [#related]

* [Components overview](./index.mdx) has the full roster.
* [Button](./button.mdx) is the exemplar every page follows.
* [RangeBar](./range-bar.mdx) has the fullest clinical contract, and the best section 5.
* [ADR 0024](../project/decisions/0024-the-component-page-is-lean.mdx) explains what was
  cut and why.
* [Documentation templates](../handbook/contributing/documentation-templates.mdx) covers
  every page skeleton.
* [Component checklist](../handbook/contributing/component-checklist.mdx) is the definition
  of done.
* [Proposing a component](../handbook/contributing/proposing-a-component.mdx) shows how a
  new id reaches the catalogue.
* [Release phases](../project/release-phases.mdx) says what `planned`, `shipped` and
  `deprecated` each promise.

---

# Screens

Source: https://opsinjs.pensievelabs.org/screens
Markdown: https://opsinjs.pensievelabs.org/screens.md
Section: Screens · kind: guide

## Overview [#overview]

A component page tells you whether one part is right. A screen page tells you
whether the assembly is. Those are different questions, and the second one is the
one that ships: every component on a screen can pass its own accessibility check
while the screen as a whole announces its parts in the wrong order, spends its
alarm budget on the wrong thing, or puts the number a person came for below three
things they did not.

Screens are also the only place where the three systems that make opsinjs
distinctive have to hold **simultaneously**:

* **The two colour axes.** On one component the never-mix rule is easy. On a
  screen with six coloured elements from two axes, it is a discipline. See
  [The two colour axes](../health/two-colour-axes.mdx).
* **The material ladder.** A rung is a relative claim. Six surfaces stacked on one
  screen is where the ladder either reads as depth or reads as fog.
  [Materials](../foundations/materials/index.mdx) is where the ladder lives.
* **Motion.** Sequencing, continuity and what all of it degrades to under
  `prefers-reduced-motion`.
  [Choreography](../foundations/motion/choreography.mdx) covers all three.

There are six specimens. Five are chosen to cover the four things a consumer
health product does: show a result, capture a reading, show change, ask
permission. The fifth of those is the first run, which decides whether any of the
rest happens. The sixth is a different kind of artefact: a whole application
rather than a screen, so that the assembly question can be asked at the scale a
product is actually built at.

<Callout title="Two built specimens, four specifications">
  Two of the six are now built. The results screen renders its real composition in
  the preview frame, assembled from parts that already ship, so the three screen-level
  checks below have something rendered to run against. The medicines app goes further
  and renders a whole application out of thirty-five of them, with four destinations,
  five overlays and a working form. The other four are still specifications: each
  carries the composition it is intended to have, the ways it could mislead, and the
  accessibility contract it must meet, so that it can be reviewed and argued with now,
  and its preview frame falls back to the not-implemented notice until the registry
  has something to put in it.
</Callout>

## What a screen page contains [#what-a-screen-page-contains]

The same six sections, in the same order.

| Section               | What it is for                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| What this screen does | The reader's situation on arrival, what they are trying to find out, and an explicit statement of what the screen deliberately does not do. |
| Composition           | The part hierarchy, and the material rung each surface sits on.                                                                             |
| Preview               | The screen rendered in isolation under the product theme, at device widths.                                                                 |
| Safety notes          | Where this specific screen could mislead, and what it does instead of guessing.                                                             |
| Accessibility         | Heading structure, landmarks, focus on entry, reading order against visual order.                                                           |
| Status                | What is decided, what is open, and the questions the implementation has to answer.                                                          |

Two conventions worth knowing:

**Previews render under the product theme, not the docs chrome.** A screen is
embedded from an isolated `(view)` route with its own document and its own token
scope, so what you see is the opsinjs product surface rather than this site's
deliberately dense square chrome. That surface has squircle corners, system-ui
and generous spacing. The reasoning is in
[Lyra and the docs chrome](../theming/lyra-and-the-docs-chrome.mdx).

**Material rungs are referred to by position, never by name.** The rungs are named
once, in [The ladder](../foundations/materials/the-ladder.mdx). These pages say
"one rung above the page" so that they cannot drift from that page as the names
settle.

## The screens [#the-screens]

* **[Results screen](./results-screen.mdx)** covers one result, what it means,
  and what happens next. The highest-stakes screen in the set, and the one where
  the reading order matters most.
* **[Daily log screen](./daily-log-screen.mdx)** is the surface somebody returns
  to every day, judged on how little it costs rather than how much it shows.
* **[Trends screen](./trends-screen.mdx)** covers change over time across
  several metrics, with the axis rules and the data-table twins.
* **[Consent flow](./consent-flow.mdx)** is a sequence rather than a screen, and
  the one place where the design's honesty is directly testable.
* **[Onboarding screen](./onboarding-screen.mdx)** is the first run. The minimum
  is collected before something useful is visible.
* **[Diabetes medicines app](./diabetes-medicines-app.mdx)** is the whole
  application: four destinations, thirty-five components, and a set of refusals
  that keep a medicines record on the safe side of the line between a diary and a
  regulated device.

## Recipes and patterns first [#recipes-and-patterns-first]

If you are building rather than reviewing, a screen page is usually the wrong
place to start. It is a specimen of the finished thing, not a build order.

* **[Recipes](../recipes/index.mdx)** build one piece of a screen, with the steps.
* **[Patterns](../patterns/index.mdx)** describe the flow a screen sits in.
* Screens show the assembly, and are what you check your assembly against.

## Verify it worked [#verify-it-worked]

Hold your screen against these three, in this order. They are the checks that a
per-component review passes and a screen fails.

1. **Read the screen from top to bottom with the styling off.** The order you get
   is the order a screen-reader user gets. If the number the person came for is
   fourth, the screen is wrong however it looks.
2. **Count the coloured elements and name the axis of each.** Category colours
   identify; status colours grade. If any one element is doing both, or if you
   cannot say which it is doing, fix it before anything else.
3. **Count the surfaces at *attention* and *urgent*.** The budget is one urgent
   surface per screen. See [Alarm fatigue](../health/alarm-fatigue.mdx). Two means
   one of them is going to be ignored, and you do not get to choose which.

## Troubleshooting [#troubleshooting]

**"The preview is empty."** Expected on the four screens that are still
specifications. Their frame renders the not-implemented notice, naming the screen
and its status, and the composition and the contract on the page are the reviewable
artefact for now. The results screen and the medicines app are the exceptions:
both frames render the real assembly.

**"My screen has parts no specimen covers."** Likely. These six are specimens,
not a catalogue. Compose from [Recipes](../recipes/index.mdx) and check the result
against the three questions above.

**"The screen I need is not here."**

<Todo>
  There is still no multi-metric **dashboard** specimen. The medicines app is a
  today surface for one domain and it carries neither colour axis, so it answers
  the composition half of the question and not the hard half: a home screen showing
  readings from several categories, where the alarm budget and the two axes have to
  hold at once. That remains the largest gap in this set.
</Todo>

<Todo>
  There is no **result disclosure** specimen: the moment between a notification and
  an out-of-range result. The flow is described in
  [Result disclosure](../patterns/result-disclosure.mdx) but no screen shows it.
</Todo>

**"Two screens disagree about a rule."** The doctrine page wins. Screens are
downstream of [Health](../health/index.mdx) and
[Foundations](../foundations/index.mdx), and a screen that contradicts either is
the thing that is wrong.

## Next [#next]

* **[Results screen](./results-screen.mdx)** is where to start. It is the
  specimen with the most decided.
* **[Safety review checklist](../health/safety-review-checklist.mdx)** is the
  pre-ship pass for any screen showing a health value.
* **[Layout](../foundations/layout.mdx)** covers page shells, safe areas and the
  two canonical health screen layouts these specimens are built on.

---

# Consent flow

Source: https://opsinjs.pensievelabs.org/screens/consent-flow
Markdown: https://opsinjs.pensievelabs.org/screens/consent-flow.md
Section: Screens · kind: screen · evidence: opinion

> NOT IMPLEMENTED. "Consent flow" is a specification and has not been implemented.
> Do not generate code against the API sketched below, and do not tell a
> reader that it exists. The definitive machine answer is at https://opsinjs.pensievelabs.org/r/index.json.

## What this screen does [#what-this-screen-does]

This is the only specimen in the set that is a sequence rather than a single
surface, because consent cannot honestly be asked on one screen: there is the ask,
there is the operating system's own permission prompt, and there is what the
product does with the answer. That answer includes *no*.

The flow asks for **one scope**, at the moment that scope becomes useful, in words
the reader can act on. It ends in one of three states: granted, declined, or
partially granted, which here means yes to some of the sheets and no to others,
and all three are ordinary outcomes that the product continues from.

It is also the screen where a design's honesty is most directly testable. Almost
every dark pattern in health software lives here: the pre-ticked box, the grey
decline link beside a filled Allow button, the wall of text with a single
inviting control at the bottom. Each of them is visible in a screenshot.

**What this screen deliberately does not do.** It does not ask at first launch,
before the person knows what they would be agreeing to. It does not bundle scopes
into one accept-everything decision. It does not imitate the operating system's own
prompt. It does not treat dismissal as agreement. And it does not make refusal a
dead end.

<SafetyCallout severity="attention" evidence="opinion">
  This specimen describes an interface. It does not establish a lawful basis for
  processing and it is not legal advice; what you must ask, record and retain is a
  question for your data protection lead. See
  [Safety, scope and limitations](../start/safety-scope-and-limitations.mdx).
</SafetyCallout>

## Composition [#composition]

Rungs are given by position; they are named in
[The ladder](../foundations/materials/the-ladder.mdx).

```text
ConsentFlow                            three states, one scope per sheet
├── 1. Ask                             one ConsentSheet per scope, shown when
│   │                                  that scope becomes useful, one rung above
│   │                                  the surface that triggered it
│   ├── Purpose                        the benefit, concretely, before the ask
│   ├── HandlingNote                   who else sees it · how long · how to delete
│   ├── DisclaimerNote                 what this consent does not cover
│   └── Answers                        two buttons, equal weight, equal size
│       ├── AllowAction
│       └── DeclineAction              "Not now", never a grey text link
├── 1b. Ask again                      the next scope, only if the reader reaches
│                                      the moment it serves; never bundled with
│                                      the first into one accept-everything sheet
├── 2. PlatformPrompt                  the operating system's own dialog. It is
│                                      triggered only after Allow, never styled
│                                      to look like ours, never pre-empted
└── 3. Outcome                         page ground
    ├── Granted                        continue to the thing they wanted
    ├── PartiallyGranted               say which asks were agreed to and which
    │                                  were not
    └── Declined                       EmptyState: what still works, and the way
                                       back. It is never a wall
```

**One scope is one sheet.** [ConsentSheet](../components/consent-sheet.mdx) has no
`purposes` array and no per-item switch, and that is deliberate: it asks one
question so the answer means one thing. Three permissions are three sheets, each
asked when it becomes useful and each recording its own grant against its own
wording. A sheet that gathered several scopes behind individual switches would be
a product invention with no doctrine behind it, and it would need a control the
roster does not carry. [Consent and disclosure](../health/consent-and-disclosure.mdx)
holds the reasoning. The shipped specimen of the sequence is
`registry/examples/consent-sheet-two-questions-two-sheets.tsx`, where the reader
grants the first scope and refuses the second.

Three composition rules this screen demonstrates:

**The two answers are one component used twice.** Same size, same contrast, same
target. That is the whole anti-dark-pattern mechanism, and it is checkable from a
screenshot in greyscale.

**The explanation precedes the controls in the source order**, not merely above
them visually. A screen-reader user must meet what they are allowing before they
meet Allow.

**Declining leads somewhere.** The declined outcome is a designed surface with a
next step, not a modal that refuses to close. A product that punishes refusal has
not asked a question.

## Preview [#preview]

## Safety notes [#safety-notes]

* **Nothing is collected before the answer.** Not one reading "to prepare the
  view".
* **The scope described is the scope collected.** If the implementation reads more
  than the sentence says, the sentence is untrue whatever was intended.
* **Everything starts off.** A pre-ticked control is not a decision, and in most
  regimes it is not a consent either.
* **Dismissal is not consent.** Swiping the sheet away, backgrounding the app or
  pressing <Kbd>Escape</Kbd> all mean *no answer given*, and the flow may be
  re-entered without penalty.
* **The grant is recorded against the wording version**, so that the question "what
  exactly did this person agree to" has an answer later.
* **Re-ask on a change of scope or wording, never on a timer.** A periodic re-ask
  trains people to tap through, which destroys the meaning of the answer.
* **Revocation lives in one predictable place** for every scope, takes effect
  immediately, and says what happens to data already collected. See
  [Consent and disclosure](../health/consent-and-disclosure.mdx).
* **Consent to a feature is not consent to research, marketing, or sharing with an
  employer or insurer.** Each is a separate ask, in its own words.
* **Consent given by a carer, or for a child, is a different flow** with different
  obligations. If the product does not support it, say so rather than letting the
  adult flow be used on somebody else's behalf.
* **No clinical status colour appears anywhere in this flow.** Consent is not a
  clinical state. [The two colour axes](../health/two-colour-axes.mdx) explains
  the separation.

## Accessibility [#accessibility]

**Landmarks and headings.** Each step has one H1 stating what is being asked.
Each scope is asked on its own sheet rather than as an item in a list, and its
description is programmatically associated with the answers it governs.

**Reading order is the contract.** Purpose, scope, handling, boundary, then the two
answers. This screen fails more often on order than on anything else: an Allow
button that appears early in the DOM for visual reasons puts the answer before the
question for anyone not reading visually.

**Focus.** Focus enters the sheet on open and lands on the heading, not on Allow.
Focus is trapped while the sheet is modal, <Kbd>Escape</Kbd> dismisses it, and
focus returns to the control that opened it.
[Keyboard and focus](../accessibility/keyboard-and-focus.mdx) specifies that
behaviour.

**Equal weight is verifiable.** Render the sheet in greyscale: if one answer still
dominates, the dominance was built from colour and the screen is a funnel.
[Colour independence](../accessibility/colour-independence.mdx) is the rule it
breaks.

**Targets.** Both answers clear 44pt with real separation between them, so that the
wrong one is not tapped by accident. See
[Target size and motor accessibility](../accessibility/target-size-and-motor.mdx).

**Text at 200%.** Both answers remain visible together. A reflow that puts Allow on
screen and Decline below the fold creates a dark pattern out of a layout bug, so
this is a test case rather than a nicety.
[Text resizing and zoom](../accessibility/text-resizing-and-zoom.mdx) has the
reflow case.

**Reading level.** Consent copy fails more readers than any other copy in a health
product. Check it against the target in
[Health literacy](../content/health-literacy.mdx), and expand clinical words
inline with [Term](../components/term.mdx) rather than in a footnote.

**No timers.** Nothing in the flow expires, auto-advances or auto-dismisses. A
sheet that closes itself has taken the decision.
[Cognitive accessibility](../accessibility/cognitive-accessibility.mdx) is where
that rule lives.

## Status [#status]

---

## Truncated

308 of 402 pages were omitted to keep this file inside its size budget.
Read the shard that covers the section you need instead:
- [Components and screens](https://opsinjs.pensievelabs.org/llms-components.txt)
- [Health, accessibility and content doctrine](https://opsinjs.pensievelabs.org/llms-health.txt)
- [Foundations and theming](https://opsinjs.pensievelabs.org/llms-foundations.txt)
- [Generated reference](https://opsinjs.pensievelabs.org/llms-reference.txt)
- [The index of every page, with a URL each](https://opsinjs.pensievelabs.org/llms.txt)

Nothing here has been hidden. Every page this file dropped is listed
below and can be fetched on its own:

- [Daily log screen](https://opsinjs.pensievelabs.org/screens/daily-log-screen.md) (screen)
- [Diabetes medicines app](https://opsinjs.pensievelabs.org/screens/diabetes-medicines-app.md) (screen)
- [Onboarding screen](https://opsinjs.pensievelabs.org/screens/onboarding-screen.md) (screen)
- [Results screen](https://opsinjs.pensievelabs.org/screens/results-screen.md) (screen)
- [Trends screen](https://opsinjs.pensievelabs.org/screens/trends-screen.md) (screen)
- [Overview](https://opsinjs.pensievelabs.org/health.md) (health)
- [Alarm fatigue](https://opsinjs.pensievelabs.org/health/alarm-fatigue.md) (health)
- [Category identity](https://opsinjs.pensievelabs.org/health/category-identity.md) (health)
- [Clinical interaction guidelines](https://opsinjs.pensievelabs.org/health/clinical-interaction-guidelines.md) (health)
- [Clinical status semantics](https://opsinjs.pensievelabs.org/health/clinical-status-semantics.md) (health)
- [Consent and disclosure](https://opsinjs.pensievelabs.org/health/consent-and-disclosure.md) (health)
- [Crisis and self-harm](https://opsinjs.pensievelabs.org/health/crisis-and-self-harm.md) (health)
- [Data provenance and device accuracy](https://opsinjs.pensievelabs.org/health/data-provenance-and-device-accuracy.md) (health)
- [Delivering difficult results](https://opsinjs.pensievelabs.org/health/delivering-difficult-results.md) (health)
- [Emergency and escalation](https://opsinjs.pensievelabs.org/health/emergency-and-escalation.md) (health)
- [Evidence and references](https://opsinjs.pensievelabs.org/health/evidence-and-references.md) (health)
- [Motion in health UI](https://opsinjs.pensievelabs.org/health/motion-in-health-ui.md) (health)
- [Notifications and off-screen alerts](https://opsinjs.pensievelabs.org/health/notifications-and-off-screen-alerts.md) (health)
- [Numbers, units and precision](https://opsinjs.pensievelabs.org/health/numbers-units-precision.md) (health)
- [On-screen privacy](https://opsinjs.pensievelabs.org/health/on-screen-privacy.md) (health)
- [Reference ranges](https://opsinjs.pensievelabs.org/health/reference-ranges.md) (health)
- [Regulatory context](https://opsinjs.pensievelabs.org/health/regulatory-context.md) (health)
- [Risk and statistics](https://opsinjs.pensievelabs.org/health/risk-and-statistics.md) (health)
- [Safety review checklist](https://opsinjs.pensievelabs.org/health/safety-review-checklist.md) (health)
- [Trends and change](https://opsinjs.pensievelabs.org/health/trends-and-change.md) (health)
- [The two colour axes](https://opsinjs.pensievelabs.org/health/two-colour-axes.md) (health)
- [Uncertainty, staleness and missing data](https://opsinjs.pensievelabs.org/health/uncertainty-and-staleness.md) (health)
- [Unit systems](https://opsinjs.pensievelabs.org/health/unit-systems.md) (health)
- [Who this is for](https://opsinjs.pensievelabs.org/health/who-this-is-for.md) (health)
- [Foundations](https://opsinjs.pensievelabs.org/foundations.md) (foundation)
- [Colour](https://opsinjs.pensievelabs.org/foundations/colour.md) (foundation)
- [Colour blindness](https://opsinjs.pensievelabs.org/foundations/colour/colour-blindness.md) (foundation)
- [Colour roles](https://opsinjs.pensievelabs.org/foundations/colour/colour-roles.md) (foundation)
- [Contrast and APCA](https://opsinjs.pensievelabs.org/foundations/colour/contrast-and-apca.md) (foundation)
- [Dark mode](https://opsinjs.pensievelabs.org/foundations/colour/dark-mode.md) (foundation)
- [Deriving a theme from your brand](https://opsinjs.pensievelabs.org/foundations/colour/deriving-a-theme.md) (foundation)
- [Gamut and Display-P3](https://opsinjs.pensievelabs.org/foundations/colour/gamut-and-p3.md) (foundation)
- [How the engine works](https://opsinjs.pensievelabs.org/foundations/colour/how-the-engine-works.md) (foundation)
- [Colour tokens](https://opsinjs.pensievelabs.org/foundations/colour/tokens.md) (foundation)
- [Data states](https://opsinjs.pensievelabs.org/foundations/data-states.md) (foundation)
- [Data visualisation](https://opsinjs.pensievelabs.org/foundations/data-visualisation.md) (foundation)
- [Accessible charts](https://opsinjs.pensievelabs.org/foundations/data-visualisation/accessible-charts.md) (foundation)
- [Chart anatomy](https://opsinjs.pensievelabs.org/foundations/data-visualisation/chart-anatomy.md) (foundation)
- [Chart colour](https://opsinjs.pensievelabs.org/foundations/data-visualisation/chart-colour.md) (foundation)
- [Iconography](https://opsinjs.pensievelabs.org/foundations/iconography.md) (foundation)
- [Health glyphs](https://opsinjs.pensievelabs.org/foundations/iconography/health-glyphs.md) (foundation)
- [Icon inventory](https://opsinjs.pensievelabs.org/foundations/iconography/icon-inventory.md) (foundation)
- [Sizing and alignment](https://opsinjs.pensievelabs.org/foundations/iconography/sizing-and-alignment.md) (foundation)
- [Imagery](https://opsinjs.pensievelabs.org/foundations/imagery.md) (foundation)
- [Avatars and identity](https://opsinjs.pensievelabs.org/foundations/imagery/avatars-and-identity.md) (foundation)
- [Body diagrams](https://opsinjs.pensievelabs.org/foundations/imagery/body-diagrams.md) (foundation)
- [Illustration style](https://opsinjs.pensievelabs.org/foundations/imagery/illustration-style.md) (foundation)
- [Photography](https://opsinjs.pensievelabs.org/foundations/imagery/photography.md) (foundation)
- [Skin-tone representation](https://opsinjs.pensievelabs.org/foundations/imagery/skin-tone-representation.md) (foundation)
- [Interaction states](https://opsinjs.pensievelabs.org/foundations/interaction-states.md) (foundation)
- [Layering and elevation](https://opsinjs.pensievelabs.org/foundations/layering-and-elevation.md) (foundation)
- [Layout](https://opsinjs.pensievelabs.org/foundations/layout.md) (foundation)
- [Materials](https://opsinjs.pensievelabs.org/foundations/materials.md) (foundation)
- [Choosing a layer](https://opsinjs.pensievelabs.org/foundations/materials/choosing-a-layer.md) (foundation)
- [Performance budget](https://opsinjs.pensievelabs.org/foundations/materials/performance-budget.md) (foundation)
- [Reduced transparency](https://opsinjs.pensievelabs.org/foundations/materials/reduced-transparency.md) (foundation)
- [The contrast floor](https://opsinjs.pensievelabs.org/foundations/materials/the-contrast-floor.md) (foundation)
- [The ladder](https://opsinjs.pensievelabs.org/foundations/materials/the-ladder.md) (foundation)
- [Material tokens](https://opsinjs.pensievelabs.org/foundations/materials/tokens.md) (foundation)
- [Motion](https://opsinjs.pensievelabs.org/foundations/motion.md) (foundation)
- [Choreography](https://opsinjs.pensievelabs.org/foundations/motion/choreography.md) (foundation)
- [Reduced motion](https://opsinjs.pensievelabs.org/foundations/motion/reduced-motion.md) (foundation)
- [Springs as tokens](https://opsinjs.pensievelabs.org/foundations/motion/springs-as-tokens.md) (foundation)
- [Motion tokens](https://opsinjs.pensievelabs.org/foundations/motion/tokens.md) (foundation)
- [Using motion](https://opsinjs.pensievelabs.org/foundations/motion/using-motion.md) (foundation)
- [Principles](https://opsinjs.pensievelabs.org/foundations/principles.md) (foundation)
- [Shape](https://opsinjs.pensievelabs.org/foundations/shape.md) (foundation)
- [Radius scale](https://opsinjs.pensievelabs.org/foundations/shape/radius-scale.md) (foundation)
- [Squircle](https://opsinjs.pensievelabs.org/foundations/shape/squircle.md) (foundation)
- [Shape tokens](https://opsinjs.pensievelabs.org/foundations/shape/tokens.md) (foundation)
- [Sound and haptics](https://opsinjs.pensievelabs.org/foundations/sound-and-haptics.md) (foundation)
- [Space and density](https://opsinjs.pensievelabs.org/foundations/space.md) (foundation)
- [Density and touch](https://opsinjs.pensievelabs.org/foundations/space/density-and-touch.md) (foundation)
- [Responsive modes](https://opsinjs.pensievelabs.org/foundations/space/responsive-modes.md) (foundation)
- [Spacing scale](https://opsinjs.pensievelabs.org/foundations/space/spacing-scale.md) (foundation)
- [Space tokens](https://opsinjs.pensievelabs.org/foundations/space/tokens.md) (foundation)
- [Token architecture](https://opsinjs.pensievelabs.org/foundations/token-architecture.md) (foundation)
- [Typography](https://opsinjs.pensievelabs.org/foundations/typography.md) (foundation)
- [Dynamic Type](https://opsinjs.pensievelabs.org/foundations/typography/dynamic-type.md) (foundation)
- [Typography tokens](https://opsinjs.pensievelabs.org/foundations/typography/tokens.md) (foundation)
- [Type scale](https://opsinjs.pensievelabs.org/foundations/typography/type-scale.md) (foundation)
- [Accessibility](https://opsinjs.pensievelabs.org/accessibility.md) (accessibility)
- [Accessibility statement](https://opsinjs.pensievelabs.org/accessibility/accessibility-statement.md) (accessibility)
- [Cognitive accessibility](https://opsinjs.pensievelabs.org/accessibility/cognitive-accessibility.md) (accessibility)
- [Colour independence](https://opsinjs.pensievelabs.org/accessibility/colour-independence.md) (accessibility)
- [Conformance report (VPAT/ACR)](https://opsinjs.pensievelabs.org/accessibility/conformance-report.md) (accessibility)
- [Contrast conformance](https://opsinjs.pensievelabs.org/accessibility/contrast-conformance.md) (accessibility)
- [For compliance reviewers](https://opsinjs.pensievelabs.org/accessibility/for-compliance-reviewers.md) (accessibility)
- [For content](https://opsinjs.pensievelabs.org/accessibility/for-content.md) (accessibility)
- [For designers](https://opsinjs.pensievelabs.org/accessibility/for-designers.md) (accessibility)
- [For developers](https://opsinjs.pensievelabs.org/accessibility/for-developers.md) (accessibility)
- [For testing](https://opsinjs.pensievelabs.org/accessibility/for-testing.md) (accessibility)
- [Increased contrast](https://opsinjs.pensievelabs.org/accessibility/increased-contrast.md) (accessibility)
- [Keyboard and focus](https://opsinjs.pensievelabs.org/accessibility/keyboard-and-focus.md) (accessibility)
- [Print and export](https://opsinjs.pensievelabs.org/accessibility/print-and-export.md) (accessibility)
- [Reduced motion](https://opsinjs.pensievelabs.org/accessibility/reduced-motion.md) (accessibility)
- [Reduced transparency](https://opsinjs.pensievelabs.org/accessibility/reduced-transparency.md) (accessibility)
- [Screen readers](https://opsinjs.pensievelabs.org/accessibility/screen-readers.md) (accessibility)
- [Target size and motor accessibility](https://opsinjs.pensievelabs.org/accessibility/target-size-and-motor.md) (accessibility)
- [Text resizing and zoom](https://opsinjs.pensievelabs.org/accessibility/text-resizing-and-zoom.md) (accessibility)
- [This site's accessibility](https://opsinjs.pensievelabs.org/accessibility/this-site.md) (accessibility)
- [Content & language](https://opsinjs.pensievelabs.org/content.md) (content)
- [Alt text and descriptions](https://opsinjs.pensievelabs.org/content/alt-text-and-descriptions.md) (content)
- [Asking sensitive questions](https://opsinjs.pensievelabs.org/content/asking-sensitive-questions.md) (content)
- [Error and empty messages](https://opsinjs.pensievelabs.org/content/error-and-empty-messages.md) (content)
- [Glossary](https://opsinjs.pensievelabs.org/content/glossary.md) (content)
- [Grammar and mechanics](https://opsinjs.pensievelabs.org/content/grammar-and-mechanics.md) (content)
- [Health literacy](https://opsinjs.pensievelabs.org/content/health-literacy.md) (content)
- [Inclusive content](https://opsinjs.pensievelabs.org/content/inclusive-content.md) (content)
- [Numbers, dates and time](https://opsinjs.pensievelabs.org/content/numbers-dates-and-time.md) (content)
- [Plain-English A to Z](https://opsinjs.pensievelabs.org/content/plain-english-a-z.md) (content)
- [Reading level](https://opsinjs.pensievelabs.org/content/reading-level.md) (content)
- [Voice and tone](https://opsinjs.pensievelabs.org/content/voice-and-tone.md) (content)
- [Writing status and alerts](https://opsinjs.pensievelabs.org/content/writing-status-and-alerts.md) (content)
- [Patterns](https://opsinjs.pensievelabs.org/patterns.md) (pattern)
- [Alert escalation](https://opsinjs.pensievelabs.org/patterns/alert-escalation.md) (pattern)
- [Ask users for…](https://opsinjs.pensievelabs.org/patterns/ask-users-for.md) (pattern)
- [Ask users for contact details](https://opsinjs.pensievelabs.org/patterns/ask-users-for/contact-details.md) (pattern)
- [Ask users for a date of birth](https://opsinjs.pensievelabs.org/patterns/ask-users-for/date-of-birth.md) (pattern)
- [Ask users for ethnicity](https://opsinjs.pensievelabs.org/patterns/ask-users-for/ethnicity.md) (pattern)
- [Ask users for height and weight](https://opsinjs.pensievelabs.org/patterns/ask-users-for/height-and-weight.md) (pattern)
- [Ask users for medications](https://opsinjs.pensievelabs.org/patterns/ask-users-for/medications.md) (pattern)
- [Ask users for a name](https://opsinjs.pensievelabs.org/patterns/ask-users-for/name.md) (pattern)
- [Ask users for sex and gender](https://opsinjs.pensievelabs.org/patterns/ask-users-for/sex-and-gender.md) (pattern)
- [Ask users for symptoms](https://opsinjs.pensievelabs.org/patterns/ask-users-for/symptoms.md) (pattern)
- [Consent and permissions](https://opsinjs.pensievelabs.org/patterns/consent-and-permissions.md) (pattern)
- [Daily logging](https://opsinjs.pensievelabs.org/patterns/daily-logging.md) (pattern)
- [Empty and first use](https://opsinjs.pensievelabs.org/patterns/empty-and-first-use.md) (pattern)
- [Form design](https://opsinjs.pensievelabs.org/patterns/forms.md) (pattern)
- [Autocomplete and input types](https://opsinjs.pensievelabs.org/patterns/forms/autocomplete-and-input-types.md) (pattern)
- [Error summaries](https://opsinjs.pensievelabs.org/patterns/forms/error-summaries.md) (pattern)
- [Question pages](https://opsinjs.pensievelabs.org/patterns/forms/question-pages.md) (pattern)
- [Required and optional](https://opsinjs.pensievelabs.org/patterns/forms/required-and-optional.md) (pattern)
- [Units and numeric entry](https://opsinjs.pensievelabs.org/patterns/forms/units-and-numeric-entry.md) (pattern)
- [Validation timing](https://opsinjs.pensievelabs.org/patterns/forms/validation-timing.md) (pattern)
- [Offline and stale data](https://opsinjs.pensievelabs.org/patterns/offline-and-stale-data.md) (pattern)
- [Onboarding and first run](https://opsinjs.pensievelabs.org/patterns/onboarding-and-first-run.md) (pattern)
- [Result disclosure](https://opsinjs.pensievelabs.org/patterns/result-disclosure.md) (pattern)
- [Sharing with a clinician](https://opsinjs.pensievelabs.org/patterns/sharing-with-a-clinician.md) (pattern)
- [Trend review](https://opsinjs.pensievelabs.org/patterns/trend-review.md) (pattern)
- [Handbook](https://opsinjs.pensievelabs.org/handbook.md) (handbook)
- [Composition and render](https://opsinjs.pensievelabs.org/handbook/composition-and-render.md) (handbook)
- [Contributing](https://opsinjs.pensievelabs.org/handbook/contributing.md) (handbook)
- [Code style](https://opsinjs.pensievelabs.org/handbook/contributing/code-style.md) (handbook)
- [Component checklist](https://opsinjs.pensievelabs.org/handbook/contributing/component-checklist.md) (handbook)
- [Contributing tokens](https://opsinjs.pensievelabs.org/handbook/contributing/contributing-tokens.md) (handbook)
- [Documentation templates](https://opsinjs.pensievelabs.org/handbook/contributing/documentation-templates.md) (handbook)
- [Proposing a component](https://opsinjs.pensievelabs.org/handbook/contributing/proposing-a-component.md) (handbook)
- [Dark mode](https://opsinjs.pensievelabs.org/handbook/dark-mode.md) (handbook)
- [Data attributes](https://opsinjs.pensievelabs.org/handbook/data-attributes.md) (handbook)
- [Error codes](https://opsinjs.pensievelabs.org/handbook/error-codes.md) (handbook)
- [Forms](https://opsinjs.pensievelabs.org/handbook/forms.md) (handbook)
- [Icons](https://opsinjs.pensievelabs.org/handbook/icons.md) (handbook)
- [Internationalisation](https://opsinjs.pensievelabs.org/handbook/internationalisation.md) (handbook)
- [Migrating from shadcn/ui](https://opsinjs.pensievelabs.org/handbook/migrating-from-shadcn.md) (handbook)
- [Motion in practice](https://opsinjs.pensievelabs.org/handbook/motion-in-practice.md) (handbook)
- [Naming conventions](https://opsinjs.pensievelabs.org/handbook/naming-conventions.md) (handbook)
- [Performance and bundle size](https://opsinjs.pensievelabs.org/handbook/performance-and-bundle-size.md) (handbook)
- [Server and client components](https://opsinjs.pensievelabs.org/handbook/server-and-client-components.md) (handbook)
- [Styling](https://opsinjs.pensievelabs.org/handbook/styling.md) (handbook)
- [Testing your integration](https://opsinjs.pensievelabs.org/handbook/testing.md) (handbook)
- [Tooling](https://opsinjs.pensievelabs.org/handbook/tooling.md) (handbook)
- [ESLint plugin](https://opsinjs.pensievelabs.org/handbook/tooling/eslint-plugin.md) (handbook)
- [Stylelint plugin](https://opsinjs.pensievelabs.org/handbook/tooling/stylelint-plugin.md) (handbook)
- [TypeScript](https://opsinjs.pensievelabs.org/handbook/typescript.md) (handbook)
- [Theming & tokens](https://opsinjs.pensievelabs.org/theming.md) (guide)
- [Adding your own tokens](https://opsinjs.pensievelabs.org/theming/adding-your-own-tokens.md) (guide)
- [Category palettes](https://opsinjs.pensievelabs.org/theming/category-palettes.md) (guide)
- [CSS variables](https://opsinjs.pensievelabs.org/theming/css-variables.md) (guide)
- [Design handoff](https://opsinjs.pensievelabs.org/theming/design-handoff.md) (guide)
- [Lyra and the docs chrome](https://opsinjs.pensievelabs.org/theming/lyra-and-the-docs-chrome.md) (project)
- [Presets](https://opsinjs.pensievelabs.org/theming/presets.md) (guide)
- [Status palettes](https://opsinjs.pensievelabs.org/theming/status-palettes.md) (guide)
- [Tailwind v4](https://opsinjs.pensievelabs.org/theming/tailwind-v4.md) (guide)
- [Theme generator](https://opsinjs.pensievelabs.org/theming/theme-generator.md) (guide)
- [Token reference](https://opsinjs.pensievelabs.org/theming/token-reference.md) (reference)
- [Validating your theme](https://opsinjs.pensievelabs.org/theming/validating-your-theme.md) (guide)
- [Agents & automation](https://opsinjs.pensievelabs.org/agents.md) (guide)
- [Agent skill](https://opsinjs.pensievelabs.org/agents/agent-skill.md) (guide)
- [Evals](https://opsinjs.pensievelabs.org/agents/evals.md) (reference)
- [llms.txt and the shards](https://opsinjs.pensievelabs.org/agents/llms-txt.md) (guide)
- [Machine-readable schemas](https://opsinjs.pensievelabs.org/agents/machine-readable-schemas.md) (guide)
- [MCP server](https://opsinjs.pensievelabs.org/agents/mcp-server.md) (guide)
- [Offline docs bundle](https://opsinjs.pensievelabs.org/agents/offline-docs-bundle.md) (guide)
- [Prompt recipes](https://opsinjs.pensievelabs.org/agents/prompt-recipes.md) (guide)
- [Raw markdown API](https://opsinjs.pensievelabs.org/agents/raw-markdown-api.md) (guide)
- [Rules for agents](https://opsinjs.pensievelabs.org/agents/rules-for-agents.md) (handbook)
- [Writing docs for agents](https://opsinjs.pensievelabs.org/agents/writing-docs-for-agents.md) (handbook)
- [Registry & distribution](https://opsinjs.pensievelabs.org/registry.md) (guide)
- [CLI reference](https://opsinjs.pensievelabs.org/registry/cli-reference.md) (guide)
- [Namespaces](https://opsinjs.pensievelabs.org/registry/namespaces.md) (guide)
- [Preset codes](https://opsinjs.pensievelabs.org/registry/preset-codes.md) (guide)
- [registry-item.json](https://opsinjs.pensievelabs.org/registry/registry-item-json.md) (guide)
- [registry.json](https://opsinjs.pensievelabs.org/registry/registry-json.md) (guide)
- [Self-hosting a fork](https://opsinjs.pensievelabs.org/registry/self-hosting-a-fork.md) (guide)
- [Upgrades and diffs](https://opsinjs.pensievelabs.org/registry/upgrades-and-diffs.md) (guide)
- [Reference](https://opsinjs.pensievelabs.org/reference.md) (reference)
- [API](https://opsinjs.pensievelabs.org/reference/api.md) (reference)
- [AliasProblem](https://opsinjs.pensievelabs.org/reference/api/AliasProblem.md) (reference)
- [ApcaVerdict](https://opsinjs.pensievelabs.org/reference/api/ApcaVerdict.md) (reference)
- [AxisConflict](https://opsinjs.pensievelabs.org/reference/api/AxisConflict.md) (reference)
- [CatalogueIndexRow](https://opsinjs.pensievelabs.org/reference/api/CatalogueIndexRow.md) (reference)
- [ClinicalStatus](https://opsinjs.pensievelabs.org/reference/api/ClinicalStatus.md) (reference)
- [ClinicalStatusMeta](https://opsinjs.pensievelabs.org/reference/api/ClinicalStatusMeta.md) (reference)
- [ClinicalStatusOrUnknown](https://opsinjs.pensievelabs.org/reference/api/ClinicalStatusOrUnknown.md) (reference)
- [ColorInput](https://opsinjs.pensievelabs.org/reference/api/ColorInput.md) (reference)
- [ContrastCheck](https://opsinjs.pensievelabs.org/reference/api/ContrastCheck.md) (reference)
- [ContrastUse](https://opsinjs.pensievelabs.org/reference/api/ContrastUse.md) (reference)
- [CvdCollision](https://opsinjs.pensievelabs.org/reference/api/CvdCollision.md) (reference)
- [CvdType](https://opsinjs.pensievelabs.org/reference/api/CvdType.md) (reference)
- [DataState](https://opsinjs.pensievelabs.org/reference/api/DataState.md) (reference)
- [DecodeError](https://opsinjs.pensievelabs.org/reference/api/DecodeError.md) (reference)
- [DecodeResult](https://opsinjs.pensievelabs.org/reference/api/DecodeResult.md) (reference)
- [DerivedTheme](https://opsinjs.pensievelabs.org/reference/api/DerivedTheme.md) (reference)
- [DeriveOptions](https://opsinjs.pensievelabs.org/reference/api/DeriveOptions.md) (reference)
- [DeriveWarning](https://opsinjs.pensievelabs.org/reference/api/DeriveWarning.md) (reference)
- [Detent](https://opsinjs.pensievelabs.org/reference/api/Detent.md) (reference)
- [Gamut](https://opsinjs.pensievelabs.org/reference/api/Gamut.md) (reference)
- [GeneratedBannedWord](https://opsinjs.pensievelabs.org/reference/api/GeneratedBannedWord.md) (reference)
- [HealthCategory](https://opsinjs.pensievelabs.org/reference/api/HealthCategory.md) (reference)
- [Kind](https://opsinjs.pensievelabs.org/reference/api/Kind.md) (reference)
- [MaterialRung](https://opsinjs.pensievelabs.org/reference/api/MaterialRung.md) (reference)
- [Oklab](https://opsinjs.pensievelabs.org/reference/api/Oklab.md) (reference)
- [Oklch](https://opsinjs.pensievelabs.org/reference/api/Oklch.md) (reference)
- [OpsinError](https://opsinjs.pensievelabs.org/reference/api/OpsinError.md) (reference)
- [OpsinErrorCode](https://opsinjs.pensievelabs.org/reference/api/OpsinErrorCode.md) (reference)
- [OpsinErrorParams](https://opsinjs.pensievelabs.org/reference/api/OpsinErrorParams.md) (reference)
- [OpsinErrorSeverity](https://opsinjs.pensievelabs.org/reference/api/OpsinErrorSeverity.md) (reference)
- [Preset](https://opsinjs.pensievelabs.org/reference/api/Preset.md) (reference)
- [Ramp](https://opsinjs.pensievelabs.org/reference/api/Ramp.md) (reference)
- [RampStep](https://opsinjs.pensievelabs.org/reference/api/RampStep.md) (reference)
- [RampStepValue](https://opsinjs.pensievelabs.org/reference/api/RampStepValue.md) (reference)
- [ReferenceRange](https://opsinjs.pensievelabs.org/reference/api/ReferenceRange.md) (reference)
- [RefusedConversion](https://opsinjs.pensievelabs.org/reference/api/RefusedConversion.md) (reference)
- [RegistryLookup](https://opsinjs.pensievelabs.org/reference/api/RegistryLookup.md) (reference)
- [RegistryQuery](https://opsinjs.pensievelabs.org/reference/api/RegistryQuery.md) (reference)
- [Rgb](https://opsinjs.pensievelabs.org/reference/api/Rgb.md) (reference)
- [Rgb255](https://opsinjs.pensievelabs.org/reference/api/Rgb255.md) (reference)
- [RoleName](https://opsinjs.pensievelabs.org/reference/api/RoleName.md) (reference)
- [RolePair](https://opsinjs.pensievelabs.org/reference/api/RolePair.md) (reference)
- [RoleValue](https://opsinjs.pensievelabs.org/reference/api/RoleValue.md) (reference)
- [Status](https://opsinjs.pensievelabs.org/reference/api/Status.md) (reference)
- [StatusMeta](https://opsinjs.pensievelabs.org/reference/api/StatusMeta.md) (reference)
- [TokenFormat](https://opsinjs.pensievelabs.org/reference/api/TokenFormat.md) (reference)
- [TrendPoint](https://opsinjs.pensievelabs.org/reference/api/TrendPoint.md) (reference)
- [Unit](https://opsinjs.pensievelabs.org/reference/api/Unit.md) (reference)
- [UnitConversion](https://opsinjs.pensievelabs.org/reference/api/UnitConversion.md) (reference)
- [UnknownStatus](https://opsinjs.pensievelabs.org/reference/api/UnknownStatus.md) (reference)
- [UnresolvedReason](https://opsinjs.pensievelabs.org/reference/api/UnresolvedReason.md) (reference)
- [ViewKind](https://opsinjs.pensievelabs.org/reference/api/ViewKind.md) (reference)
- [ViewParams](https://opsinjs.pensievelabs.org/reference/api/ViewParams.md) (reference)
- [WarningLevel](https://opsinjs.pensievelabs.org/reference/api/WarningLevel.md) (reference)
- [WcagUse](https://opsinjs.pensievelabs.org/reference/api/WcagUse.md) (reference)
- [WcagVerdict](https://opsinjs.pensievelabs.org/reference/api/WcagVerdict.md) (reference)
- [Catalogue](https://opsinjs.pensievelabs.org/reference/generated/catalogue.md) (reference)
- [Contrast](https://opsinjs.pensievelabs.org/reference/generated/contrast.md) (reference)
- [CSS variables](https://opsinjs.pensievelabs.org/reference/generated/css-variables.md) (reference)
- [Data attributes](https://opsinjs.pensievelabs.org/reference/generated/data-attributes.md) (reference)
- [Glossary data](https://opsinjs.pensievelabs.org/reference/generated/glossary.md) (reference)
- [Keyboard](https://opsinjs.pensievelabs.org/reference/generated/keyboard.md) (reference)
- [Tokens](https://opsinjs.pensievelabs.org/reference/generated/tokens.md) (reference)
- [Types](https://opsinjs.pensievelabs.org/reference/generated/types.md) (reference)
- [System glossary](https://opsinjs.pensievelabs.org/reference/system-glossary.md) (reference)
- [Project](https://opsinjs.pensievelabs.org/project.md) (project)
- [Changelog](https://opsinjs.pensievelabs.org/project/changelog.md) (project)
- [0.0.0. The scaffold](https://opsinjs.pensievelabs.org/project/changelog/2026-09-scaffold.md) (project)
- [Community](https://opsinjs.pensievelabs.org/project/community.md) (project)
- [Decisions](https://opsinjs.pensievelabs.org/project/decisions.md) (project)
- [ADR 0001. Base UI, not Radix](https://opsinjs.pensievelabs.org/project/decisions/0001-base-ui-not-radix.md) (project)
- [ADR 0002. Distribute as a shadcn registry](https://opsinjs.pensievelabs.org/project/decisions/0002-shadcn-registry-distribution.md) (project)
- [ADR 0003. Two colour axes that never mix](https://opsinjs.pensievelabs.org/project/decisions/0003-two-colour-axes.md) (project)
- [ADR 0004. lyra themes the documentation chrome only](https://opsinjs.pensievelabs.org/project/decisions/0004-lyra-docs-chrome.md) (project)
- [ADR 0005. No [lang] segment yet](https://opsinjs.pensievelabs.org/project/decisions/0005-no-lang-segment-yet.md) (project)
- [ADR 0006. Generated, never authored](https://opsinjs.pensievelabs.org/project/decisions/0006-generated-not-authored.md) (project)
- [ADR 0007. Two root layouts, and no app/layout.tsx](https://opsinjs.pensievelabs.org/project/decisions/0007-two-root-layouts.md) (project)
- [ADR 0009. The default export is a demo, not the component](https://opsinjs.pensievelabs.org/project/decisions/0009-default-export-is-a-demo.md) (project)
- [ADR 0010. Shared code ships inside every registry item](https://opsinjs.pensievelabs.org/project/decisions/0010-shared-code-ships-with-every-item.md) (project)
- [ADR 0011. Anatomy parts are structure, not a public API](https://opsinjs.pensievelabs.org/project/decisions/0011-anatomy-parts-are-data-slots.md) (project)
- [ADR 0012. Example data is synthetic and explicitly unsourced](https://opsinjs.pensievelabs.org/project/decisions/0012-synthetic-example-data.md) (project)
- [ADR 0013. A component preview is an iframe, not an inline render](https://opsinjs.pensievelabs.org/project/decisions/0013-previews-are-iframes.md) (project)
- [ADR 0014. The material rung names are the token names](https://opsinjs.pensievelabs.org/project/decisions/0014-material-rung-names.md) (project)
- [ADR 0015. Error codes are flat, not banded](https://opsinjs.pensievelabs.org/project/decisions/0015-error-codes-are-flat.md) (project)
- [ADR 0016. The unit table ships spoken forms, not conversion factors](https://opsinjs.pensievelabs.org/project/decisions/0016-the-unit-table-ships-no-factors.md) (project)
- [ADR 0017. precision means decimal places, everywhere](https://opsinjs.pensievelabs.org/project/decisions/0017-precision-means-decimal-places.md) (project)
- [ADR 0021. A modal surface owns its own open state](https://opsinjs.pensievelabs.org/project/decisions/0021-modal-surfaces-own-their-open-state.md) (project)
- [ADR 0023. Three release phases, and only a component page carries one](https://opsinjs.pensievelabs.org/project/decisions/0023-three-release-phases.md) (project)
- [ADR 0024. The component page is lean](https://opsinjs.pensievelabs.org/project/decisions/0024-the-component-page-is-lean.md) (project)
- [ADR 0025. The WCAG 2.2 AA audit is author-run](https://opsinjs.pensievelabs.org/project/decisions/0025-the-audit-is-author-run.md) (project)
- [Deprecations](https://opsinjs.pensievelabs.org/project/deprecations.md) (project)
- [Docs freshness](https://opsinjs.pensievelabs.org/project/docs-freshness.md) (project)
- [Licence and attribution](https://opsinjs.pensievelabs.org/project/licence-and-attribution.md) (project)
- [Official resources](https://opsinjs.pensievelabs.org/project/official-resources.md) (project)
- [Release phases](https://opsinjs.pensievelabs.org/project/release-phases.md) (project)
- [Roadmap](https://opsinjs.pensievelabs.org/project/roadmap.md) (project)
- [Security](https://opsinjs.pensievelabs.org/project/security.md) (project)
- [State of the system](https://opsinjs.pensievelabs.org/project/state-of-the-system.md) (project)
- [Versioning policy](https://opsinjs.pensievelabs.org/project/versioning-policy.md) (project)
- [Packages](https://opsinjs.pensievelabs.org/packages.md) (guide)
- [@opsinjs/color](https://opsinjs.pensievelabs.org/packages/opsinjs-color.md) (guide)
- [@opsinjs/motion](https://opsinjs.pensievelabs.org/packages/opsinjs-motion.md) (guide)
- [@opsinjs/preset](https://opsinjs.pensievelabs.org/packages/opsinjs-preset.md) (guide)
- [@opsinjs/react](https://opsinjs.pensievelabs.org/packages/opsinjs-react.md) (guide)
- [@opsinjs/tailwind.css](https://opsinjs.pensievelabs.org/packages/opsinjs-tailwind-css.md) (guide)