Block & modifiers

• pa-sheet - A4-width white page, centred, screen shadow, built-in print layer
• pa-sheet--framed - Hairline outer border
• pa-sheet--compact / --spacious - Tighter / looser padding + region rhythm
• pa-sheet--fluid - Fill the container instead of clamping to A4 width
• pa-sheet--fill - Full A4-height page; the last region (footer) sinks to the page bottom even when content is short. Prints on exactly one page.
• pa-sheet--landscape - A4 landscape (297×210mm) for wide, many-column tables. Best printed on its own via pureAdmin.printElement(), which gives it a landscape page automatically; a whole-page window.print() keeps one orientation, so it stays portrait there.
• pa-sheet--print-color - Print the accent/brand colours (title, logo, status) on white paper. Default is pure ink-on-paper.
• pa-sheet--print-grayscale - Like --print-color, desaturated to grey. No mode floods the background.

Regions

• pa-sheet__masthead (--ruled) - Top band; __brand, __logo, __doctitle, __docmeta
• pa-sheet__parties (--cols-3) - Party grid; __party (--boxed / --strong), __party-label, __party-name, __party-body
• pa-sheet__meta (--boxed) - Right-aligned label/value grid; __meta-label, __meta-value
• pa-sheet__title - Generic titled-section heading
• pa-sheet__totals (--start) - End-aligned summary column; __total-row (--grand), __total-label, __total-value
• pa-sheet__notes - Prose block (terms, reminder copy)
• pa-sheet__barcode - Barcode slot (inject inline SVG, e.g. Code128 via JsBarcode)
• pa-sheet__qr / __qr-label - QR slot with a caption below the code
• pa-sheet__footer - __signatures → __sign; __legal; __pageno

Compose with existing blocks

• Line items → pa-table-container > pa-table (any modifier) — the wrapper scrolls a wide table on mobile; the sheet strips its frame
• Two-line item cell → pa-table__item-title + pa-table__item-desc inside a <td> (name + italic spec/description)
• Metadata / party pairs → pa-fields, pa-desc-table
• Tax-breakdown box → pa-table or pa-desc-table
• Chapter-style terms → pa-document (numbered clauses)

Runtime tokens (CSS variables)

• --pa-sheet-width - Page width (default 210mm)
• --pa-sheet-height - Page height for --fill on screen (default 297mm)
• --pa-sheet-padding - Inner page margin on screen
• --pa-sheet-gap - Vertical rhythm between regions
• --pa-sheet-rule-color - Masthead/total rule colour
• --pa-sheet-totals-width - Width of the totals column (default 42rem)
• --pa-sheet-sign-height - Blank height of a signature slot (default 6rem)
• --pa-sheet-qr-size - QR code square size (default 12rem)

Barcodes & QR codes: the framework ships only the placement slots (pa-sheet__barcode / pa-sheet__qr) — generate the code itself as inline SVG (JsBarcode, a QR library, or a server-rendered image). Use SVG, not <canvas>: a canvas prints blank via printElement() and blurs at print DPI. This demo uses JsBarcode + qrcode-generator (both SVG).

Printing (JavaScript)

• window.print() - Prints the whole document (use with your own @media print to hide app chrome)
• pureAdmin.printElement(target, { title }) - Prints a single element in isolation. target = element, CSS selector, or event. Clones it into a hidden iframe with the page's styles + theme mode.
• pureAdmin.printSheet(this, { title }) - From a button inside a sheet; climbs to the enclosing .pa-sheet
• data-print-omit / .pa-print-hide - Mark elements (e.g. the print button itself) to strip from the printout

The sheet ships its own @media print rules and a default @page { size: A4 }. The page margin is intentionally not set — the browser's own margin (the Margins setting the user picks in the print dialog) governs it; to pin a fixed margin, declare @page { margin: 15mm } after the framework. pureAdmin.printElement() (in src/js/sheet-print.js) is the reliable way to print one sheet without a page-level print stylesheet — the browser has no native single-element print.