Dashboard

Hero figure + span-2 widget

The hero tile spans two columns (.bo-widget--span-2) and collapses to one when the grid (a named container) drops below its two-column width. One hero per view, max.

Widget with an embedded table (container-driven compaction)

Widget parts — header, body, band

.bo-widget is the framework's card primitive — filed under "Dashboard" because that's its most common use, but it composes into any card-shaped UI: a widget is __header / __body / __band. The band footer carries a status message (--msg) or actions — one durable strip. This is what record and approval cards are built from.

Collapsible opt-in

data-collapse-trigger + initCollapsibleCards(): the trigger's aria-expanded and the panel's data-state are the two-channel contract (chevron rotation is decoration on top). CSS does the height transition — same grid-template-rows 0fr/1fr technique as the Motion module's .bo-motion-collapse. No data-state at all defaults to open, so this degrades to a plain always-open widget without the behavior wired up.

<div class="bo-widget">
  <header class="bo-widget__header">
    <!-- __title is a CLASS, not an element. On a real screen give it the
         heading that fits the page's outline — <h2> for a section widget,
         <h1> when the widget IS the record's identity (see the object-page
         pattern). The <span> below is only right when something else on the
         page already provides the heading. -->
    <h2 class="bo-widget__title">Shipping details</h2>
    <button class="bo-btn bo-btn--ghost bo-btn--icon" data-collapse-trigger
            aria-expanded="true" aria-controls="ship-body" aria-label="Toggle">
      <span class="bo-widget__toggle-icon">▾</span>
    </button>
  </header>
  <div class="bo-widget__collapse" id="ship-body" data-state="open">
    <div class="bo-widget__body">123 Warehouse Rd, Dock 4</div>
  </div>
</div>
<script type="module">
  import { initCollapsibleCards } from "@busy-office/ui/js";
  initCollapsibleCards(); // once, ever — event delegation
</script>

Markup

<div class="bo-widget">
  <div class="bo-stat">
    <span class="bo-stat__label">Open invoices</span>
    <span class="bo-stat__value">1,284</span>
    <span class="bo-stat__delta bo-stat__delta--bad">
      <span aria-hidden="true">▲</span> +12%
      <span aria-hidden="true">⚠</span>
      <span class="bo-visually-hidden">increase, worse,</span> vs July
    </span>
  </div>
</div>
<!-- Valence has two channels: the visible ⚠ on BAD deltas (arrow + sign only
     carry direction — a colorblind reader can't tell good ▲ from bad ▲) and
     the visually-hidden text for screen readers. Glyphs are aria-hidden so
     AT hears "+12%, increase, worse, vs July" without triangle noise. -->

Quick reference generated

State attributes: data-collapse-triggerdata-statearia-expanded

API generated from CSS

• Delta valence needs two channels: the visible ⚠ on bad deltas AND visually-hidden text ("increase, worse,").
• Stat values use proportional figures; compact big numbers server-side (12.9K, $4.2M). One hero per view.
• Widgets are named containers (bo-widget); the grid is bo-widget-grid — span-2 collapses at the grid's 2-column threshold.
• bo-widget__title is a CLASS, not an element — put it on the heading level the page's outline needs (h2 for a section widget, h1 when the widget carries the record's identity). Every demo here nests inside this page's own h1, so copying a span into a real screen is how a page ends up with none.
• Collapsible is opt-in: data-collapse-trigger + initCollapsibleCards(). Without the behavior, a .bo-widget__collapse with no data-state just renders open.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 105 · Firefox 121 · Safari 16

Alignment scored

2026-08-23

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 @container — 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

100% (18/18) — 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-23.