@profpowell/vb-project-planning 0.1.0 → 0.2.1

package/README.md

@@ -35,7 +35,7 @@ Project- and UX-planning Web Components for the research, planning, and delivery
 npm install @profpowell/vb-project-planning
 ```
 
-Or load from a CDN (after publish):
+Or load from a CDN:
 
 ```html
 <script type="module" src="https://unpkg.com/@profpowell/vb-project-planning/dist/vb-project-planning.min.js"></script>
@@ -62,9 +62,12 @@ import '@profpowell/vb-project-planning/kanban-board';
 <user-persona name="Fred" role="Engineer">…</user-persona>
 ```
 
-## Peer: `<drag-surface>`
+## Runtime peers: `<drag-surface>` and `<data-table>`
 
-The drag-to-reorder components (`kanban-board`, `quadrant-grid`, `impact-effort`, `story-map`) use Vanilla Breeze's `<drag-surface>` element as a runtime peer. It ships with Vanilla Breeze core — load VB on the page and dragging works. Without it, these components still render and function; only drag-reordering is unavailable.
+Two Vanilla Breeze core elements are used as runtime peers. Load VB on the page (the full bundle, or the per-component files under `dist/cdn/components/`) and they light up; without them the components still render, only the composed behaviour is unavailable.
+
+- `<drag-surface>` — the drag-to-reorder components (`kanban-board`, `quadrant-grid`, `impact-effort`, `story-map`). Without it, drag-reordering is off.
+- `<data-table>` — `risk-register` and `traceability-matrix` compose it for the severity rollup, heatmap, and sortable headers. Without it, the plain table renders but those features are inert.
 
 ## Design-token contract
 
@@ -74,7 +77,7 @@ These components are **token-driven**: they read Vanilla Breeze CSS custom prope
 <link rel="stylesheet" href="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.css">
 ```
 
-`vanilla-breeze` is declared as an **optional peer dependency**: required if you want VB to supply tokens/themes and the `<drag-surface>` peer (most consumers do).
+`vanilla-breeze` is declared as an **optional peer dependency**: required if you want VB to supply tokens/themes and the `<drag-surface>` / `<data-table>` peers (most consumers do).
 
 ## Relationship to Vanilla Breeze
 
@@ -84,9 +87,28 @@ This package was decomposed out of `vanilla-breeze` core so that framework stays
 
 ```bash
 npm run build   # bundle dist/ (esm + minified, js + css) via esbuild
+npm test        # Playwright component specs (serves the built docs/ on :4331)
+```
+
+`dist/` is committed: it is what the npm tarball ships and what the docs site vendors. CI fails if `src/` changes without a rebuilt `dist/`.
+
+The docs site lives in `site/` (CookSSG, styled by Vanilla Breeze) and depends on `vanilla-breeze` for tokens/themes and the `<drag-surface>` / `<data-table>` peers. It imports this package's `dist/` directly.
+
+```bash
+cd site && npm ci && npm run dev                  # local preview
+cd site && npm run build && node scripts/publish-docs.js /vb-project-planning   # regenerate docs/
+```
+
+GitHub Pages serves the committed `docs/` folder. The **Publish docs** workflow regenerates and commits it automatically when `site/` or `dist/` change on `main`.
+
+### Releasing
+
+```bash
+npm version minor        # bumps package.json and tags vX.Y.Z
+git push --follow-tags
 ```
 
-Note the demo site depends on `vanilla-breeze` for tokens/themes and the `<drag-surface>` peer, and import this package directly.
+The **Release** workflow builds, runs the tests, publishes to npm with provenance, and creates a GitHub release from the matching `CHANGELOG.md` section. CI publishing needs an `NPM_TOKEN` repository secret. Without one, publish from a logged-in terminal first (`npm publish --access public`) and then push the tag; the workflow sees the version is already on the registry, skips the publish, and still creates the GitHub release.
 
 ## License
 

package/dist/vb-project-planning.css

@@ -1321,20 +1321,76 @@ iron-triangle svg .center:hover .quality-label,
 iron-triangle svg .center:focus-visible .quality-label {
   fill: var(--color-interactive);
 }
+iron-triangle > .iron-triangle-status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--size-s, 0.75rem);
+  margin-block-start: var(--size-xs, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+iron-triangle > .iron-triangle-status .iron-triangle-readout {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+iron-triangle > .iron-triangle-status .iron-triangle-mode {
+  font-size: inherit;
+  font-weight: var(--font-weight-normal, 400);
+  padding-block: 0;
+  padding-inline: var(--size-xs, 0.5rem);
+  border-color: transparent;
+  color: var(--color-text-muted);
+}
+iron-triangle > .iron-triangle-status .iron-triangle-mode:hover {
+  color: var(--color-text);
+}
+iron-triangle > .iron-triangle-status .iron-triangle-mode[aria-pressed=true] {
+  color: var(--color-interactive);
+  text-decoration: underline;
+  text-decoration-thickness: var(--border-width-medium, 2px);
+  text-underline-offset: 0.25em;
+}
+iron-triangle > .iron-triangle-status .iron-triangle-warning {
+  margin: 0;
+  padding: var(--size-2xs, 0.25rem) var(--size-xs, 0.5rem);
+  border-radius: var(--radius-s, 0.25rem);
+  border: var(--border-width-thin, 1px) solid var(--iron-triangle-warning-color, var(--color-warning));
+  color: var(--iron-triangle-warning-color, var(--color-warning));
+  font-weight: var(--font-weight-semibold, 600);
+}
+iron-triangle > .iron-triangle-status .iron-triangle-warning::before {
+  content: "\26a0\fe0e  ";
+}
+iron-triangle > dialog.iron-triangle-dialog [hidden] {
+  display: none;
+}
+iron-triangle > dialog.iron-triangle-dialog .iron-triangle-dialog__hint {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm, 0.875rem);
+}
 iron-triangle:state(over-deadline) svg .triangle {
-  stroke: var(--color-warning);
+  stroke: var(--iron-triangle-warning-color, var(--color-warning));
 }
 iron-triangle:state(unbudgeted) svg .capacity {
-  fill: var(--color-warning);
-}
-iron-triangle:state(manual) svg .quality-label::after {
-  content: " (manual)";
+  fill: var(--iron-triangle-warning-color, var(--color-warning));
 }
 iron-triangle[disabled],
 iron-triangle[locked] {
   opacity: 0.85;
   pointer-events: none;
 }
+iron-triangle[locked]:not([disabled]) svg .center[data-target=quality] {
+  pointer-events: auto;
+}
 iron-triangle > dialog.iron-triangle-dialog {
   inline-size: min(28rem, 92vw);
   border: var(--border-width-thin, 1px) solid var(--color-border);