@profpowell/vb-project-planning 0.1.0 → 0.2.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@profpowell/vb-project-planning",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Project- and UX-planning Web Components for Vanilla Breeze: personas, stories, journeys, empathy maps, impact/effort and quadrant grids, risk and traceability matrices, burndown, roadmap, kanban, story map, gantt, review surface, work items, ADRs, iron triangle, capacity plans, quality targets, and requirement cards.",
   "license": "MIT",
-  "author": "Patrick Powell",
+  "author": "Thomas A. Powell",
   "type": "module",
   "homepage": "https://github.com/ProfPowell/vb-project-planning#readme",
   "repository": {
@@ -63,10 +63,11 @@
     "build:js": "esbuild src/index.js --bundle --format=esm --outfile=dist/vb-project-planning.js && esbuild src/index.js --bundle --format=esm --minify --outfile=dist/vb-project-planning.min.js",
     "build:css": "esbuild src/index.css --bundle --outfile=dist/vb-project-planning.css && esbuild src/index.css --bundle --minify --outfile=dist/vb-project-planning.min.css",
     "prepublishOnly": "npm run build",
-    "test:components": "playwright test"
+    "test:components": "playwright test",
+    "test": "playwright test"
   },
   "peerDependencies": {
-    "vanilla-breeze": ">=0.1.0"
+    "vanilla-breeze": ">=0.3.0"
   },
   "peerDependenciesMeta": {
     "vanilla-breeze": {

package/src/web-components/iron-triangle/api.json

@@ -2,7 +2,7 @@
   "$schema": "../../../schemas/api.schema.json",
   "element": "iron-triangle",
   "type": "web-component",
-  "description": "Triangle-as-UI project-shape constraint surface. Three vertex hit-targets (Scope/Time/Cost) open native <dialog> editors; the center 'Quality' target fires iron-triangle:open-quality with a data-quality-href fallback. Computes capacityPoints from sprintWeeks × sprintCount × teamFTE × focusFactor. Form-associated.",
+  "description": "Triangle-as-UI project-shape constraint surface. Three vertex hit-targets (Scope/Time/Cost) open native <dialog> editors; the center 'Quality' target fires iron-triangle:open-quality with a data-quality-href fallback. Computes capacityPoints from sprintWeeks × sprintCount × teamFTE × focusFactor. Form-associated. Renders a status strip below the SVG: a visually-hidden <output aria-live=polite> capacity readout, a <button aria-pressed> formula/manual switch that opens a manual-capacity dialog, and a visible 'Deadline has passed' warning.",
   "htmlvalidate": {
     "flow": true,
     "permittedContent": ["@flow"]

package/src/web-components/iron-triangle/logic.js

@@ -16,6 +16,14 @@
  * markup needed in the host page. The component is form-associated;
  * the value serializes as JSON via setFormValue().
  *
+ * Accessibility hooks (rendered below the SVG in `.iron-triangle-status`):
+ *   - an `<output aria-live="polite">` capacity readout (visually hidden)
+ *     that announces capacity, mode, and any deadline warning;
+ *   - the formula / manual switch as a real `<button aria-pressed>` that
+ *     opens a manual-capacity dialog;
+ *   - a visible "Deadline has passed" warning so the over-deadline state
+ *     is never colour-only.
+ *
  * Optional: pass a `data-quality-summary` attribute or set the
  * `qualitySummary` property to surface the bound NFR compass's
  * decision on hover (e.g. "3 critical: perf, sec, a11y").
@@ -88,6 +96,12 @@ class IronTriangle extends VBElement {
   #qualitySummary = '';
   /** @type {Record<string, HTMLDialogElement>} */
   #dialogs = {};
+  /** @type {HTMLOutputElement | null} */
+  #readout = null;
+  /** @type {HTMLButtonElement | null} */
+  #modeButton = null;
+  /** @type {HTMLElement | null} */
+  #deadlineWarning = null;
 
   constructor() {
     super();
@@ -100,7 +114,9 @@ class IronTriangle extends VBElement {
     this.#qualitySummary = this.getAttribute('data-quality-summary') || '';
     // Seed initial value from FIELD_DEFS so the formula has something to chew on.
     this.#seedDefaults();
+    this.#renderStatus();
     this.#renderViz();
+    this.#syncStatus();
 
     this.listen(this, 'click', (e) => this.#onClick(e));
     this.listen(this, 'keydown', (e) => this.#onKeydown(e));
@@ -363,6 +379,7 @@ class IronTriangle extends VBElement {
 
     this.#renderViz();
     this.#syncStateFlags();
+    this.#syncStatus();
     this.#publishFormValue();
 
     this.dispatchEvent(new CustomEvent('iron-triangle:change', {
@@ -407,11 +424,151 @@ class IronTriangle extends VBElement {
 
   #syncDisabledLocked() {
     const off = this.hasAttribute('disabled') || this.hasAttribute('locked');
+    if (this.#modeButton) this.#modeButton.disabled = off;
     for (const dialog of Object.values(this.#dialogs)) {
       for (const el of dialog.querySelectorAll('input, select, textarea, button')) /** @type {any} */ (el).disabled = off;
     }
   }
 
+  // ── Internal: status strip (a11y hooks) ──────────────────────────
+
+  /**
+   * Builds the status strip once: live readout, mode toggle, deadline
+   * warning. Content is refreshed by #syncStatus() on every recompute.
+   */
+  #renderStatus() {
+    if (this.querySelector(':scope > .iron-triangle-status')) return;
+    const strip = document.createElement('div');
+    strip.className = 'iron-triangle-status';
+
+    const readout = document.createElement('output');
+    readout.className = 'iron-triangle-readout';
+    readout.setAttribute('aria-live', 'polite');
+    readout.setAttribute('aria-atomic', 'true');
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'iron-triangle-mode';
+    button.setAttribute('aria-pressed', 'false');
+    button.textContent = 'Manual capacity';
+    button.addEventListener('click', () => this.#openCapacityDialog());
+
+    const warning = document.createElement('p');
+    warning.className = 'iron-triangle-warning';
+    warning.setAttribute('data-warning', 'over-deadline');
+    warning.hidden = true;
+
+    strip.append(readout, button, warning);
+    const svg = this.querySelector(':scope > svg');
+    if (svg) svg.after(strip);
+    else this.prepend(strip);
+
+    this.#readout = readout;
+    this.#modeButton = button;
+    this.#deadlineWarning = warning;
+    this.#syncDisabledLocked();
+  }
+
+  #syncStatus() {
+    if (!this.#readout) return;
+    const { capacityPoints, capacitySource } = this.#value;
+    const manual = capacitySource === 'manual';
+    const deadline = this.#value.time?.deadline;
+    const overDeadline = this.matches(':state(over-deadline)');
+
+    const parts = [];
+    parts.push(capacityPoints > 0
+      ? `Capacity: ${capacityPoints} points (${manual ? 'manual' : 'formula'}).`
+      : 'Capacity: not yet budgeted.');
+    if (overDeadline) parts.push(`Deadline has passed (${deadline}).`);
+    const text = parts.join(' ');
+    if (this.#readout.textContent !== text) this.#readout.textContent = text;
+
+    if (this.#modeButton) {
+      this.#modeButton.setAttribute('aria-pressed', manual ? 'true' : 'false');
+      this.#modeButton.setAttribute('aria-label',
+        manual ? `Manual capacity: ${capacityPoints} points. Activate to edit or return to the formula.`
+               : 'Manual capacity. Activate to override the formula with a fixed number.');
+    }
+    if (this.#deadlineWarning) {
+      this.#deadlineWarning.textContent = overDeadline ? `Deadline has passed (${deadline})` : '';
+      this.#deadlineWarning.hidden = !overDeadline;
+    }
+  }
+
+  #openCapacityDialog() {
+    const dialog = this.#ensureCapacityDialog();
+    const input = /** @type {HTMLInputElement} */ (dialog.querySelector('[name="capacity.points"]'));
+    input.value = String(this.#value.capacityPoints > 0 ? this.#value.capacityPoints : 1);
+    const useFormula = /** @type {HTMLButtonElement} */ (dialog.querySelector('button[value="formula"]'));
+    useFormula.hidden = this.#value.capacitySource !== 'manual';
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+  }
+
+  #ensureCapacityDialog() {
+    if (this.#dialogs.capacity) return this.#dialogs.capacity;
+    const dialog = document.createElement('dialog');
+    dialog.className = 'iron-triangle-dialog iron-triangle-dialog--capacity';
+    dialog.setAttribute('aria-label', 'Capacity — manual override');
+
+    const form = document.createElement('form');
+    form.method = 'dialog';
+    form.setAttribute('data-layout', 'stack');
+    form.setAttribute('data-layout-gap', 'm');
+
+    const heading = document.createElement('h3');
+    heading.textContent = 'Manual capacity';
+    form.append(heading);
+
+    const hint = document.createElement('p');
+    hint.className = 'iron-triangle-dialog__hint';
+    hint.textContent = 'Fix the capacity to a number the team committed to. The Time / Cost / Scope inputs stay saved but stop driving the readout.';
+    form.append(hint);
+
+    form.append(buildFormField('capacity', {
+      key: 'points', label: 'Capacity (points)', type: 'number', min: 1, step: 1, width: '6rem',
+    }, this.#value.capacityPoints));
+
+    const actions = document.createElement('div');
+    actions.setAttribute('data-layout', 'cluster');
+    actions.setAttribute('data-layout-gap', 's');
+    actions.setAttribute('data-layout-justify', 'end');
+    const useFormula = document.createElement('button');
+    useFormula.type = 'button';
+    useFormula.value = 'formula';
+    useFormula.textContent = 'Use formula';
+    useFormula.addEventListener('click', () => {
+      dialog.close('formula');
+      this.setFormula();
+    });
+    const cancel = document.createElement('button');
+    cancel.type = 'button';
+    cancel.value = 'cancel';
+    cancel.textContent = 'Cancel';
+    cancel.addEventListener('click', () => dialog.close('cancel'));
+    const save = document.createElement('button');
+    save.type = 'submit';
+    save.value = 'save';
+    save.textContent = 'Save';
+    actions.append(useFormula, cancel, save);
+    form.append(actions);
+
+    dialog.append(form);
+    this.append(dialog);
+    this.#dialogs.capacity = dialog;
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const input = /** @type {HTMLInputElement} */ (form.querySelector('[name="capacity.points"]'));
+      const n = Number(input.value);
+      dialog.close('save');
+      if (Number.isFinite(n) && n > 0) this.setManual(n);
+    });
+
+    return dialog;
+  }
+
   // ── Internal: revise() field accessors ───────────────────────────
 
   #getField(path) {

package/src/web-components/iron-triangle/styles.css

@@ -124,11 +124,68 @@ iron-triangle svg .center:focus-visible .quality-label {
   fill: var(--color-interactive);
 }
 
+/* ── Status strip: live readout, mode toggle, deadline warning ─── */
+
+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);
+}
+
+/* The SVG already shows the number; the <output> exists for assistive
+   tech (aria-live) and stays visually hidden. */
+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;
+}
+
+iron-triangle > .iron-triangle-status .iron-triangle-mode[aria-pressed="true"] {
+  border-color: var(--color-interactive);
+  color: var(--color-interactive);
+}
+
+/* Visible, text-bearing warning — never colour-only. */
+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  "; /* ⚠ text presentation */
+}
+
+/* VB's button rules set display; keep the hidden attribute authoritative. */
+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);
+}
+
 /* ── State hooks ──────────────────────────────────────────────── */
 
-iron-triangle:state(over-deadline) svg .triangle { stroke: var(--color-warning); }
-iron-triangle:state(unbudgeted)    svg .capacity { fill: var(--color-warning); }
-iron-triangle:state(manual)        svg .quality-label::after { content: " (manual)"; }
+iron-triangle:state(over-deadline) svg .triangle { stroke: var(--iron-triangle-warning-color, var(--color-warning)); }
+iron-triangle:state(unbudgeted)    svg .capacity { fill: var(--iron-triangle-warning-color, var(--color-warning)); }
 
 iron-triangle[disabled],
 iron-triangle[locked] {

package/src/web-components/product-roadmap/logic.js

@@ -37,7 +37,28 @@ import { VBElement } from '../../lib/vb-element.js';
 const MS_PER_DAY = 86_400_000;
 
 class Roadmap extends VBElement {
+  static get observedAttributes() {
+    return ['start', 'end', 'view', 'editable', 'today-marker'];
+  }
+
   setup() {
+    if (!this.#readConfig()) return false;
+
+    /* Snapshot original lane sections (auto-discovery) before we wipe
+       the host. We do not modify the original elements until/unless
+       drag interactions change their data-* attributes. */
+    const lanes = [...this.querySelectorAll(':scope > section[data-lane]')];
+    if (!lanes.length) {
+      console.warn('product-roadmap: no <section data-lane> children found');
+      return false;
+    }
+    this.#sourceLanes = lanes;
+    this.#render();
+    return true;
+  }
+
+  /** Parse start/end/view/editable from attributes. Returns false when invalid. */
+  #readConfig() {
     const startAttr = this.getAttribute('start');
     const endAttr   = this.getAttribute('end');
     if (!startAttr || !endAttr) {
@@ -55,22 +76,13 @@ class Roadmap extends VBElement {
     this.#totalMs = end.getTime() - start.getTime();
     this.#view = (this.getAttribute('view') === 'month') ? 'month' : 'quarter';
     this.#editable = this.hasAttribute('editable');
-
-    /* Snapshot original lane sections (auto-discovery) before we wipe
-       the host. We do not modify the original elements until/unless
-       drag interactions change their data-* attributes. */
-    const lanes = [...this.querySelectorAll(':scope > section[data-lane]')];
-    if (!lanes.length) {
-      console.warn('product-roadmap: no <section data-lane> children found');
-      return false;
-    }
-    this.#sourceLanes = lanes;
-    this.#render();
     return true;
   }
 
-  attributeChangedCallback() {
-    if (this.isConnected && this.#sourceLanes.length) this.#render();
+  attributeChangedCallback(_name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.isConnected || !this.#sourceLanes.length) return;
+    if (this.#readConfig()) this.#render();
   }
 
   #render() {

package/src/web-components/requirement-card/logic.js

@@ -125,7 +125,7 @@ class RequirementCard extends VBElement {
   }
 
   #syncSlot(name, slot) {
-    const hasContent = !!slot && slot.assignedNodes({ flatten: true }).some(n =>
+    const hasContent = !!slot && slot.assignedNodes().some(n =>
       n.nodeType === Node.ELEMENT_NODE ||
       (n.nodeType === Node.TEXT_NODE && n.textContent.trim().length > 0)
     );

package/src/web-components/user-persona/logic.js

@@ -105,7 +105,7 @@ class UserPersona extends HTMLElement {
     if (!this.id) return [];
     const root = /** @type {ParentNode} */ (this.getRootNode());
     const scope = /** @type {ParentNode} */ (/** @type {any} */ (root).querySelectorAll ? root : document);
-    return Array.from(scope.querySelectorAll(`user-story[persona-id="${cssEscape(this.id)}"]`));
+    return Array.from(scope.querySelectorAll(`user-story[persona-id="${cssEscape(this.id)}"]:not([data-detail-clone])`));
   }
 
   #cacheSlotValues() {

package/src/web-components/user-story/logic.js

@@ -210,7 +210,7 @@ class UserStory extends HTMLElement {
 
   connectedCallback() {
     this.#cacheSlotValues();
-    if (this.storyId && !this.id) this.id = this.storyId;
+    if (this.storyId && !this.id && !this.hasAttribute('data-detail-clone')) this.id = this.storyId;
     if (this.hasAttribute('src')) {
       this._loadSrc(this.getAttribute('src'));
     }
@@ -410,6 +410,7 @@ class UserStory extends HTMLElement {
     const hasSlottedContent = [...this.children].some(c => c.getAttribute('slot') && c.tagName !== 'DIALOG');
     full.setAttribute('detail', hasSlottedContent ? 'full' : 'compact');
     full.removeAttribute('id');
+    full.setAttribute('data-detail-clone', ''); // keep the clone out of id/persona lookups
     for (const child of [...this.children]) {
       if (child.tagName === 'DIALOG') continue;
       full.appendChild(child.cloneNode(true));