@profpowell/vb-project-planning 0.2.1 → 0.2.2

package/README.md

@@ -86,10 +86,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;
@@ -402,9 +405,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 +597,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 +662,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 +1047,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,7 +1204,6 @@ 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;