Date

Use this instead

<!-- The replacement: a cluster, a tabular utility, and a badge.
     Two-channel by construction — the badge carries the WORD "Overdue",
     so the meaning survives without colour. -->
<span class="bo-cluster">
  <span class="bo-u-tabular">Aug 10, 2026</span>
  <span class="bo-badge bo-badge--danger">Overdue by 4 days</span>
</span>

<!-- and the ordinary case is just the text -->
<span class="bo-cluster">
  <span class="bo-u-tabular">Aug 21, 2026</span>
  <span class="bo-u-text-muted">(in 7 days)</span>
</span>

Same information, no bespoke component — and the badge makes the two-channel contract structural rather than a rule someone has to remember.

Basic

<span class="bo-date">
  <span class="bo-date__value">Aug 21, 2026</span>
  <span class="bo-date__relative">(in 7 days)</span>
</span>

__relative is optional, muted, plain text — your app decides the wording ("in 7 days", "3 weeks ago").

Today

<span class="bo-date">
  <span class="bo-date__value">Aug 14, 2026</span>
  <span class="bo-date__relative">(today)</span>
</span>

Overdue — two-channel

<!-- two-channel, same contract as Amount's --negative — the word
     "Overdue" is in the text; colour only adds the hue. -->
<span class="bo-date bo-date--overdue">
  <span class="bo-date__value">Aug 10, 2026</span>
  <span class="bo-date__relative">(Overdue by 4 days)</span>
</span>

The word "Overdue" lives in the text, so colourblind and screen-reader users get the meaning without the colour — same contract as Amount's --negative. --overdue only adds the hue.

Muted (no dedicated modifier)

<!-- no --muted modifier — .bo-u-text-muted (existing utility)
     already does this -->
<span class="bo-date bo-u-text-muted">
  <span class="bo-date__value">Jul 1, 2026</span>
</span>

There's no --muted modifier — the existing utility .bo-u-text-muted already does this; a component modifier would just duplicate it.

Editable date — a plain input, not .bo-date

<!-- .bo-date is DISPLAY only, like .bo-amount. For an editable
     date, use a plain native input — nothing to add, a native date
     picker is already good. -->
<div class="bo-form-field">
  <label class="bo-form-field__label" for="dt-due">Due date</label>
  <input class="bo-input" id="dt-due" type="date" value="2026-08-21" />
</div>

.bo-date is read-only display, like .bo-amount. There's deliberately no input variant — a native date picker already covers entry well; nothing to add at this layer.

In a table column

<table class="bo-data-table">
  <thead><tr><th>PO</th><th>Due date</th></tr></thead>
  <tbody>
    <tr><td>PO-88213</td><td><span class="bo-date"><span class="bo-date__value">Aug 21, 2026</span><span class="bo-date__relative">(in 7 days)</span></span></td></tr>
    <tr><td>PO-88214</td><td><span class="bo-date bo-date--overdue"><span class="bo-date__value">Aug 10, 2026</span><span class="bo-date__relative">(Overdue by 4 days)</span></span></td></tr>
  </tbody>
</table>

Same component, dropped straight into a table cell — no table-specific variant needed.

Markup

<span class="bo-date">
  <span class="bo-date__value">Aug 21, 2026</span>       <!-- your app formats the date -->
  <span class="bo-date__relative">(in 7 days)</span>     <!-- optional -->
</span>

<!-- modifiers: --overdue -->

Quick reference generated

API generated from CSS

• Read-only display, like Amount — your app formats the date and the optional relative text.
• Overdue is two-channel — the word "Overdue" MUST be in the markup; --overdue only adds colour.
• No --muted modifier — use the existing .bo-u-text-muted utility instead.
• No editable variant — use a plain native <input type="date"> for data entry.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 99 · Firefox 97 · Safari 15.4

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @layer — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

73% (11/15) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.

Known gaps: fit — removed at the next major; until then the page documents the .bo-cluster replacement (roadmap 45.3, CHANGELOG Deprecated); content — write the wrong-choice clause the recipe requires (roadmap 94.10 ratchet).