<bmx-risk-matrix>

<bmx-risk-matrix id="ex-risks" label="Enterprise risk register, Q3" today="2026-10-13" arrows="treatment"></bmx-risk-matrix>
<p class="note" id="ex-risks-out" role="status">Sixteen risks on a 5 × 5 grid with an appetite of 9. Drag a risk to re-score it, or choose one and use Shift with the arrow keys.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <button type="button" id="ex-risks-check">What needs attention?</button>
  <button type="button" id="ex-risks-svg">Show the heat map as SVG</button>
</div>
<div id="ex-risks-art"></div>

<script type="module">
  await customElements.whenDefined('bmx-risk-matrix');
  const matrix = document.getElementById('ex-risks');
  const out = document.getElementById('ex-risks-out');
  const r = (id, title, category, owner, inherent, residual, extra = {}) => ({
    id, title, category, owner,
    inherent: { likelihood: inherent[0], impact: inherent[1] },
    residual: { likelihood: residual[0], impact: residual[1] },
    ...extra,
  });
  matrix.model = {
    appetite: 9,
    bands: [
      { id: 'low', label: 'Low', min: 1, max: 4, action: 'Manage by routine procedures' },
      { id: 'medium', label: 'Medium', min: 5, max: 9, action: 'Owner monitors; review quarterly' },
      { id: 'high', label: 'High', min: 10, max: 16, action: 'Treatment plan; executive attention' },
      { id: 'critical', label: 'Critical', min: 17, max: 25, action: 'Escalate to the board now' },
    ],
    risks: [
      r('OP-01', 'Single supplier for packaging fails', 'Operational', 'Head of Procurement', [4, 4], [2, 4], { target: { likelihood: 1, impact: 3 }, previous: { likelihood: 3, impact: 4 }, status: 'mitigating', controls: ['Second supplier qualified for 40% of volume', 'Eight weeks of safety stock'], reviewBy: '2026-12-01' }),
      r('OP-02', 'Warehouse management system outage at peak', 'Operational', 'COO', [3, 5], [2, 4], { previous: { likelihood: 2, impact: 4 }, controls: ['Hot standby in a second region', 'Paper picking fallback rehearsed twice a year'] }),
      r('IT-01', 'Ransomware encrypts file servers', 'Technology', 'CISO', [4, 5], [3, 4], { target: { likelihood: 2, impact: 3 }, previous: { likelihood: 2, impact: 4 }, status: 'mitigating', description: 'Phishing tests show click rates rising after the merger.', controls: ['Immutable backups, tested monthly', 'EDR on every endpoint'], reviewBy: '2026-09-30' }),
      r('IT-02', 'Customer data exposed by a misconfigured bucket', 'Technology', 'CISO', [3, 5], [2, 5], { target: { likelihood: 1, impact: 5 }, previous: { likelihood: 2, impact: 5 }, controls: ['Policy-as-code checks in every pipeline'] }),
      r('IT-03', 'End-of-life ERP version unsupported', 'Technology', 'CIO', [5, 3], [4, 3], { previous: { likelihood: 4, impact: 3 }, status: 'mitigating', reviewBy: '2026-11-15' }),
      r('FN-01', 'Euro exposure on supplier contracts', 'Financial', 'CFO', [4, 3], [2, 3], { previous: { likelihood: 3, impact: 3 }, controls: ['Twelve-month rolling hedge at 75%'] }),
      r('FN-02', 'Largest customer moves to quarterly payment', 'Financial', 'CFO', [3, 4], [3, 3], { previous: { likelihood: 3, impact: 3 } }),
      r('FN-03', 'Covenant breach on the revolving facility', 'Financial', 'CFO', [2, 5], [1, 5], { status: 'accepted', previous: { likelihood: 1, impact: 5 } }),
      r('PE-01', 'Loss of two senior engineers in one quarter', 'People', 'CHRO', [3, 3], [2, 3], { previous: { likelihood: 2, impact: 3 } }),
      r('PE-02', 'Forklift injury on the night shift', 'Health and safety', 'Site Director', [3, 5], [2, 4], { target: { likelihood: 1, impact: 4 }, previous: { likelihood: 2, impact: 4 }, controls: ['Pedestrian walkways', 'Speed limiters on every truck'] }),
      r('PE-03', 'Agency staff not inducted before first shift', 'Health and safety', 'Site Director', [4, 3], [3, 3], { previous: { likelihood: 2, impact: 3 }, reviewBy: '2026-10-01' }),
      r('CO-01', 'New packaging waste levy underestimated', 'Compliance', 'General Counsel', [4, 3], [3, 3], { previous: { likelihood: 3, impact: 3 } }),
      r('CO-02', 'Modern slavery statement not evidenced', 'Compliance', 'General Counsel', [2, 4], [1, 4], { previous: { likelihood: 1, impact: 4 } }),
      r('ST-01', 'Competitor launches same-day delivery in our region', 'Strategic', 'CEO', [3, 4], [3, 4], { target: { likelihood: 3, impact: 2 }, previous: { likelihood: 3, impact: 3 } }),
      r('ST-02', 'Integration of the acquired business slips a year', 'Strategic', 'Integration Director', [4, 4], [3, 4], { previous: { likelihood: 3, impact: 4 }, status: 'mitigating' }),
      r('EN-01', 'Flooding at the river-side site', 'Environmental', '', [2, 5], [2, 4], { controls: ['Flood barriers', 'Stock raised off the floor'] }),
    ],
  };
  matrix.addEventListener('bmxChange', e => {
    if (e.detail.reason === 'move') out.textContent = `${e.detail.riskId} re-scored (${e.detail.view}): likelihood ${e.detail.from.likelihood} → ${e.detail.to.likelihood}, impact ${e.detail.from.impact} → ${e.detail.to.impact}.`;
    else out.textContent = `Register changed: ${e.detail.reason}.`;
  });
  matrix.addEventListener('bmxCellSelect', e => (out.textContent = `Score ${e.detail.score} (${e.detail.band.label}): ${e.detail.risks.length} risk${e.detail.risks.length === 1 ? '' : 's'}.`));
  document.getElementById('ex-risks-check').addEventListener('click', async () => {
    const problems = await matrix.check();
    out.textContent = problems.length ? problems.map(p => `${p.riskId}: ${p.message}`).join(' ') : 'Nothing needs attention.';
  });
  document.getElementById('ex-risks-svg').addEventListener('click', async () => {
    const art = document.getElementById('ex-risks-art');
    const svg = await matrix.exportSvg('Residual risk, Q3');
    art.replaceChildren(new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement);
  });
</script>