@profpowell/vb-project-planning 0.1.0

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

@@ -0,0 +1,332 @@
+/**
+ * Shadow DOM styles for user-story component
+ *
+ * 3-tier token pattern:
+ *   var(--user-story-*, var(--color-*, fallback))
+ */
+const styles = `
+:host {
+  --_bg:        var(--user-story-bg, var(--color-surface, #ffffff));
+  --_text:      var(--user-story-text, var(--color-text, #1a1a1a));
+  --_muted:     var(--user-story-muted, var(--color-text-muted, #666));
+  --_border:    var(--user-story-border, var(--color-border, #e0e0e0));
+  --_accent:    var(--user-story-accent, var(--color-interactive, #0066cc));
+  --_card-bg:   var(--user-story-card-bg, var(--color-surface-raised, #f8f9fa));
+  --_highlight: var(--user-story-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
+  --_radius:    var(--user-story-radius, var(--radius-l, 0.75rem));
+  --_shadow:       var(--user-story-shadow, var(--shadow-sm));
+  --_shadow-hover: var(--user-story-shadow-hover, var(--shadow-md));
+  --_duration:     var(--user-story-duration, var(--duration-normal, 200ms));
+  --_ease:         var(--user-story-ease, var(--ease-default, ease));
+  --_space-xs:     var(--user-story-space-xs, var(--size-xs, 0.5rem));
+  --_space-s:      var(--user-story-space-s, var(--size-s, 0.75rem));
+  --_space-m:      var(--user-story-space-m, var(--size-m, 1rem));
+  --_font-xs:      var(--user-story-font-xs, var(--font-size-xs, 0.75rem));
+  --_font-sm:      var(--user-story-font-sm, var(--font-size-sm, 0.875rem));
+  --_font-md:      var(--user-story-font-md, var(--font-size-md, 1rem));
+  --_font-lg:      var(--user-story-font-lg, var(--font-size-lg, 1.125rem));
+  --_font-mono:    var(--user-story-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+  --_radius-s:     var(--user-story-radius-s, var(--radius-s, 0.25rem));
+  --_radius-full:  var(--user-story-radius-full, var(--radius-full, 9999px));
+
+  display: block;
+  font-family: var(--user-story-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+}
+
+.story-card {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  overflow: hidden;
+  box-shadow: var(--_shadow);
+  transition: box-shadow var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+}
+
+.story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+.story-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--_space-s) var(--_space-m);
+  background: var(--_card-bg);
+  border-bottom: 1px solid var(--_border);
+  gap: var(--_space-s);
+  flex-wrap: wrap;
+}
+
+.story-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  flex-wrap: wrap;
+}
+
+.story-id {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  font-family: var(--_font-mono);
+}
+
+.epic-badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--_radius-s);
+  background: var(--_highlight);
+  color: var(--_accent);
+  font-weight: 500;
+}
+
+.story-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+}
+
+.priority-badge,
+.status-badge {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--_radius-full);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.points-badge {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: white;
+  font-size: var(--_font-xs);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.story-body {
+  padding: 20px;
+}
+
+:host([compact]) .story-body {
+  padding: var(--_space-m);
+}
+
+.story-statement {
+  font-size: var(--_font-lg);
+  line-height: 1.6;
+  color: var(--_text);
+  margin: 0;
+}
+
+:host([compact]) .story-statement {
+  font-size: 15px;
+}
+
+.keyword {
+  font-weight: 600;
+  color: var(--_accent);
+}
+
+.persona-text {
+  background: var(--_highlight);
+  padding: 2px 6px;
+  border-radius: var(--_radius-s);
+  font-weight: 500;
+}
+
+.persona-text--link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--_accent);
+  text-decoration: none;
+}
+
+.persona-text--link svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+.persona-text--link:hover {
+  text-decoration: underline;
+}
+
+.action-text {
+  font-weight: 500;
+}
+
+.benefit-text {
+  font-style: italic;
+  color: var(--_muted);
+}
+
+.story-sections {
+  border-top: 1px solid var(--_border);
+}
+
+.section {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--_border);
+}
+
+.section:last-child {
+  border-bottom: none;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  margin-bottom: var(--_space-s);
+}
+
+.section-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--_accent);
+}
+
+.section-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: white;
+}
+
+/* Semantic section-icon colors — driven by VB theme tokens so they shift
+   with the active theme rather than fighting it. */
+.section-icon.acceptance { background: var(--color-success, #22c55e); }
+.section-icon.notes      { background: var(--color-warning, #f59e0b); }
+.section-icon.tasks      { background: var(--color-accent,  #8b5cf6); }
+
+.section-title {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  color: var(--_text);
+  font-size: var(--_font-sm);
+  line-height: 1.6;
+}
+
+/* Slotted content styling */
+.section-content ::slotted(ul),
+.section-content ::slotted(ol) {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.section-content ::slotted(li) {
+  margin-bottom: 6px;
+}
+
+.section-content ::slotted(p) {
+  margin: 0;
+}
+
+/* Empty-slot fallback */
+.slot-fallback {
+  color: var(--_muted);
+  font-style: italic;
+}
+
+@media (max-width: 480px) {
+  .story-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .story-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .story-card {
+    transition: none;
+  }
+}
+
+/* ── Slotted title (minimal mode heading) ──────────── */
+.story-title-wrap {
+  margin: 0;
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--_font-sm) !important;
+  font-weight: 600 !important;
+  color: var(--_text) !important;
+  margin: 0 !important;
+}
+
+.story-title-fallback {
+  font-size: var(--_font-sm);
+  font-weight: 600;
+  color: var(--_text);
+}
+
+/* Minimal detail level */
+:host([detail="minimal"]) .story-card {
+  padding: var(--_space-xs);
+}
+
+:host([detail="minimal"]) .story-header {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-sections {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-body {
+  padding: var(--_space-xs) var(--_space-s);
+}
+
+:host([detail="minimal"]) .story-card {
+  cursor: pointer;
+}
+
+:host([detail="minimal"]) .story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+:host([detail="minimal"]) .story-card:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+:host([detail="minimal"]) .story-id {
+  display: block;
+  margin-bottom: var(--_space-2xs);
+}
+
+:host([detail="minimal"]) .benefit-text {
+  display: none;
+}
+
+/* Compact detail level — hide empty sections */
+:host([detail="compact"]) .section[data-empty] {
+  display: none;
+}
+
+:host([detail="compact"]) .slot-fallback {
+  display: none;
+}
+`;
+
+export { styles };

package/src/web-components/work-item/README.md

@@ -0,0 +1,85 @@
+---
+title: "Work Item Specification"
+component: work-item
+version: 1.0.0
+status: stable
+---
+
+# Work Item
+
+General-purpose work unit card for tasks, bugs, chores, spikes, and features.
+
+## Purpose
+
+The engineering sibling of `<user-story>`. While user stories express product needs in agile format ("As a... I want... so that..."), work items represent the engineering work that implements those stories — or standalone work that doesn't map to any story (tech debt, bugs, ops, research).
+
+Part of the **UX Planning Pack**. Works as a child of `<kanban-board>`, `<story-map>`, `<impact-effort>`, or standalone.
+
+## Static HTML Form
+
+```html
+<work-item
+  item-id="PROJ-42"
+  title="Implement search API"
+  type="task"
+  status="in-progress"
+  priority="high"
+  assignee="Sarah Chen"
+  estimate="5"
+  story-ids="PROJ-101,PROJ-102">
+  <p slot="description">Build the search endpoint.</p>
+  <ul slot="checklist">
+    <li>Schema design</li>
+    <li>Implementation</li>
+    <li>Tests</li>
+  </ul>
+</work-item>
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `item-id` | string | — | Unique identifier (also sets HTML `id`) |
+| `title` | string | — | Work item title |
+| `type` | string | `"task"` | `task`, `bug`, `chore`, `spike`, `feature` |
+| `priority` | string | `"medium"` | `critical`, `high`, `medium`, `low` |
+| `status` | string | `"backlog"` | `backlog`, `to-do`, `in-progress`, `review`, `done`, `blocked` |
+| `estimate` | string | — | Effort estimate |
+| `assignee` | string | — | Assignee name (shown with avatar) |
+| `story-ids` | string | — | Comma-separated linked story IDs |
+| `detail` | string | `"full"` | `full`, `compact`, `minimal` |
+| `compact` | boolean | — | Alias for `detail="compact"` |
+| `src` | string | — | JSON data URL |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `description` | Work item description |
+| `checklist` | Subtasks or checklist |
+| `notes` | Additional notes |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `work-item:ready` | `{ itemId, title, type, priority, status }` |
+| `work-item:status` | `{ status, itemId }` |
+| `work-item:priority` | `{ priority, itemId }` |
+
+## Item Types
+
+| Type | Icon | Use Case |
+|------|------|----------|
+| `task` | Checkbox square | Engineering implementation work |
+| `bug` | Bug icon | Defect that needs fixing |
+| `chore` | Wrench | Tech debt, maintenance, ops |
+| `spike` | Lightbulb | Research, investigation, PoC |
+| `feature` | Circle check | New user-facing capability |
+
+## Cross-References
+
+- `story-ids` links to `<user-story>` elements via fragment anchors
+- `item-id` is auto-set as the HTML `id` for inbound cross-referencing
+- Can be referenced by `<gantt-chart>` via `data-task-id` matching `item-id`

package/src/web-components/work-item/api.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "work-item",
+  "type": "web-component",
+  "description": "General-purpose work unit card — tasks, bugs, chores, spikes, and features with slotted title, status, priority, assignee, and linked stories",
+  "htmlvalidate": { "flow": true, "permittedContent": ["@flow"] },
+  "attributes": [
+    { "name": "item-id",   "kind": "host-api", "purpose": "config", "type": "string",  "description": "Unique work item identifier, auto-sets HTML id" },
+    { "name": "type",      "kind": "host-api", "purpose": "config", "type": "string",  "description": "Item type: task | bug | chore | spike | feature" },
+    { "name": "priority",  "kind": "host-api", "purpose": "config", "type": "string",  "description": "Priority: critical | high | medium | low" },
+    { "name": "status",    "kind": "host-api", "purpose": "config", "type": "string",  "description": "Status: backlog | to-do | in-progress | review | done | blocked" },
+    { "name": "estimate",  "kind": "host-api", "purpose": "config", "type": "string",  "description": "Effort estimate (points, hours, t-shirt size)" },
+    { "name": "assignee",  "kind": "host-api", "purpose": "config", "type": "string",  "description": "Assignee name" },
+    { "name": "story-ids", "kind": "host-api", "purpose": "config", "type": "string",  "description": "Comma-separated linked user-story IDs" },
+    { "name": "detail",    "kind": "host-api", "purpose": "config", "type": "string",  "description": "Detail level: full | compact | minimal" },
+    { "name": "compact",   "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Alias for detail=compact" },
+    { "name": "src",       "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to JSON data" }
+  ],
+  "slots": [
+    { "name": "title",       "description": "Work item heading (e.g., <h3>)" },
+    { "name": "description", "description": "Work item description (e.g., <p>)" },
+    { "name": "checklist",   "description": "Checklist or subtasks (e.g., <ul>)" },
+    { "name": "notes",       "description": "Additional notes (e.g., <p>)" }
+  ],
+  "events": [
+    { "name": "work-item:ready",    "detail": "{ itemId, title, type, priority, status }", "description": "Fired after render" },
+    { "name": "work-item:status",   "detail": "{ status, itemId }",                        "description": "Fired when status changes" },
+    { "name": "work-item:priority", "detail": "{ priority, itemId }",                      "description": "Fired when priority changes" }
+  ]
+}