@profpowell/vb-project-planning 0.1.0

package/src/web-components/empathy-map/styles.js

@@ -0,0 +1,534 @@
+/**
+ * Shadow DOM styles for <empathy-map>
+ *
+ * Theme integration:
+ *   --empathy-map-*  (per-instance author override)
+ *   --color-*        (VB theme token — adapts to data-theme and color mode)
+ *   #fallback        (last-resort hex for component used outside VB)
+ *
+ * VB tokens already swap on color-scheme change and across themes, so we
+ * deliberately DO NOT define our own @media (prefers-color-scheme: dark)
+ * overrides. Quadrant accent colors map to VB semantic tokens:
+ *   says   → --color-info
+ *   thinks → --color-accent
+ *   does   → --color-warning
+ *   feels  → --color-error
+ * Quadrant icon backgrounds derive via color-mix from the same accents
+ * so they shift automatically with the active theme.
+ */
+const styles = `
+  :host {
+    display: block;
+    font-family: var(--_font-sans);
+    line-height: 1.6;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:     var(--empathy-map-bg, var(--color-surface, #ffffff));
+    --_card:   var(--empathy-map-card, var(--color-surface-raised, #f8f9fa));
+    --_border: var(--empathy-map-border, var(--color-border, #e0e0e0));
+    --_muted:  var(--empathy-map-muted, var(--color-text-muted, #666666));
+    --_text:   var(--empathy-map-text, var(--color-text, #1a1a1a));
+    --_radius: var(--empathy-map-radius, var(--radius-xl, 1rem));
+    --_accent: var(--empathy-map-accent, var(--color-interactive, var(--color-primary, #0066cc)));
+    --_link:   var(--empathy-map-link, var(--color-interactive, var(--color-primary, #6366f1)));
+    --_primary: var(--empathy-map-primary, var(--color-primary, #6366f1));
+    --_accent-bar: var(--empathy-map-accent-bar, var(--color-accent, #8b5cf6));
+    --_says:   var(--empathy-map-says, var(--color-info, #3b82f6));
+    --_thinks: var(--empathy-map-thinks, var(--color-accent, #8b5cf6));
+    --_does:   var(--empathy-map-does, var(--color-warning, #f59e0b));
+    --_feels:  var(--empathy-map-feels, var(--color-error, #ef4444));
+    --_says-bg:   color-mix(in oklch, var(--_says)   16%, var(--_card));
+    --_thinks-bg: color-mix(in oklch, var(--_thinks) 16%, var(--_card));
+    --_does-bg:   color-mix(in oklch, var(--_does)   16%, var(--_card));
+    --_feels-bg:  color-mix(in oklch, var(--_feels)  16%, var(--_card));
+    --_chip-type-bg: color-mix(in oklch, var(--_accent-bar) 18%, var(--_card));
+    --_chip-type-fg: var(--_accent-bar);
+    --_font-sans:    var(--empathy-map-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-xs:      var(--empathy-map-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:      var(--empathy-map-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:      var(--empathy-map-font-md, var(--font-size-md, 1rem));
+    --_font-xl:      var(--empathy-map-font-xl, var(--font-size-xl, 1.25rem));
+    --_space-2xs:    var(--empathy-map-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:     var(--empathy-map-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:      var(--empathy-map-space-s, var(--size-s, 0.75rem));
+    --_space-m:      var(--empathy-map-space-m, var(--size-m, 1rem));
+    --_space-l:      var(--empathy-map-space-l, var(--size-l, 1.5rem));
+    --_radius-m:     var(--empathy-map-radius-m, var(--radius-m, 0.5rem));
+    --_radius-full:  var(--empathy-map-radius-full, var(--radius-full, 9999px));
+    --_duration:     var(--empathy-map-duration, var(--duration-normal, 200ms));
+    --_duration-fast: var(--empathy-map-duration-fast, var(--duration-fast, 100ms));
+    --_ease:         var(--empathy-map-ease, var(--ease-default, ease));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* ── Card ─────────────────────────────────────────── */
+  .empathy-map {
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius);
+    overflow: hidden;
+  }
+
+  /* ── Header ───────────────────────────────────────── */
+  .empathy-map__header {
+    padding: 20px 24px 16px 28px;
+    border-block-end: 1px solid var(--_border);
+    position: relative;
+  }
+
+  /* Left accent bar */
+  .empathy-map__header::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 4px;
+    background: linear-gradient(135deg, var(--_primary), var(--_accent-bar));
+  }
+
+  .empathy-map__header-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--_space-s);
+    flex-wrap: wrap;
+    margin-block-end: var(--_space-xs);
+  }
+
+  .empathy-map__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* ── Chips ─────────────────────────────────────────── */
+  .chip {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 2px 9px;
+    border-radius: var(--_radius-full);
+    text-decoration: none;
+    line-height: 1.6;
+  }
+
+  .chip--type {
+    color: var(--_chip-type-fg);
+    background: var(--_chip-type-bg);
+  }
+
+  /* ── Persona ref ──────────────────────────────────── */
+  .persona-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--_muted);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .persona-ref svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
+
+  /* ── Title & summary (slotted content) ────────────── */
+  .empathy-map__title-wrap {
+    margin-block-end: var(--_space-2xs);
+  }
+
+  .empathy-map__title {
+    font-size: var(--_font-xl);
+    font-weight: 700;
+    color: var(--_text);
+    margin: 0;
+  }
+
+  ::slotted([slot="title"]) {
+    font-size: var(--_font-xl) !important;
+    font-weight: 700 !important;
+    color: var(--_text) !important;
+    margin: 0 !important;
+  }
+
+  .empathy-map__summary-wrap {
+    max-width: 72ch;
+  }
+
+  ::slotted([slot="summary"]) {
+    font-size: var(--_font-sm) !important;
+    color: var(--_muted) !important;
+    margin: 0 !important;
+  }
+
+  /* ── Grid ──────────────────────────────────────────── */
+  .empathy-map__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    background: var(--_border);
+  }
+
+  /* ── Quadrant ─────────────────────────────────────── */
+  .quadrant {
+    background: var(--_card);
+    padding: 0;
+    position: relative;
+    display: grid;
+  }
+
+  .quadrant::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    height: 3px;
+  }
+
+  .quadrant--says::before   { background: var(--_says); }
+  .quadrant--thinks::before { background: var(--_thinks); }
+  .quadrant--does::before   { background: var(--_does); }
+  .quadrant--feels::before  { background: var(--_feels); }
+
+  .quadrant__inner {
+    display: grid;
+    padding: 16px 20px;
+    padding-block-start: 19px; /* 16 + 3px top border */
+  }
+
+  /* ── Quadrant header ──────────────────────────────── */
+  .quadrant__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-block-end: var(--_space-s);
+  }
+
+  .quadrant__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--_radius-m);
+    flex-shrink: 0;
+  }
+
+  .quadrant__icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .quadrant--says   .quadrant__icon { background: var(--_says-bg);   color: var(--_says); }
+  .quadrant--thinks .quadrant__icon { background: var(--_thinks-bg); color: var(--_thinks); }
+  .quadrant--does   .quadrant__icon { background: var(--_does-bg);   color: var(--_does); }
+  .quadrant--feels  .quadrant__icon { background: var(--_feels-bg);  color: var(--_feels); }
+
+  .quadrant__label {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--_muted);
+    flex: 1;
+  }
+
+  /* ── Quadrant content / faces ─────────────────────── */
+  .quadrant__face {
+    grid-area: 1 / 1;
+    transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+  }
+
+  .quadrant__face--front {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .quadrant__face--back {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+  }
+
+  [data-editing] .quadrant__face--front {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+  }
+
+  [data-editing] .quadrant__face--back {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+
+  .quadrant__content {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--_text);
+  }
+
+  .quadrant__content p {
+    margin-block: 0 6px;
+  }
+
+  .quadrant__content p:last-child {
+    margin-block-end: 0;
+  }
+
+  /* ── Slot fallback / placeholder ──────────────────── */
+  .placeholder {
+    font-size: 13px;
+    color: var(--_muted);
+    font-style: italic;
+  }
+
+  ::slotted(ul),
+  ::slotted(ol) {
+    margin: 0;
+    padding-inline-start: 1.4em;
+    font-size: 14px;
+    line-height: 1.55;
+  }
+
+  /* ── Emotion tags ─────────────────────────────────── */
+  .emotion-tag {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 10px;
+    border-radius: var(--_radius-full);
+    margin-block-end: 6px;
+    margin-inline-end: 4px;
+    background: color-mix(in srgb, var(--ec, #94a3b8) 15%, transparent);
+    color: var(--ec, #94a3b8);
+    border: 1px solid color-mix(in srgb, var(--ec, #94a3b8) 30%, transparent);
+  }
+
+  /* ── Edit / Done buttons ──────────────────────────── */
+  .quadrant__edit-btn,
+  .quadrant__done-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    background: var(--_bg);
+    color: var(--_muted);
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
+  }
+
+  .quadrant__edit-btn svg,
+  .quadrant__done-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .quadrant__edit-btn:hover,
+  .quadrant__done-btn:hover {
+    background: var(--_border);
+    color: var(--_text);
+  }
+
+  .quadrant__done-btn {
+    margin-block-start: 8px;
+    width: auto;
+    padding: 0 12px;
+    font-size: 12px;
+    font-weight: 600;
+    gap: 4px;
+  }
+
+  /* ── Editor textarea ──────────────────────────────── */
+  .quadrant__editor {
+    width: 100%;
+    min-height: 100px;
+    padding: 10px 12px;
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--_text);
+    background: var(--_bg);
+    resize: vertical;
+  }
+
+  .quadrant__editor:focus {
+    outline: 2px solid var(--_accent);
+    outline-offset: -1px;
+    border-color: var(--_accent);
+  }
+
+  /* ── Footer ───────────────────────────────────────── */
+  .empathy-map__footer {
+    display: flex;
+    gap: 1px;
+    background: var(--_border);
+    border-block-start: 1px solid var(--_border);
+  }
+
+  .summary-row {
+    flex: 1;
+    background: var(--_card);
+    padding: 16px 20px;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .summary-row__icon {
+    line-height: 1;
+    flex-shrink: 0;
+    margin-block-start: 2px;
+    color: var(--_muted);
+  }
+
+  .summary-row__icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .summary-row__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .summary-row__label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--_muted);
+    margin-block-end: 4px;
+  }
+
+  .summary-row__content {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--_text);
+  }
+
+  .summary-row__content p {
+    margin-block: 0 4px;
+  }
+
+  .summary-row__content p:last-child {
+    margin-block-end: 0;
+  }
+
+  /* ── Compact variant ──────────────────────────────── */
+  :host([compact]) .empathy-map__header {
+    padding: 14px 18px 12px 22px;
+  }
+
+  :host([compact]) .empathy-map__title {
+    font-size: 16px;
+  }
+
+  :host([compact]) .empathy-map__summary {
+    font-size: 12px;
+  }
+
+  :host([compact]) .quadrant__inner {
+    padding: 12px 14px;
+    padding-block-start: 15px;
+  }
+
+  :host([compact]) .quadrant__icon {
+    width: 26px;
+    height: 26px;
+    font-size: 13px;
+    border-radius: 6px;
+  }
+
+  :host([compact]) .quadrant__label {
+    font-size: 11px;
+  }
+
+  :host([compact]) .quadrant__content {
+    font-size: 12px;
+  }
+
+  :host([compact]) .summary-row {
+    padding: 12px 14px;
+  }
+
+  :host([compact]) .summary-row__content {
+    font-size: 12px;
+  }
+
+  /* ── Responsive ───────────────────────────────────── */
+  @container (max-width: 500px) {
+    .empathy-map__grid {
+      grid-template-columns: 1fr;
+    }
+
+    .empathy-map__header {
+      padding: 14px 16px 12px 20px;
+    }
+
+    .empathy-map__title {
+      font-size: 17px;
+    }
+
+    .empathy-map__footer {
+      flex-direction: column;
+    }
+  }
+
+  /* ── Motion ───────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    .quadrant__face {
+      transition: none;
+    }
+
+    .quadrant__edit-btn,
+    .quadrant__done-btn {
+      transition: none;
+    }
+  }
+
+  /* ── Print ────────────────────────────────────────── */
+  @media print {
+    .empathy-map {
+      break-inside: avoid;
+      border-color: var(--_border);
+    }
+
+    .quadrant__edit-btn,
+    .quadrant__done-btn {
+      display: none;
+    }
+
+    .quadrant__face--back {
+      display: none;
+    }
+
+    .empathy-map__footer {
+      flex-direction: column;
+    }
+  }
+
+  /* ── Utility ──────────────────────────────────────── */
+  .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+  code { font-family: var(--font-mono, Monaco, Menlo, monospace); font-size: 0.88em; }
+`;
+
+export { styles };

package/src/web-components/gantt-chart/README.md

@@ -0,0 +1,91 @@
+---
+title: "Gantt Chart Specification"
+component: gantt-chart
+version: 1.0.0
+status: stable
+---
+
+# Gantt Chart
+
+HTML-first project schedule visualization using native table, progress, and time elements.
+
+## Purpose
+
+Progressively enhances a semantic `<table>` into an interactive Gantt timeline. Without JavaScript, users see a fully readable data table with progress bars. With JavaScript, the component renders a visual timeline with positioned bars, milestones, groups, and a today marker.
+
+Part of the **UX Planning Pack**.
+
+## Static HTML Form
+
+```html
+<gantt-chart title="Q2 Roadmap" show-today show-progress>
+  <table>
+    <thead>
+      <tr><th>Task</th><th>Start</th><th>End</th><th>Progress</th></tr>
+    </thead>
+    <tbody>
+      <tr data-task-id="design" data-group="Design" data-status="in-progress">
+        <td>Design system</td>
+        <td><time datetime="2026-04-01">Apr 1</time></td>
+        <td><time datetime="2026-04-15">Apr 15</time></td>
+        <td><progress value="75" max="100">75%</progress></td>
+      </tr>
+    </tbody>
+  </table>
+</gantt-chart>
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `title` | string | — | Chart heading |
+| `src` | string | — | JSON data URL |
+| `view` | string | `"auto"` | `auto`, `day`, `week`, `month`, `quarter` |
+| `show-today` | boolean | — | Show today marker |
+| `show-progress` | boolean | — | Show progress fill |
+| `show-dependencies` | boolean | — | Draw dependency arrows |
+| `compact` | boolean | — | Reduced spacing |
+
+### Child Attributes (on `<tr>`)
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `data-task-id` | string | Unique task ID |
+| `data-group` | string | Swim lane group |
+| `data-depends` | string | Comma-separated dependency IDs |
+| `data-status` | string | `not-started`, `in-progress`, `done`, `blocked` |
+| `data-assignee` | string | Assignee name |
+| `data-milestone` | boolean | Render as diamond marker |
+| `data-color` | string | Custom bar color |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `gantt-chart:ready` | `{ taskCount, dateRange }` | After render |
+| `gantt-chart:task-click` | `{ task }` | Bar clicked |
+
+## Failure Modes
+
+- **No JavaScript:** Table renders normally with progress bars and time elements.
+- **No CSS:** Table renders as default HTML table.
+- **Keyboard Only:** Tab navigates bars; Enter triggers click event.
+- **Screen Reader:** Original table is preserved (visually hidden) for full table semantics.
+
+## Accessibility
+
+- Original table stays in DOM (sr-only) for screen reader access
+- Bars have `role="img"` with descriptive `aria-label`
+- Bars are focusable with `tabindex="0"`
+- `aria-live="polite"` region announces task selection
+- `prefers-reduced-motion: reduce` disables transitions
+- Print shows the original table, hides the visual chart
+
+## CSS Custom Properties
+
+| Token | Description |
+|-------|-------------|
+| `--gc-task-width` | Left panel width (default: 180px) |
+| `--gc-row-height` | Row height (default: 36px) |
+| `--gc-bar-color` | Per-bar color override |

package/src/web-components/gantt-chart/api.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "gantt-chart",
+  "type": "web-component",
+  "description": "HTML-first Gantt chart using native table, progress, and time elements with progressive enhancement to an interactive timeline",
+  "htmlvalidate": { "flow": true, "permittedContent": ["@flow"] },
+  "attributes": [
+    { "name": "title",             "kind": "host-api", "purpose": "config", "type": "string",  "description": "Chart heading" },
+    { "name": "src",               "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to JSON task data" },
+    { "name": "view",              "kind": "host-api", "purpose": "config", "type": "string",  "description": "Timeline granularity: auto | day | week | month | quarter" },
+    { "name": "show-today",        "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Show vertical today marker line" },
+    { "name": "show-progress",     "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Show progress fill inside bars" },
+    { "name": "show-dependencies", "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Draw dependency arrows between tasks" },
+    { "name": "compact",           "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduced spacing variant" }
+  ],
+  "events": [
+    { "name": "gantt-chart:ready",      "detail": "{ taskCount, dateRange }",  "description": "Fired after initial render" },
+    { "name": "gantt-chart:task-click",  "detail": "{ task }",                  "description": "Fired when a task bar is clicked" }
+  ]
+}