Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
risk-register
Composing preset that renders a sortable risk table + a likelihood × impact quadrant grid from one source.
Overview
The <risk-register> component renders both a sortable risk table and a likelihood × impact quadrant grid from a single data source. Severity is computed automatically (likelihood × impact) and color-coded with a low-good heatmap. Each risk appears as a labelled dot at its (likelihood, impact) coordinates in the quadrant view.
It composes <data-table> (with the new data-rollup="product" + data-heatmap="low-good" attributes) and <quadrant-grid> — most of the code is glue, since both children do the work.
Data source
Risks come from a <template> child. Each <tr> has cells in this order: Title, Likelihood (1–5), Impact (1–5), Owner, Mitigation. A data-id on the row provides a stable identifier.
HTML
<risk-register label="Q3 project risks"> <template> <tr data-id="vendor-delay"><td>Vendor delay</td><td>4</td><td>3</td><td>PM</td><td>Pre-stage assets in week 6</td></tr> <tr data-id="data-breach"><td>Data breach</td><td>2</td><td>5</td><td>Security</td><td>Tabletop exercise + WAF tuning</td></tr> </template></risk-register>Or load asynchronously via src:
HTML
<risk-register src="/risks.json" label="Q3 project risks"></risk-register>Attributes
Quadrant naming
The grid uses standard risk-management labels:
- Avoid (Q1 — high likelihood, high impact)
- Plan (Q2 — low likelihood, high impact)
- Accept (Q3 — low likelihood, low impact)
- Mitigate (Q4 — high likelihood, low impact)
Layout
At narrow widths the table sits above the quadrant. At ≥ 64rem the layout switches to a 2-column side-by-side. Both views always reflect the same <template>.
Related
<data-table>— Provides the rollup + heatmap attributes used here.<quadrant-grid>— Renders the labelled-dot view.