@profpowell/vb-project-planning 0.2.1 → 0.2.3

package/README.md

@@ -62,12 +62,14 @@ import '@profpowell/vb-project-planning/kanban-board';
 <user-persona name="Fred" role="Engineer">…</user-persona>
 ```
 
-## Runtime peers: `<drag-surface>` and `<data-table>`
+## Runtime peers from Vanilla Breeze
 
-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.
+Four Vanilla Breeze 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.
+- `<form-field>` — `iron-triangle` and `quality-target` (and `capacity-plan`, which embeds a quality target) wrap their dialog inputs in it for labels and validation messages. Without it, the inputs still work with native validation only.
+- `<chart-wc>` — `burndown-chart` draws its chart with it. It ships in VB's optional charts bundle (`dist/cdn/vanilla-breeze-charts.js` + `.css`), not the main bundle. Without it no chart appears (the data lives in a `<template>`); only the scope-change notes render, so load the charts bundle wherever you use `burndown-chart`.
 
 ## Design-token contract
 
@@ -77,7 +79,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>` / `<data-table>` peers (most consumers do).
+`vanilla-breeze` is declared as an **optional peer dependency**: required if you want VB to supply tokens/themes and the peers above (most consumers do).
 
 ## Relationship to Vanilla Breeze
 
@@ -86,10 +88,13 @@ This package was decomposed out of `vanilla-breeze` core so that framework stays
 ## Development
 
 ```bash
-npm run build   # bundle dist/ (esm + minified, js + css) via esbuild
-npm test        # Playwright component specs (serves the built docs/ on :4331)
+npm run build       # bundle dist/ (esm + minified, js + css) via esbuild
+npm run typecheck   # tsc checkJs over src/ (JSDoc types, no unused locals)
+npm test            # unit tests (src/lib, run with TZ=America/Los_Angeles) + Playwright specs
 ```
 
+The Playwright specs load the demo pages from the committed `docs/` site but serve the component bundle from `dist/`, so run `npm run build` first and they test your current `src/`. Set `VB_TEST_PORT` to run the suite in more than one checkout at once (default 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.

package/dist/vb-project-planning.css

@@ -265,6 +265,9 @@ quadrant-grid {
     border-radius: var(--radius-s, 0.25rem);
     font-size: var(--font-size-sm, 0.875rem);
   }
+  .qg-items > li.qg-pin-item {
+    display: contents;
+  }
   .qg-pinned {
     position: absolute;
     inline-size: max-content;
@@ -332,9 +335,14 @@ risk-register {
   }
   .rr-layout {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--size-l, 1.5rem);
   }
+  .rr-layout > data-table {
+    display: block;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
   @media (width >= 64rem) {
     .rr-layout {
       grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
@@ -353,6 +361,11 @@ traceability-matrix {
   color: var(--color-text, #1a1a1a);
 }
 @scope (traceability-matrix) {
+  :scope > data-table {
+    display: block;
+    max-inline-size: 100%;
+    overflow-x: auto;
+  }
   .tm-label {
     display: block;
     font-size: var(--font-size-xs, 0.75rem);
@@ -402,9 +415,19 @@ traceability-matrix {
     border-block-end: var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));
     cursor: default;
   }
-  td[data-linked] {
+  .tm-cell-btn {
+    all: unset;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-block-size: 1.5em;
+    text-align: inherit;
     cursor: pointer;
   }
+  .tm-cell-btn:focus-visible {
+    outline: 2px solid var(--color-accent, oklch(45% 0.18 260));
+    outline-offset: 2px;
+  }
 }
 [data-state-highlighted]:not(traceability-matrix *) {
   outline: 2px solid var(--color-accent, oklch(45% 0.18 260));
@@ -584,6 +607,38 @@ product-roadmap > section[data-lane] {
     border-start-end-radius: var(--radius-s, 0.25rem);
     border-end-end-radius: var(--radius-s, 0.25rem);
   }
+  .rm-bar:focus-visible {
+    outline: var(--border-width-medium, 2px) solid var(--color-focus, var(--color-interactive, #0066cc));
+    outline-offset: 2px;
+  }
+  .rm-bar[data-dragging] {
+    cursor: grabbing;
+    z-index: 3;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  }
+  .rm-bar-status {
+    flex: none;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 600;
+    opacity: 0.9;
+    white-space: nowrap;
+    padding-inline-end: var(--size-xs, 0.5rem);
+  }
+  .rm-track[data-drop-target] {
+    outline: var(--border-width-medium, 2px) dashed var(--color-interactive, #0066cc);
+    outline-offset: -2px;
+  }
+  .rm-sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .rm-bar[data-status=planned] {
     background: var(--color-info, oklch(60% 0.12 240));
   }
@@ -617,6 +672,9 @@ product-roadmap:not([editable]) .rm-bar {
 product-roadmap:not([editable]) .rm-bar-handle {
   display: none;
 }
+product-roadmap[editable] .rm-bar {
+  touch-action: none;
+}
 @media (prefers-reduced-motion: reduce) {
   product-roadmap .rm-bar {
     transition: none;
@@ -999,6 +1057,13 @@ gantt-chart:not([data-upgraded]) > table {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.gc-task-status {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted, #666666);
+}
 .gc-task-dates {
   position: absolute;
   width: 1px;
@@ -1149,10 +1214,10 @@ gantt-chart:not([data-upgraded]) > table {
   fill: none;
   stroke: var(--color-text-muted, #666666);
   stroke-width: 1.5;
-  marker-end: url(#gc-arrowhead);
 }
 .gc-sr-only {
   position: absolute;
+  table-layout: fixed;
   width: 1px;
   height: 1px;
   padding: 0;
@@ -1209,6 +1274,7 @@ gantt-chart[compact] .gc-group-spacer {
   }
   gantt-chart[data-upgraded] .gc-sr-only {
     position: static;
+    table-layout: auto;
     width: auto;
     height: auto;
     margin: 0;