@profpowell/vb-project-planning 0.1.0 → 0.2.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@profpowell/vb-project-planning",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "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/_capacity.js

@@ -40,7 +40,7 @@ export function defaultFormulaText(time, cost, focusFactor) {
 
 /**
  * FNV-1a (32-bit) hash over a stable JSON serialization of the triangle.
- * Used for drift detection by downstream consumers (notably <nfr-compass>'s
+ * Used for drift detection by downstream consumers (notably <quality-target>'s
  * ironTriangleHash field).
  *
  * Matches the fnv1a in src/web-components/color-picker/_color-utils.js so

package/src/web-components/iron-triangle/_triangle-geometry.js

@@ -172,7 +172,7 @@ export function buildTriangleSvg({
   center.setAttribute('role', 'button');
   center.setAttribute(
     'aria-label',
-    `Quality — ${formatQualitySummary(qualitySummary)}. Activate to open the NFR compass.`,
+    `Quality — ${formatQualitySummary(qualitySummary)}. Activate to open the quality decision.`,
   );
 
   // Backdrop circle — sits behind the text, masks the polygon stroke.

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"]
@@ -13,8 +13,8 @@
     { "name": "data-min-capacity",     "kind": "data",     "purpose": "config",         "type": "number",  "default": "1",        "description": "Floor for capacityPoints" },
     { "name": "data-quality-href",     "kind": "data",     "purpose": "config",         "type": "string",  "description": "Navigation fallback when iron-triangle:open-quality isn't preventDefault-ed" },
     { "name": "data-quality-summary",  "kind": "data",     "purpose": "config",         "type": "string",  "description": "Short summary text shown in the center's native tooltip + aria-label (e.g. '3 critical: perf, sec, a11y')" },
-    { "name": "disabled",              "kind": "native",   "purpose": "config",         "type": "boolean", "description": "All inputs disabled" },
-    { "name": "locked",                "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors" }
+    { "name": "disabled",              "kind": "native",   "purpose": "config",         "type": "boolean", "description": "Fully off: vertex and centre Quality targets leave the tab order (aria-disabled), openEditor() is a no-op, the mode switch and all dialog controls are disabled. setManual() / setFormula() / revise() still work for the host." },
+    { "name": "locked",                "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped shapes: the same editing lock as disabled, but the centre Quality target still opens the quality decision (iron-triangle:open-quality / data-quality-href)" }
   ],
   "slots": [],
   "events": [

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

@@ -16,8 +16,16 @@
  * 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
+ * `qualitySummary` property to surface the bound quality-target'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));
@@ -155,7 +171,7 @@ class IronTriangle extends VBElement {
 
   /** Imperatively open a vertex editor. */
   openEditor(axis) {
-    if (!SECTIONS.includes(axis)) return;
+    if (!SECTIONS.includes(axis) || this.#inert) return;
     const dialog = this.#ensureDialog(axis);
     if (typeof dialog.showModal === 'function') dialog.showModal();
     else dialog.setAttribute('open', '');
@@ -219,7 +235,7 @@ class IronTriangle extends VBElement {
     const center = event.target.closest?.('.center[data-target="quality"]');
     if (center && this.contains(center)) {
       event.preventDefault();
-      this.#fireQualityOpen();
+      if (!this.hasAttribute('disabled')) this.#fireQualityOpen();
     }
   }
 
@@ -234,7 +250,7 @@ class IronTriangle extends VBElement {
     const center = event.target.closest?.('.center[data-target="quality"]');
     if (center && this.contains(center)) {
       event.preventDefault();
-      this.#fireQualityOpen();
+      if (!this.hasAttribute('disabled')) this.#fireQualityOpen();
     }
   }
 
@@ -298,6 +314,7 @@ class IronTriangle extends VBElement {
       this.#recompute({ source: 'dialog', field: axis });
     });
 
+    this.#syncDisabledLocked();
     return dialog;
   }
 
@@ -363,6 +380,7 @@ class IronTriangle extends VBElement {
 
     this.#renderViz();
     this.#syncStateFlags();
+    this.#syncStatus();
     this.#publishFormValue();
 
     this.dispatchEvent(new CustomEvent('iron-triangle:change', {
@@ -382,6 +400,7 @@ class IronTriangle extends VBElement {
     const existing = this.querySelector(':scope > svg');
     if (existing) existing.replaceWith(svg);
     else this.prepend(svg);
+    this.#syncHitTargetsInert();
     this.dataset.capacityPoints = String(this.#value.capacityPoints);
     this.dataset.capacitySource = this.#value.capacitySource;
   }
@@ -405,11 +424,187 @@ class IronTriangle extends VBElement {
     } catch { /* older Safari */ }
   }
 
+  get #inert() { return this.hasAttribute('disabled') || this.hasAttribute('locked'); }
+
+  /**
+   * disabled / locked: no editing path stays open. styles.css already sets
+   * pointer-events: none; this closes the keyboard and programmatic paths
+   * (vertex targets leave the tab order, openEditor() is a no-op) and
+   * disables the mode switch and every dialog control, including dialogs
+   * built later.
+   *
+   * The centre Quality target is navigation, not editing, so under `locked`
+   * it stays focusable and clickable (styles.css re-enables its pointer).
+   * Under `disabled` it goes inert too: browsers suppress mouse events
+   * inside a disabled form-associated element, so keeping only its
+   * keyboard path alive would be inconsistent.
+   */
   #syncDisabledLocked() {
-    const off = this.hasAttribute('disabled') || this.hasAttribute('locked');
+    const off = this.#inert;
+    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;
     }
+    this.#syncHitTargetsInert();
+  }
+
+  /** Hit targets follow disabled / locked across re-renders. */
+  #syncHitTargetsInert() {
+    const editingOff = this.#inert;
+    const navOff = this.hasAttribute('disabled');
+    for (const target of this.querySelectorAll(':scope > svg [role="button"][tabindex]')) {
+      const off = target.matches('.center[data-target="quality"]') ? navOff : editingOff;
+      target.setAttribute('tabindex', off ? '-1' : '0');
+      if (off) target.setAttribute('aria-disabled', 'true');
+      else target.removeAttribute('aria-disabled');
+    }
+  }
+
+  // ── 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';
+    // VB's `ghost` variant keeps the switch secondary to the triangle;
+    // styles.css trims it further to sit inside the small status strip.
+    button.className = 'iron-triangle-mode ghost';
+    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');
+      // Pressed state is carried by the visible text too, not only by the
+      // underline. The aria-label starts with that visible text so voice
+      // users can say what they see (WCAG 2.5.3 Label in Name).
+      const label = manual && capacityPoints > 0 ? `Manual capacity: ${capacityPoints} pts` : 'Manual capacity';
+      if (this.#modeButton.textContent !== label) this.#modeButton.textContent = label;
+      this.#modeButton.setAttribute('aria-label', manual
+        ? `${label}. Activate to edit or return to the formula.`
+        : `${label}. 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);
+    });
+
+    this.#syncDisabledLocked();
+    return dialog;
   }
 
   // ── Internal: revise() field accessors ───────────────────────────

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

@@ -124,11 +124,82 @@ 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;
+}
+
+/* Quiet, secondary switch: ghost button, compact, muted until hovered or
+   pressed. VB's touch-target minimum block size is kept. Pressed adds an underline (plus the "Manual capacity: N pts" label) so
+   the state never rests on colour alone. */
+iron-triangle > .iron-triangle-status .iron-triangle-mode {
+  font-size: inherit;
+  font-weight: var(--font-weight-normal, 400);
+  padding-block: 0;
+  padding-inline: var(--size-xs, 0.5rem);
+  border-color: transparent;
+  color: var(--color-text-muted);
+}
+
+iron-triangle > .iron-triangle-status .iron-triangle-mode:hover {
+  color: var(--color-text);
+}
+
+iron-triangle > .iron-triangle-status .iron-triangle-mode[aria-pressed="true"] {
+  color: var(--color-interactive);
+  text-decoration: underline;
+  text-decoration-thickness: var(--border-width-medium, 2px);
+  text-underline-offset: 0.25em;
+}
+
+/* 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] {
@@ -136,6 +207,13 @@ iron-triangle[locked] {
   pointer-events: none;
 }
 
+/* The centre Quality target navigates to the quality decision rather than
+   editing the shape, so it keeps working on a locked (read-only) triangle.
+   A disabled triangle stays fully off, like any disabled control. */
+iron-triangle[locked]:not([disabled]) svg .center[data-target="quality"] {
+  pointer-events: auto;
+}
+
 /* ── Dialog chrome ────────────────────────────────────────────── */
 
 iron-triangle > dialog.iron-triangle-dialog {

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/quality-target/api.json

@@ -13,13 +13,12 @@
     { "name": "data-capacity-points",       "kind": "data",     "purpose": "config",         "type": "number",  "description": "Literal capacity fallback when no triangle is bound" },
     { "name": "data-cost-weights",          "kind": "data",     "purpose": "config",         "type": "string",  "description": "JSON object overriding default per-ility cost weights" },
     { "name": "data-radius",                "kind": "data",     "purpose": "config",         "type": "number",  "default": "100", "description": "Base radius in SVG units" },
-    { "name": "data-show-envelope",         "kind": "data",     "purpose": "visual-variant", "type": "boolean", "description": "Show the capacity envelope polygon (default true; set to \"false\" to hide)" },
     { "name": "data-min-rationale",         "kind": "data",     "purpose": "config",         "type": "number",  "default": "10",  "description": "Min characters for a Critical row's rationale" },
     { "name": "data-max-rationale",         "kind": "data",     "purpose": "config",         "type": "number",  "default": "200", "description": "Max characters for the rationale textarea" },
     { "name": "data-min-overrun-rationale", "kind": "data",     "purpose": "config",         "type": "number",  "default": "10",  "description": "Min characters for overrunRationale" },
     { "name": "data-max-overrun-rationale", "kind": "data",     "purpose": "config",         "type": "number",  "default": "400", "description": "Max characters for overrunRationale" },
-    { "name": "disabled",                   "kind": "native",   "purpose": "config",         "type": "boolean", "description": "All inputs disabled" },
-    { "name": "locked",                     "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors" }
+    { "name": "disabled",                   "kind": "native",   "purpose": "config",         "type": "boolean", "description": "No editing: axes leave the tab order, openEditor() is a no-op, dialog and footer controls are disabled; also bars the element from form validation" },
+    { "name": "locked",                     "kind": "host-api", "purpose": "semantic-state", "type": "boolean", "description": "Read-only mode for shipped vectors; same editing lock as disabled, but the value still submits and validates" }
   ],
   "slots": [],
   "events": [