Print & reports
Every component ships its own @media print rules (nav/toolbars/
filters hidden, black-on-white tables, outlined markers). The print layer adds
report plumbing on top. Try it: ⌘P on the
invoice list or
approval pattern.
What the print layer does
- Page margins (
@page), 10pt body, widow/orphan control, headings keep their content. - Table headers repeat on every page; rows, form sections, widgets, timeline steps never split across pages.
- Dialogs, popovers, and toasts never print.
- Status colors are forced (
print-color-adjust: exact) on badges and timeline/stepper markers — status is data on a printed approval. - Inside
.bo-print-report, absolute links print their URL.
Utilities
.bo-u-print-only— report headers, generated-on stamps (hidden on screen)..bo-u-print-hidden— screen-only chrome..bo-u-break-before/.bo-u-avoid-break— page-break control.
Markup — a report region
<!-- A printable report region: -->
<main class="bo-print-report">
<header class="bo-u-print-only">
<h1>Invoice report — CC-4021</h1>
<p>Generated <time datetime="2026-08-12">2026-08-12</time> · busy-office ERP</p>
</header>
<div class="bo-data-table-container" tabindex="0">…dense table…</div>
<section class="bo-u-break-before">
<h2>Approval history</h2>
<ol class="bo-timeline" role="list">…</ol>
</section>
</main>