{"_id":"@annoyingmouse/wc-risk-matrix","_rev":"2-0cb94f4ae4bf8158db672f1ef81c0481","name":"@annoyingmouse/wc-risk-matrix","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@annoyingmouse/wc-risk-matrix","version":"1.0.1","keywords":["risk-matrix","risk-assessment","web-component"],"author":{"name":"Dominic Myers"},"license":"MIT","_id":"@annoyingmouse/wc-risk-matrix@1.0.1","maintainers":[{"name":"annoyingmouse","email":"annoyingmouse@gmail.com"}],"homepage":"https://codeberg.org/annoyingmouse/wc-risk-matrix#readme","bugs":{"url":"https://codeberg.org/annoyingmouse/wc-risk-matrix/issues"},"dist":{"shasum":"b89e11b148bb226884c03ce14752731c50a7568b","tarball":"https://registry.npmjs.org/@annoyingmouse/wc-risk-matrix/-/wc-risk-matrix-1.0.1.tgz","fileCount":9,"integrity":"sha512-Ujt1kQ027w/w4exRkERU6CZvSjOkI6CxcjY/jY/pVDlVDFJK576L5iCJ3bJxgJAgtBXOAgSbRjXqcf2+pQ+x2Q==","signatures":[{"sig":"MEUCIGmGuR79oj8bdp7TgBVc3IhEGG5CGEF+o2eBcRZHG9mZAiEAor07oPKEd0Zvx0e/i7HuFX35+iJwZ0mKDPAOuycQ3aw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54397},"main":"wc-risk-matrix.js","type":"module","gitHead":"864df43e26aa09b2ec83155d60f4fbcda6db626e","scripts":{"test":"node --test","build":"rollup -c"},"_npmUser":{"name":"annoyingmouse","email":"annoyingmouse@gmail.com"},"repository":{"url":"git+https://codeberg.org/annoyingmouse/wc-risk-matrix.git","type":"git"},"_npmVersion":"10.9.8","description":"This web component creates a highly configurable, accessible risk matrix.","directories":{},"_nodeVersion":"22.22.3","_hasShrinkwrap":false,"devDependencies":{"jsdom":"^25.0.1","rollup":"^2.36.2","rollup-plugin-terser":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/wc-risk-matrix_1.0.1_1786169063580_0.3703762975961129","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@annoyingmouse/wc-risk-matrix","version":"1.0.2","description":"This web component creates a highly configurable, accessible risk matrix.","type":"module","main":"wc-risk-matrix.js","scripts":{"test":"node --test","build":"rollup -c"},"repository":{"type":"git","url":"git+https://github.com/annoyingmouse/wc-risk-matrix.git"},"keywords":["risk-matrix","risk-assessment","web-component"],"author":{"name":"Dominic Myers"},"license":"MIT","bugs":{"url":"https://codeberg.org/annoyingmouse/wc-risk-matrix/issues"},"homepage":"https://codeberg.org/annoyingmouse/wc-risk-matrix#readme","devDependencies":{"jsdom":"^25.0.1","rollup":"^2.36.2","rollup-plugin-terser":"^7.0.2"},"_id":"@annoyingmouse/wc-risk-matrix@1.0.2","gitHead":"fa2c547d549afd81a590dde3e6150cc23420ec32","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-apS0g8f3Fu1cAHoeY74rqXrkQ28E5ku3SQ33WhE+F4oYctGv6wptyL/5vJ2EU/CcbSQ84EKnkgJydDapp27R8g==","shasum":"671514c7139fe3fd60e733ff66ee7cf56b8490f6","tarball":"https://registry.npmjs.org/@annoyingmouse/wc-risk-matrix/-/wc-risk-matrix-1.0.2.tgz","fileCount":9,"unpackedSize":55336,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBUWAbo1/wNMinwyp+WDYaSxols5cKzdUX1a9NnzqSaKAiEAneQrIJlY2CSSE1zT8Gw41sA3V38e9fZ4uI9unQP1ZKQ="}]},"_npmUser":{"name":"annoyingmouse","email":"annoyingmouse@gmail.com"},"directories":{},"maintainers":[{"name":"annoyingmouse","email":"annoyingmouse@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wc-risk-matrix_1.0.2_1786170008210_0.3235869164432561"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-08T06:04:23.341Z","modified":"2026-08-08T06:20:08.519Z","1.0.1":"2026-08-08T06:04:23.827Z","1.0.2":"2026-08-08T06:20:08.368Z"},"bugs":{"url":"https://codeberg.org/annoyingmouse/wc-risk-matrix/issues"},"author":{"name":"Dominic Myers"},"license":"MIT","homepage":"https://codeberg.org/annoyingmouse/wc-risk-matrix#readme","keywords":["risk-matrix","risk-assessment","web-component"],"repository":{"type":"git","url":"git+https://github.com/annoyingmouse/wc-risk-matrix.git"},"description":"This web component creates a highly configurable, accessible risk matrix.","maintainers":[{"name":"annoyingmouse","email":"annoyingmouse@gmail.com"}],"readme":"# <wc-risk-matrix>\n\nThis web component creates a highly configurable, accessible risk matrix, with likelihood on the vertical axis and impact on the horizontal axis.\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@annoyingmouse/wc-risk-matrix)\n\n## Demo\n\n<!--\n```\n<custom-element-demo height=\"420\">\n  <template>\n    <link rel=\"stylesheet\" href=\"wc-risk-matrix.css\">\n    <script type=\"module\" src=\"wc-risk-matrix.js\"></script>\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<wc-risk-matrix likelihood=\"3\" impact=\"4\"></wc-risk-matrix>\n```\n\nSee `index.html` in the repository for a fuller live demo, including a non-square matrix, custom colours, and an externally-restyled example.\n\n## Installation\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@annoyingmouse/wc-risk-matrix@1.0.1/wc-risk-matrix.css\">\n<script type=\"module\" src=\"https://unpkg.com/@annoyingmouse/wc-risk-matrix@1.0.1/wc-risk-matrix.js\"></script>\n```\n\nOr, minified:\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@annoyingmouse/wc-risk-matrix@1.0.1/dist/wc-risk-matrix.min.js\"></script>\n```\n\nOr from npm:\n\n```bash\nnpm install @annoyingmouse/wc-risk-matrix\n```\n\n## Usage\n\n```html\n<link rel=\"stylesheet\" href=\"wc-risk-matrix.css\">\n\n<wc-risk-matrix\n  likelihood=\"3\"\n  impact=\"4\"\n  likelihood-steps=\"5\"\n  impact-steps=\"5\"\n></wc-risk-matrix>\n\n<script type=\"module\" src=\"wc-risk-matrix.js\"></script>\n```\n\n## Configuration\n\nThe matrix's dimensions, current selection and labels can all be changed using attributes, or the equivalent JavaScript properties.\n\n| Attribute          | Property          | Type                 | Default      | Description                                          |\n| ------------------- | ------------------ | -------------------- | ------------- | ----------------------------------------------------- |\n| `likelihood`        | `likelihood`        | integer 1&ndash;steps, or `null` | `null`        | Currently selected likelihood                         |\n| `impact`             | `impact`             | integer 1&ndash;steps, or `null` | `null`        | Currently selected impact                              |\n| `likelihood-steps`  | `likelihoodSteps`   | positive integer     | `5`           | Number of likelihood levels (rows)                     |\n| `impact-steps`       | `impactSteps`        | positive integer     | `5`           | Number of impact levels (columns)                      |\n| `likelihood-label`  | `likelihoodLabel`   | string                | `Likelihood`  | Vertical axis label                                     |\n| `impact-label`       | `impactLabel`        | string                | `Impact`      | Horizontal axis label                                   |\n| `colours`            | `colours`            | JSON string / array   | generated     | Score-to-colour mapping, see [Colours](#colours)        |\n\nBoth `likelihood-steps` and `impact-steps` are independent, so the matrix does not need to be square:\n\n```html\n<wc-risk-matrix likelihood-steps=\"3\" impact-steps=\"5\"></wc-risk-matrix>\n```\n\n### Validation\n\nAttributes and properties are validated differently, deliberately:\n\n* **Attributes** are forgiving. A missing or out-of-range `likelihood`/`impact` reads back as `null` (no selection) rather than breaking rendering, and invalid `likelihood-steps`/`impact-steps` fall back to the default of `5`.\n* **Properties**, being an explicit call from your own code, are strict. Setting `matrix.likelihood = 99` on a 5-step matrix throws a `RangeError`, and setting `matrix.likelihoodSteps = 0` throws too.\n\n## Score\n\n```js\nmatrix.score\n```\n\nA read-only, derived property equal to `likelihood * impact`. It is `null` whenever either value is unset. There is no `score` attribute &mdash; the score is always calculated, never stored.\n\n## Value\n\n```js\nmatrix.value\n```\n\nReturns `null` if there is no complete selection, otherwise an aggregate object:\n\n```js\n{\n  likelihood: 3,\n  impact: 4,\n  score: 12,\n  colour: '#fce5cd'\n}\n```\n\nIt can also be assigned as a convenience for setting both axes at once:\n\n```js\nmatrix.value = { likelihood: 3, impact: 4 }\nmatrix.value = null // clears the selection\n```\n\n## Colours\n\nEach score maps to a colour using:\n\n```js\ncolours[score - 1]\n```\n\nThe array needs `likelihoodSteps * impactSteps` entries (one per possible score). Several adjacent scores commonly share a colour:\n\n```js\nmatrix.colours = [\n  '#d9ead3', '#d9ead3', '#d9ead3', '#d9ead3',\n  '#fff2cc', '#fff2cc', '#fff2cc', '#fff2cc', '#fff2cc',\n  '#fce5cd', '#fce5cd', '#fce5cd', '#fce5cd', '#fce5cd',\n  '#f4cccc', '#f4cccc', '#f4cccc', '#f4cccc', '#f4cccc',\n  '#e06666', '#e06666', '#e06666', '#e06666', '#e06666', '#e06666'\n]\n```\n\nColours can also be supplied declaratively as a JSON attribute:\n\n```html\n<wc-risk-matrix colours='[\"#d9ead3\",\"#fff2cc\",\"#fce5cd\",\"#f4cccc\"]'></wc-risk-matrix>\n```\n\nRich values like arrays are more naturally supplied through the JavaScript property; the attribute is a convenience for static, declarative markup.\n\nColours must be valid 3- or 6-digit hex CSS colours (`#fff` or `#ffffff`). Setting the `colours` **property** to something invalid throws a `TypeError`. An invalid `colours` **attribute** (bad JSON, non-array, or invalid colours) is handled gracefully: a warning is logged to the console and generated default colours are used instead, so a typo in markup never breaks the matrix.\n\nIf no colours are supplied, defaults are generated for any matrix size by bucketing each score's percentage of the maximum possible score (`likelihoodSteps * impactSteps`) into a five-colour progression from green through yellow, amber and red to a stronger red.\n\n## Events\n\nActivating a cell (by click, or keyboard Enter/Space, since cells are real `<button>` elements) updates the selection and fires:\n\n```js\nmatrix.addEventListener('risk-select', event => {\n  console.log(event.detail)\n  // { likelihood: 3, impact: 4, score: 12, colour: '#fce5cd' }\n})\n```\n\n`risk-select` is dispatched with `{ bubbles: true, composed: true }`, so it can also be caught via delegation higher up the document. It fires **only** on genuine user activation &mdash; setting `likelihood`, `impact`, `value`, or the corresponding attributes from your own code never dispatches it.\n\n## CSS classes and data attributes\n\nBecause the component renders in light DOM, everything below is a stable target for ordinary CSS, with no `::part` or shadow-DOM API needed:\n\n```css\nwc-risk-matrix .risk-matrix               /* the <table> */\nwc-risk-matrix .risk-matrix__row          /* each <tr> */\nwc-risk-matrix .risk-matrix__cell         /* each <td> */\nwc-risk-matrix .risk-matrix__button       /* each cell's <button> */\nwc-risk-matrix .risk-matrix__button--selected\nwc-risk-matrix .risk-matrix__likelihood   /* row <th scope=\"row\"> */\nwc-risk-matrix .risk-matrix__impact       /* column <th scope=\"col\"> */\nwc-risk-matrix .risk-matrix__corner       /* empty corner <th> cells */\nwc-risk-matrix .risk-matrix__label        /* the \"Likelihood\"/\"Impact\" axis headings */\n```\n\nEvery button also carries `data-*` attributes for styling or inspection:\n\n```css\nwc-risk-matrix [data-score='25'] { }\nwc-risk-matrix [data-likelihood='5'] { }\nwc-risk-matrix [data-impact='4'] { }\n```\n\n## CSS custom properties\n\n```css\n--risk-colour           /* set per-button from the calculated cell colour */\n--risk-border-colour\n--risk-border-radius\n--risk-text-colour\n--risk-focus-colour\n--risk-selected-colour\n```\n\n`wc-risk-matrix.css` sets each button's background from `--risk-colour` rather than an inline background declaration, so consumers stay free to restyle the whole component:\n\n```css\nwc-risk-matrix .risk-matrix__button {\n  border-radius: 50%;\n}\n```\n\n## Accessibility\n\n* The matrix is a real `<table>`, with `<th scope=\"col\">` for impact headings and `<th scope=\"row\">` for likelihood headings.\n* Each cell is a real `<button type=\"button\">`, so keyboard activation (Enter/Space), focus and tab order all come from the browser, not bespoke JavaScript.\n* Risk is never communicated by colour alone: every button displays its numeric score and has an `aria-label` such as `\"Likelihood 3, impact 4, risk score 12\"`.\n* The selected cell exposes `aria-pressed=\"true\"`; every other cell exposes `aria-pressed=\"false\"`.\n* Focus indication is left to the browser's default (or your own CSS via `--risk-focus-colour`/`:focus-visible`), never suppressed outright.\n\n## Light DOM\n\n`<wc-risk-matrix>` deliberately does **not** use Shadow DOM. All rendered markup is ordinary light-DOM content, so it can be styled with plain page CSS, inspected with normal devtools, and integrated into an existing stylesheet without `::part`.\n\n## Form association\n\n`<wc-risk-matrix>` is a form-associated custom element (`static formAssociated = true`), so it can participate in a `<form>` like a native control:\n\n```html\n<form>\n  <wc-risk-matrix name=\"risk\" likelihood=\"3\" impact=\"4\"></wc-risk-matrix>\n</form>\n```\n\nThe submitted value is the numeric **score** as a string (e.g. `\"12\"`), not a `likelihood,impact` pair or a `FormData`-style multi-field submission. A single risk score is the value most consumers actually need on submission; if you need the individual likelihood/impact values server-side too, read `matrix.value` client-side and submit them as separate hidden fields.\n\n## Browser support\n\nTargets current evergreen browsers (native Custom Elements v1, `ElementInternals`/form-associated custom elements). No polyfills are included.\n\n## Examples\n\n```html\n<link rel=\"stylesheet\" href=\"wc-risk-matrix.css\">\n\n<wc-risk-matrix\n  id=\"risk\"\n  likelihood=\"3\"\n  impact=\"4\"\n  likelihood-steps=\"5\"\n  impact-steps=\"5\"\n></wc-risk-matrix>\n\n<script type=\"module\" src=\"wc-risk-matrix.js\"></script>\n\n<script>\n  const risk = document.querySelector('#risk')\n\n  risk.colours = [\n    '#d9ead3', '#d9ead3', '#d9ead3', '#d9ead3',\n    '#fff2cc', '#fff2cc', '#fff2cc', '#fff2cc', '#fff2cc',\n    '#fce5cd', '#fce5cd', '#fce5cd', '#fce5cd', '#fce5cd',\n    '#f4cccc', '#f4cccc', '#f4cccc', '#f4cccc', '#f4cccc',\n    '#e06666', '#e06666', '#e06666', '#e06666', '#e06666', '#e06666'\n  ]\n\n  risk.addEventListener('risk-select', event => {\n    console.log(event.detail)\n  })\n</script>\n```\n\nSee `index.html` for a fuller live demo, including a non-square matrix and an externally-restyled example.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}