opsinjs

Roadmap

The public backlog is ordered, shows its blockers, and deliberately has no dates.

How to read this

This roadmap is ordered, not scheduled. There are no dates on it, and there will not be: a date on an unfunded backlog is a promise the project cannot keep, and the person most damaged by it is the one who planned a release around it. What you get instead is the order, the reason for the order, and the blocker attached to anything that is not moving.

The status of any individual component is not maintained here. It is generated from the catalogue, so it cannot drift from what the system actually contains.

Every component in this catalogue has been audited against WCAG 2.2 AA, and none has had an independent accessibility review or a clinical review. The phase word says how installable the source is and says nothing about review. Nothing here is for a production health surface until a clinician has signed it.

Filter by categoryCategory
ComponentWhat a reader seesCategoryPhaseAlso known as
ResultCardresult-cardOne test result, showing the number, what it is compared against, and what it means.Health data displayShippedresults, lab result, test result, report card, blood pressure, a1c
RangeBarrange-barA bar showing where one reading sits against the range it is compared with.Health data displayShippedreference range, normal range, in range, range indicator, gauge bar
ScoreDialscore-dialA single composite number drawn as a ring, with the words that say what it counts.Health data displayShippeddial, ring, gauge, score, index, bmi
TrendSparklinetrend-sparklineA small chart of one reading over time, with an honest caption saying what changed.Health data displayShippedsparkline, trend, over time, mini chart, line chart, chart, graph
MetricTilemetric-tileA compact tile showing one reading, its unit and when it was taken.Health data displayShippedstat, kpi, vitals, summary tile, steps, resting heart rate, spo2, tile
StatusPillstatus-pillA short label saying what a reading means and what, if anything, to do about it.Health data displayShippedchip, status chip, status badge, status label, traffic light
TimelineEntrytimeline-entryOne dated event in a vertical history.Health data displayShippedhistory item, event list, activity feed
RangeLegendrange-legendThe key explaining what the bands on a range mean.Health data displayShippedkey, chart legend, band legend
AlertBanneralert-bannerA prominent message about something that needs the reader's attention now.Health communicationShippedwarning banner, notification banner, inline alert, warning, notification, alert, banner
CareCardcare-cardA card saying what to do next, and how urgently.Health communicationShippedwhat to do next, action card, advice card, next steps, guidance card, what to do, advice
TermtermA clinical word with its everyday meaning attached, so a sentence can be read without leaving it.Health communicationShippedglossary term, jargon, plain word, definition, plain english, tooltip term
ConsentSheetconsent-sheetA sheet that asks permission for one specific thing, and records the answer.Health communicationShippedconsent, permission, opt in, data sharing, agree
DisclaimerNotedisclaimer-noteThe standing note about what this information is and is not.Health communicationShippeddisclaimer, not medical advice, legal note, small print, safety note
SourceCitationsource-citationWhere a piece of health information came from, and when it was last checked.Health communicationShippedcitation, evidence link, reviewed by
LogSheetlog-sheetA form for writing down what happened today, in as few taps as possible.Health inputShippedlog, diary, journal, daily entry, capture, quick entry, bottom sheet entry
ReadingInputreading-inputAn input for typing in a measurement, with the unit shown and switchable beside the number.Health inputShippedenter a reading, measurement input, numeric entry, manual entry, numeric input, unit switch
BodyMapbody-mapA diagram of a body for pointing at where something hurts.Health inputShippedpain map, anatomy diagram, where does it hurt
ValuevalueOne number and its unit, formatted the same way everywhere in the product.Health formattingShippednumber, unit, format a number, numeric display, figure, format, formatted number
RelativeTimerelative-timeWhen a reading was taken, said the way a person would say it.Health formattingShippedtime ago, timestamp, last updated, date display, ago, freshness, staleness
TabletableRows and columns of data.Data displayShippeddata table, grid, rows and columns
BadgebadgeA small label attached to something else.Data displayShippedcounter, label chip
SurfacesurfaceThe base panel every other surface is built from, at one of six material rungs.SurfacesShippedmaterial, glass, blur, elevation, layer, translucency, vibrancy
CardcardA bounded block of related content.SurfacesShippedpanel, container, content box, box, tile group
SheetsheetA panel that slides over the screen and can be dismissed by dragging.SurfacesShippedbottom sheet, drawer, side panel, slide over, modal sheet, detent
DialogdialogA window that interrupts, for the one decision that cannot wait.SurfacesShippedmodal, alert dialog, confirm, popup
CalloutcalloutA short piece of set-apart information that helps you understand what you are reading without claiming anything about your health, whether it is a note, a tip or a caveat.FeedbackShippedadmonition, note box, info box, tip, note, aside
EmptyStateempty-stateWhat a screen shows when there is nothing to show, and what to do about it.FeedbackShippedno data, nothing here, zero state, blank slate
SkeletonskeletonThe shape of content that has not arrived yet.FeedbackShippedloading placeholder, shimmer, ghost, loading state, placeholder
SegmentedControlsegmented-controlA small row of mutually exclusive options.NavigationShippedsegmented buttons, toggle group
TabBartab-barThe persistent bar of top-level destinations at the bottom of the screen.NavigationShippedbottom navigation, nav bar
StepperstepperProgress through a sequence of steps.NavigationShippedwizard, step indicator, multi step
ButtonbuttonThe control that makes something happen.Actions and formsShippedcta, action, submit, primary button
LinklinkNavigation to somewhere else.Actions and formsShippedanchor, hyperlink
FieldfieldA labelled input with its help text, its error, and the wiring that connects them.Actions and formsShippedform field, input wrapper, form control, validation message, label, error message, hint
IconButtonicon-buttonA button whose only visible content is an icon.Actions and formsShippedglyph button, round button
SwitchswitchAn on-or-off control that takes effect immediately.Actions and formsShippedtoggle
CheckboxcheckboxA box for choosing any number of options, including none.Actions and formsShippedtick box, multi select
RadioGroupradio-groupA set of options where exactly one can be chosen.Actions and formsShippedradio buttons, single choice
SelectselectChoosing one option from a list.Actions and formsShippeddropdown, picker
NumberFieldnumber-fieldAn input for a number, with steppers.Actions and formsShippedstepper input, quantity input
TextareatextareaA multi-line text input.Actions and formsShippedlong text, notes input
DividerdividerA line separating two groups of content.LayoutShippedseparator, rule
AvataravatarA picture or initials standing for a person.UtilityShippedprofile picture, initials, user image
VisuallyHiddenvisually-hiddenContent that screen readers announce and eyes do not see.UtilityShippedsr only, screen reader only, clip
GoalRinggoal-ringProgress towards a daily goal, drawn as a closing ring.Health data displayShippedactivity ring, close your rings, daily goal
ScaleInputscale-inputA one-to-ten scale for rating something like pain or mood.Health inputShippedpain scale, rating scale, likert
DoseTrackerdose-trackerA record of medicine doses taken and missed.Health inputShippedmedication, pill tracker, dose, adherence tracker
QuestionnairequestionnaireA multi-question form for a validated instrument such as a symptom score.Health inputShippedsurvey, assessment, phq, screening form
SymptomPickersymptom-pickerA picker for choosing symptoms from a controlled list.Health inputShippedsymptoms, how are you feeling, symptom checker
ToasttoastA brief message that appears and disappears on its own.FeedbackShippedsnackbar, transient message, notification toast
ProgressprogressHow far through something the reader is.FeedbackShippedprogress bar, completion
SpinnerspinnerAn indeterminate loading indicator.FeedbackShippedloader, busy indicator, activity indicator
TooltiptooltipA short label that appears on hover or focus.OverlayShippedhover label
PopoverpopoverA small panel anchored to the control that opened it.OverlayShippedanchored panel, flyout
MenumenuA list of actions opened from a button.OverlayShippeddropdown menu, context menu, overflow menu
TabstabsSwitching between views that occupy the same space.NavigationShippedtab list, view switcher
AccordionaccordionSections that expand one at a time.NavigationShippeddisclosure, expander, collapsible
SlidersliderChoosing a value by dragging along a track.Actions and formsShippedrange input, drag to set
ComboboxcomboboxA text input that filters a list as you type.Actions and formsShippedautocomplete, typeahead, search select
ScrollAreascroll-areaA scrolling region with styled scrollbars.LayoutShippedscroller, overflow container

The order, and why

Every component named below now exists, which is why this reads in the past tense. It is kept on the page because it explains the shape of what was built and which components lean on which, rather than because anything in it is still waiting.

1. Nothing shipped before the token layer was fixed. Every component reads semantic tokens, and every published contrast number describes a token pair. Renaming a token after twenty components consume it is the expensive mistake this project front-loaded to avoid, and everything built since was written against a token layer that had stopped moving.

2. The health data-display components came first, in this order: StatusPill, RangeBar, ResultCard. They were ordered by how much of the system they exercise rather than by how much anyone wants them. StatusPill is the smallest complete test of the status axis and the colour-independence rule. RangeBar is the first component that has to render a value against a range without implying a diagnosis, which is the hardest content problem in the system. ResultCard composes both and is the component most people arrive wanting.

3. Then the surfaces: Surface, Card, Sheet, Dialog. The material ladder had been documented and tokenised with nothing climbing it, and a ladder nothing climbs is a ladder nobody has tested. Those four exercise it now.

4. Then communication: AlertBanner, CareCard, Callout, DisclaimerNote. These carry the alarm-fatigue budget, so they were built after there was enough of a surface to measure a budget against.

5. Input and formatting last: ReadingInput, LogSheet, Value, RelativeTime. Value is small and was tempting to do first; it was deliberately late because its rounding and unit rules are doctrine that the components above it sharpened.

What is next is not an ordered list, and inventing one would be the dated promise this page opens by refusing. The honest statement is what has not been done: no screen specimen has been built, and while every component has now been audited against WCAG 2.2 AA by its own authors (see ADR 0025), none has had an independent accessibility review or a clinical review. Every catalogue row is implemented and installable. See Release phases for what shipped obliges us to and, more to the point, what it does not.

Blockers

Some measurements still do not exist. Bundle sizes and the keyboard reference are generated pages whose sources are still empty. All sixty catalogue rows now record a WCAG 2.2 AA audit, run by the components' own authors and recorded in ADR 0025, but none records an independent accessibility review. Those pages are not missing, they are waiting on numbers nobody independent has produced. An audit table filled in by the people who wrote the code is not a passing one.

Colour-independence and the never-mix rule need a lint rule, not a document. The rule is written, and a rule that is only written is a rule that survives until the first deadline. Until the ESLint and Stylelint plugins described in Tooling exist, this is enforced by review, which is to say weakly.

Accessibility conformance cannot be claimed without an independent audit, and none has been run. Every component has now been audited against WCAG 2.2 AA by the people who wrote it, and the findings from that pass were fixed in the same change (see ADR 0025); that is not the same claim as conformance. The reason independent conformance still cannot be claimed is the ordinary one, that nobody independent has looked. The accessibility statement lists what is unknown today rather than implying it is fine.

The [lang] segment is not blocked, it is deferred, with the exact retrofit recipe recorded in ADR 0005. Unit systems are treated as a correctness problem and ship now, because getting those wrong harms someone in English just as effectively as in any other language. Those systems are mmol/L against mg/dL, kilograms against stones, and Celsius against Fahrenheit.

What this project will not do

Saying no in public is part of a roadmap. None of the following is planned, and if you need one, opsinjs is the wrong dependency:

  • Clinician-facing components. No EHR tables, no order entry, no prescribing. Density, training assumptions and error consequences are all different.
  • A charting library. Data visualisation gives rules and an accessible chart contract; it will not ship a chart engine.
  • A general form library. Field exists to make health inputs correct, not to compete with the form libraries that already work.
  • A CLI. npx shadcn installs from our registry today and there is nothing a CLI of our own would add. Writing one before writing a component would have been building the shop before the stock; now that there is stock, the shop still belongs to somebody else, a choice recorded in ADR 0002.
  • Native mobile. The system targets the web, including web views in native apps. React Native is not on this list.

How something gets onto this page

Through Proposing a component, which sets out the eight questions a proposal has to answer and the four reasons one is normally declined. The short version: a name is cheap, a specification is not, and nothing is implemented before its clinical contract is written down.

Edit this page

Last read through against the system on 2026-09-20. Due for review every 3 months; expiry is reported by pnpm run check:freshness.

On this page