@profpowell/vb-project-planning 0.1.0

package/src/web-components/kanban-board/static.html

@@ -0,0 +1,20 @@
+<!--
+  kanban-board — static (zero-JS) form
+  Column sections with draggable children render as vertical flow before
+  JS upgrades to horizontal columns with drag-and-drop.
+-->
+<kanban-board>
+  <section data-column="backlog" data-column-label="Backlog">
+    <article draggable="true" data-id="task-1">Design review for dashboard</article>
+    <article draggable="true" data-id="task-2">Write API documentation</article>
+  </section>
+  <section data-column="doing" data-column-label="In Progress" data-wip="3">
+    <article draggable="true" data-id="task-3">Implement user authentication</article>
+  </section>
+  <section data-column="review" data-column-label="Review" data-wip="2">
+    <article draggable="true" data-id="task-4">Add loading indicators</article>
+  </section>
+  <section data-column="done" data-column-label="Done" data-column-color="success">
+    <article draggable="true" data-id="task-5">Set up CI/CD pipeline</article>
+  </section>
+</kanban-board>

package/src/web-components/kanban-board/styles.css

@@ -0,0 +1,242 @@
+/* ── kanban-board ──────────────────────────────────────────────────────────── */
+/* Light DOM styles — element selector pattern                                 */
+
+kanban-board {
+  display: block;
+  container-type: inline-size;
+}
+
+kanban-board:not(:defined) {
+  display: block;
+}
+
+/* ── Columns container ────────────────────────────────────────────────────── */
+
+.kb-columns {
+  display: flex;
+  gap: 1px;
+  background: var(--color-border, #e0e0e0);
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-l, 0.75rem);
+  overflow: hidden;
+  flex-wrap: wrap;
+}
+
+/* ── Individual column ────────────────────────────────────────────────────── */
+
+.kb-column {
+  min-inline-size: 14rem;
+  flex: 1 1 14rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+  /* Columns are authored as <section> siblings. VB's @scope flow-separator rule
+     adds margin-block-start, padding-block-start and a top border to every
+     section after the first — which shoves the 2nd+ column headers down and
+     misaligns the board. Neutralize the separator so all columns top-align. */
+  margin-block: 0 !important;
+  padding-block-start: 0 !important;
+  border-block-start: 0 !important;
+}
+
+/* ── Column header ────────────────────────────────────────────────────────── */
+
+.kb-column-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  padding: var(--size-s, 12px) var(--size-m, 16px);
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 2px solid var(--color-border, #e0e0e0);
+}
+
+.kb-column-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text, #1a1a1a);
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+/* ── Count badge ──────────────────────────────────────────────────────────── */
+
+.kb-count {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  background: var(--color-border, #e0e0e0);
+  border-radius: var(--radius-full, 9999px);
+  padding: 1px 8px;
+  margin-inline-start: 4px;
+}
+
+/* ── WIP limit badge ──────────────────────────────────────────────────────── */
+
+.kb-wip {
+  font-size: 0.65rem;
+  font-weight: 400;
+  color: var(--color-text-muted, #999);
+}
+
+/* ── WIP exceeded state ───────────────────────────────────────────────────── */
+
+[data-wip-exceeded] .kb-column-header {
+  border-block-end-color: var(--color-error, #ef4444);
+}
+
+[data-wip-exceeded] .kb-count {
+  background: color-mix(in oklch, var(--color-error, #ef4444) 15%, var(--color-surface, #fff));
+  color: var(--color-error, #ef4444);
+}
+
+/* ── Column color tints ───────────────────────────────────────────────────── */
+
+[data-column-tint="success"] {
+  background: color-mix(in oklch, var(--color-success, #22c55e) 6%, var(--color-surface, #fff));
+}
+
+[data-column-tint="warning"] {
+  background: color-mix(in oklch, var(--color-warning, #f59e0b) 6%, var(--color-surface, #fff));
+}
+
+[data-column-tint="error"] {
+  background: color-mix(in oklch, var(--color-error, #ef4444) 6%, var(--color-surface, #fff));
+}
+
+[data-column-tint="info"] {
+  background: color-mix(in oklch, var(--color-info, #3b82f6) 6%, var(--color-surface, #fff));
+}
+
+[data-column-tint="interactive"] {
+  background: color-mix(in oklch, var(--color-interactive, #3b82f6) 6%, var(--color-surface, #fff));
+}
+
+/* ── Inner drag-surfaces ──────────────────────────────────────────────────── */
+
+kanban-board drag-surface {
+  padding: var(--size-s, 12px);
+  min-block-size: 6rem;
+  flex: 1;
+}
+
+/* ── Default card style for JSON-created articles ─────────────────────────── */
+
+kanban-board .kb-card {
+  background: var(--color-surface, #fff);
+  border: var(--border-width-thin, 1px) solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-s, 0.375rem);
+  padding: var(--size-xs, 8px) var(--size-s, 12px);
+  cursor: grab;
+  font-size: var(--font-size-s, 0.875rem);
+  line-height: 1.4;
+}
+
+kanban-board .kb-card:active {
+  cursor: grabbing;
+}
+
+/* ── Empty column placeholder ─────────────────────────────────────────────── */
+
+.kb-empty {
+  color: var(--color-text-muted, #888);
+  font-size: 0.8rem;
+  font-style: italic;
+  padding: var(--size-s, 12px);
+  margin: 0;
+}
+
+/* ── Title ────────────────────────────────────────────────────────────────── */
+
+.kb-title {
+  margin-block-end: var(--size-s, 12px);
+}
+
+/* ── Live region (visually hidden) ────────────────────────────────────────── */
+
+.kb-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+}
+
+/* ── Compact variant ──────────────────────────────────────────────────────── */
+
+kanban-board[compact] .kb-column {
+  min-inline-size: 11rem;
+  flex: 1 1 11rem;
+}
+
+kanban-board[compact] .kb-column-header {
+  padding: var(--size-xs, 8px) var(--size-s, 12px);
+}
+
+kanban-board[compact] .kb-column-header h3 {
+  font-size: 0.75rem;
+}
+
+kanban-board[compact] drag-surface {
+  padding: var(--size-xs, 8px);
+  min-block-size: 4rem;
+}
+
+kanban-board[compact] .kb-count {
+  font-size: 0.6rem;
+}
+
+/* ── Container query: single-column stacking ──────────────────────────────── */
+
+@container (max-width: 30rem) {
+  .kb-columns {
+    flex-direction: column;
+  }
+
+  .kb-column {
+    min-inline-size: unset;
+  }
+}
+
+/* ── Reduced motion ───────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  kanban-board,
+  kanban-board * {
+    transition: none;
+  }
+}
+
+/* ── Print ────────────────────────────────────────────────────────────────── */
+
+@media print {
+  .kb-columns {
+    flex-wrap: wrap;
+    border: 0.5pt solid #ccc;
+    gap: 0;
+  }
+
+  .kb-column {
+    border: 0.5pt solid #ccc;
+    break-inside: avoid;
+  }
+
+  .kb-column-header {
+    position: static;
+  }
+
+  kanban-board drag-surface {
+    min-block-size: auto;
+  }
+
+  kanban-board [draggable] {
+    cursor: default;
+  }
+}

package/src/web-components/product-roadmap/api.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "product-roadmap",
+  "type": "web-component",
+  "description": "Interactive themes \u00d7 quarters product roadmap. Auto-discovers lane sections + initiative articles; editable mode wires drag-to-reschedule, drag-to-resize, and drop-on-lane.",
+  "attributes": [
+    {
+      "name": "start",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "First date in the range (ISO 8601 or \"YYYY-Qn\"; required)"
+    },
+    {
+      "name": "end",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Last date in the range (ISO 8601 or \"YYYY-Qn\"; required, inclusive)"
+    },
+    {
+      "name": "view",
+      "kind": "host-api",
+      "purpose": "visual-variant",
+      "type": "enum",
+      "values": [
+        "quarter",
+        "month"
+      ],
+      "description": "Time-axis granularity (default: quarter)"
+    },
+    {
+      "name": "editable",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Wire drag-to-reschedule, drag-to-resize, and lane drop"
+    },
+    {
+      "name": "today-marker",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "boolean",
+      "description": "Render a vertical line at today's date if it falls within the range"
+    }
+  ],
+  "structure": [
+    {
+      "element": "<section data-lane=\"\u2026\">",
+      "description": "One per swimlane row"
+    },
+    {
+      "element": "<article data-start=\"\u2026\" data-end=\"\u2026\">",
+      "description": "One per initiative bar inside a lane (data-status sets the bar color)"
+    }
+  ],
+  "childAttributes": [
+    {
+      "name": "data-lane",
+      "on": "section",
+      "type": "string",
+      "description": "Lane name (used as the row label)"
+    },
+    {
+      "name": "data-start",
+      "on": "article",
+      "type": "string",
+      "description": "Initiative start date (ISO 8601 or YYYY-Qn)"
+    },
+    {
+      "name": "data-end",
+      "on": "article",
+      "type": "string",
+      "description": "Initiative end date (ISO 8601 or YYYY-Qn)"
+    },
+    {
+      "name": "data-status",
+      "on": "article",
+      "type": "enum",
+      "values": [
+        "planned",
+        "in-progress",
+        "at-risk",
+        "shipped",
+        "blocked"
+      ],
+      "description": "Status enum; drives bar color"
+    }
+  ],
+  "events": [
+    {
+      "name": "product-roadmap:select",
+      "detail": "{ initiative, lane, start, end, status }",
+      "description": "Fired on bar click"
+    },
+    {
+      "name": "product-roadmap:reschedule",
+      "detail": "{ initiative, lane, start, end }",
+      "description": "Fired after drag-to-move snaps to grid"
+    },
+    {
+      "name": "product-roadmap:resize",
+      "detail": "{ initiative, lane, start, end }",
+      "description": "Fired after drag-to-resize snaps to grid"
+    },
+    {
+      "name": "product-roadmap:move",
+      "detail": "{ initiative, fromLane, toLane, start, end }",
+      "description": "Fired after a bar drops on a different lane"
+    }
+  ],
+  "htmlvalidate": {
+    "flow": true,
+    "permittedContent": [
+      "@flow"
+    ]
+  }
+}