@echelon-foundry/design-system 0.3.0 → 0.4.0-main.222.1

package/README.md

@@ -37,6 +37,15 @@ npm run site:check
 ```
 
 The generated GitHub Pages artifact is written to `site-dist/`.
+The site is generated from the component catalog: canonical markup in
+`patterns/`, one documentation entry per component in `catalog/components/`,
+and CSS hooks derived from the built stylesheet. Every component page has the
+same sections (purpose, live examples with copyable HTML, a mobile example in a
+real narrow viewport, API, states, accessibility, responsive behavior, motion,
+usage guidance and related components). See
+[docs/CATALOG-AUTHORING.md](docs/CATALOG-AUTHORING.md) to document a component
+and [docs/COMPONENT-INVENTORY.md](docs/COMPONENT-INVENTORY.md) for the full
+inventory, planned components and known issues.
 Agent usage rules are in [docs/AGENT-USAGE.md](docs/AGENT-USAGE.md).
 
 
@@ -114,6 +123,26 @@ Workflow/diagram items may also carry authored fill, border/stroke, accent, conn
 
 See `requirements/OBJECT-METADATA-AND-DIAGRAM-PRESENTATION.md`.
 
+## Portable workflows
+
+Forma owns the portable workflow standard (`.forma-workflow.json`): a versioned
+JSON Schema, independent validation, deterministic layout, static HTML
+rendering, and the embeddable `<forma-workflow>` renderer and editor. None of it
+needs Forma Studio.
+
+| Need | Use |
+|---|---|
+| The format | [`docs/workflow/FORMAT.md`](docs/workflow/FORMAT.md), schema [`schemas/workflow/1.0/forma-workflow.schema.json`](schemas/workflow/1.0/forma-workflow.schema.json) |
+| Validate in CI or from an agent | `forma-workflow validate --json` ([`docs/workflow/VALIDATION.md`](docs/workflow/VALIDATION.md)) |
+| Static or complete-document HTML | `forma-workflow render` ([`docs/workflow/RENDERING.md`](docs/workflow/RENDERING.md)) |
+| Embed a viewer or editor | `@echelon-foundry/forma-workflow` ([`docs/workflow/EMBEDDING.md`](docs/workflow/EMBEDDING.md), [`examples/workflow-embedding`](examples/workflow-embedding)) |
+| Produce workflows elsewhere | [`docs/workflow/EXTERNAL-PRODUCERS.md`](docs/workflow/EXTERNAL-PRODUCERS.md) |
+| Reference fixtures | [`examples/workflows/`](examples/workflows/) |
+
+The design-system package stays zero-runtime. The editor ships separately; see
+[ADR-0006](docs/decisions/ADR-0006-portable-workflow-capability.md). Run
+`npm run workflow:check` for the full workflow test suite.
+
 ## Figma
 
 Forma treats Figma as a design and developer-consumption surface, not as a

package/contracts/diagram-presentation.json

@@ -0,0 +1,109 @@
+{
+  "schemaVersion": "1.0.0",
+  "contract": "forma.diagram-presentation",
+  "contractVersion": "2.1.0",
+  "stylesheet": "components.css",
+  "decision": "docs/decisions/ADR-0004-diagram-presentation-boundary.md",
+  "requirements": "requirements/OBJECT-METADATA-AND-DIAGRAM-PRESENTATION.md",
+  "ownership": {
+    "forma": ["surface", "node", "group", "connector", "connectorLabel", "marker", "relations", "legend", "valueState", "port", "status", "description", "membership"],
+    "consumer": ["geometry", "routing", "semanticKind", "metadataValues", "metadataVisibility", "namedStyles", "paletteSlots", "metadataMappings", "appearancePrecedence", "membership", "portPlacement", "statusValues"],
+    "editorOnly": ["selection", "handles", "guides", "routePreview", "marquee", "dragTargets", "connectionTargets", "minimap", "validationOverlay"],
+    "editorOnlyRule": "Editor-only adorners never use ef-diagram* classes and never appear in exported output."
+  },
+  "elements": {
+    "surface": { "element": "figure", "class": "ef-diagram", "parts": { "viewport": "ef-diagram__viewport", "canvas": "ef-diagram__canvas", "wires": "ef-diagram__wires" } },
+    "node": {
+      "element": "article",
+      "class": "ef-diagram-node",
+      "regions": { "kind": "ef-diagram-node__kind", "label": "ef-diagram-node__label", "description": "ef-diagram-node__description", "metadata": "ef-diagram-node__meta" },
+      "statusAttribute": "data-ef-status",
+      "statusCues": { "active": "outer ring", "blocked": "double border", "failed": "double border", "skipped": "dashed border", "cancelled": "dashed border", "pending": "dotted border", "waiting": "dotted border" },
+      "statusRule": "Status is text in the node metadata (dt Status, dd label). data-ef-status selects only a secondary non-colour cue; other values render no cue.",
+      "shapeAttribute": "data-ef-shape",
+      "shapes": ["rectangle", "rounded", "pill", "ellipse", "diamond"],
+      "defaultShape": "rectangle",
+      "shapeNotes": { "diamond": "Square box (aspect-ratio 1); content sits in the inscribed square, so give it enough width for the label." },
+      "geometry": ["x", "y", "w", "h"],
+      "appearance": ["fill", "stroke", "accent", "foreground"]
+    },
+    "group": {
+      "element": "div",
+      "class": "ef-diagram-group",
+      "regions": { "header": "ef-diagram-group__header", "kind": "ef-diagram-group__kind", "label": "ef-diagram-group__label" },
+      "variantAttribute": "data-ef-group",
+      "variants": ["group", "lane", "phase"],
+      "defaultVariant": "group",
+      "lineAttribute": "data-ef-line",
+      "lineStyles": ["solid", "dashed", "dotted"],
+      "geometry": ["x", "y", "w", "h"],
+      "appearance": ["fill", "stroke", "accent", "foreground"],
+      "paintOrder": "Place groups first in the canvas so they paint beneath connectors and nodes.",
+      "membership": "Consumer data. Canvas overlap never implies membership."
+    },
+    "connector": {
+      "element": "path",
+      "class": "ef-diagram-connector",
+      "lineAttribute": "data-ef-line",
+      "lineStyles": ["solid", "dashed", "dotted"],
+      "defaultLineStyle": "solid",
+      "markers": { "class": "ef-diagram-marker", "kinds": ["arrow"], "attachment": ["marker-start", "marker-end"] },
+      "appearance": ["connectorStroke", "connectorWidth"]
+    },
+    "port": { "element": "span", "class": "ef-diagram-port", "parent": "ef-diagram-node", "label": "ef-diagram-port__label", "sideAttribute": "data-ef-side", "sides": ["top", "right", "bottom", "left"], "directionAttribute": "data-ef-direction", "directions": ["in", "out", "inout"], "directionCue": "in: square, out: circle, inout: diamond", "offset": "--ef-diagram-port-offset", "rule": "A port is a marker. The relationship list names the port in text when a connector uses it." },
+    "membership": { "element": "dl", "class": "ef-diagram__membership", "rule": "One dt per group, lane or phase; its dd lists members in reading order. Canvas overlap never implies membership." },
+    "connectorLabel": { "element": "span", "class": "ef-diagram-connector__label", "geometry": ["x", "y"] },
+    "relations": { "element": "ol", "class": "ef-diagram__relations", "rule": "One text item per connector, in reading order." },
+    "legend": { "element": "dl", "class": "ef-diagram-legend", "swatch": "ef-diagram-legend__swatch", "appearance": ["fill", "stroke", "accent"] },
+    "valueState": {
+      "element": "span",
+      "class": "ef-diagram-value-state",
+      "stateAttribute": "data-ef-value-state",
+      "states": ["default", "derived", "source-bound", "unknown", "unavailable", "invalid"],
+      "explicit": "Explicit values carry no tag.",
+      "rule": "The tag text carries the meaning; the border style is secondary."
+    }
+  },
+  "appearanceProperties": {
+    "fill": { "customProperty": "--ef-diagram-fill", "appliesTo": ["node", "group", "legend"], "syntax": "color", "default": { "node": "--ef-color-surface-primary", "group": "transparent", "legend": "--ef-color-surface-primary" } },
+    "stroke": { "customProperty": "--ef-diagram-stroke", "appliesTo": ["node", "group", "legend"], "syntax": "color", "default": { "node": "--ef-color-border-functional", "group": "--ef-color-border-functional", "legend": "--ef-color-border-functional" }, "print": "Authored stroke prints; otherwise black." },
+    "accent": { "customProperty": "--ef-diagram-accent", "appliesTo": ["node", "group", "legend"], "syntax": "color", "default": { "node": "stroke", "group": "stroke", "legend": "stroke" } },
+    "foreground": { "customProperty": "--ef-diagram-foreground", "appliesTo": ["node", "group"], "syntax": "color", "default": { "node": "--ef-color-text-primary", "group": "--ef-color-text-primary" }, "contrast": "consumer" },
+    "connectorStroke": { "customProperty": "--ef-diagram-connector-stroke", "appliesTo": ["connector"], "syntax": "color", "default": { "connector": "--ef-color-border-functional" } },
+    "connectorWidth": { "customProperty": "--ef-diagram-connector-width", "appliesTo": ["connector"], "syntax": "number", "range": [1, 8], "default": { "connector": "2" } }
+  },
+  "geometryProperties": {
+    "x": "--ef-diagram-x",
+    "y": "--ef-diagram-y",
+    "w": "--ef-diagram-w",
+    "h": "--ef-diagram-h",
+    "canvasWidth": "--ef-diagram-canvas-w",
+    "canvasHeight": "--ef-diagram-canvas-h",
+    "portOffset": "--ef-diagram-port-offset",
+    "unit": "px",
+    "axes": "physical (does not mirror in right-to-left documents)"
+  },
+  "color": {
+    "paint": "solid",
+    "literalSyntax": "#rrggbb",
+    "literalNote": "Consumers normalize literals to lowercase six-digit hex; alpha, gradients, blend modes and filters are not part of this contract (FMD-PAINT-001..003).",
+    "tokenReferences": [
+      "--ef-color-accent-primary",
+      "--ef-color-accent-secondary",
+      "--ef-color-border-functional",
+      "--ef-color-border-subtle",
+      "--ef-color-surface-primary",
+      "--ef-color-surface-secondary",
+      "--ef-color-surface-inverse",
+      "--ef-color-text-primary",
+      "--ef-color-text-secondary"
+    ],
+    "reset": "Remove the custom property to restore the Forma default (FMD-RESOLVE-006)."
+  },
+  "fallbacks": {
+    "forcedColors": "Nodes, groups, swatches and labels use Canvas/CanvasText; connectors and markers use CanvasText. Kind text, shape, line style and value-state text remain.",
+    "print": "Viewport stops scrolling; nodes avoid page breaks; authored strokes and accents print; unauthored boundaries print black.",
+    "backgroundsDisabled": "Every shape and group has a real border, so boundaries survive when fills are dropped.",
+    "grayscale": "Meaning is carried by kind text, labels, line style, the relationship list and the legend text, never by hue."
+  }
+}

package/contracts/machine-operability.json

@@ -0,0 +1,48 @@
+{
+  "name": "forma-machine-operability",
+  "version": "1.0.0",
+  "referenceAutomation": "Playwright",
+  "toolNeutral": true,
+  "principle": "Every human-operable action has a deterministic semantically discoverable machine-operable path to the same authoritative application state.",
+  "locatorPriority": [
+    "role-and-accessible-name",
+    "native-label-id-name-value-or-url-target",
+    "documented-application-owned-stable-object-identity",
+    "documented-public-state-hook-for-inspection"
+  ],
+  "completionSignals": [
+    "native-state-change",
+    "documented-public-state-change",
+    "navigation-or-url-change",
+    "live-or-status-output",
+    "authoritative-application-state-rendered-into-the-dom"
+  ],
+  "directManipulation": {
+    "coordinateGestureMayBeConvenience": true,
+    "semanticEquivalentRequiredForMeaningfulStateChanges": true,
+    "examples": [
+      "move-buttons",
+      "named-commands",
+      "keyboard-actions",
+      "form-controls",
+      "application-or-limen-command-surface"
+    ]
+  },
+  "forbiddenAsOnlyPublicPath": [
+    "hard-coded-screen-coordinates",
+    "image-recognition",
+    "hover-only-actions",
+    "pointer-only-actions",
+    "generated-css-class-locators",
+    "dom-position-or-nth-child-locators",
+    "fixed-sleep-completion",
+    "color-only-state",
+    "animation-only-state",
+    "closed-shadow-dom-hiding-required-interaction"
+  ],
+  "authority": {
+    "forma": "semantic markup, accessible naming, public structure and presentation-state hooks",
+    "applicationOrLimen": "behavior beyond native HTML and application state synchronization",
+    "ordoOrDomain": "legality, capabilities, obligations, permissions and consequential transitions"
+  }
+}

package/contracts/workflow-capabilities.json

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": "1.0.0",
+  "contract": "forma.workflow-capabilities",
+  "contractVersion": "1.0.0",
+  "formatVersions": ["1.0.0"],
+  "formaVersion": "0.4.0",
+  "decision": "docs/decisions/ADR-0006-portable-workflow-capability.md",
+  "requirements": "requirements/PORTABLE-WORKFLOW-INTERCHANGE.md",
+  "rule": "A workflow targeting a Forma version earlier than a capability's 'since' version, or requiring a capability this list does not contain, is valid format using unavailable Forma capabilities.",
+  "capabilities": {
+    "workflow.core": { "since": "0.4.0", "description": "Nodes, edges, labels, kinds, descriptions and the accessible relationship list." },
+    "workflow.shapes": { "since": "0.4.0", "description": "Node variants rectangle, rounded, pill, ellipse and diamond (diagram contract 2.0.0)." },
+    "workflow.color": { "since": "0.4.0", "description": "Authored fill, stroke, accent, foreground and connector stroke as tokens or literals." },
+    "workflow.palette": { "since": "0.4.0", "description": "Named palette slots referenced as palette:<slot>." },
+    "workflow.groups": { "since": "0.4.0", "description": "Groups and containers with explicit membership." },
+    "workflow.swimlanes": { "since": "0.4.0", "description": "Swimlanes and phases." },
+    "workflow.ports": { "since": "0.4.0", "description": "Named connection points on node sides (diagram contract 2.1.0)." },
+    "workflow.status": { "since": "0.4.0", "description": "Semantic status shown as text on nodes, edges and groups (diagram contract 2.1.0)." },
+    "workflow.references": { "since": "0.4.0", "description": "Typed domain references displayed as text or links." },
+    "workflow.interactions": { "since": "0.4.0", "description": "Declarative interaction intents reported to the host." },
+    "workflow.legend": { "since": "0.4.0", "description": "A key explaining authored colour and line meaning." },
+    "workflow.layout": { "since": "0.4.0", "description": "Authored geometry, waypoints and the deterministic default layout." },
+    "workflow.embed": { "since": "0.4.0", "description": "The @echelon-foundry/forma-workflow embeddable renderer and editor." }
+  }
+}

package/dist/all.css

@@ -642,6 +642,8 @@
 
   .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
   .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  /* .ef-actions (catalog: button) is an application-layer row of related actions; it was styled only in marketing.css (forma#93 gap). */
+  .ef-actions { display: flex; flex-wrap: wrap; gap: var(--ef-primitive-spacing-3, 0.75rem); align-items: center; }
   .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
   .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
   .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
@@ -774,6 +776,8 @@
     font-size: 0.8125rem;
     line-height: 1.4;
   }
+  /* On a secondary surface, text-secondary falls below 4.5:1; use the surface's own text colour (forma#93). */
+  .ef-surface .ef-field__description { color: var(--ef-color-text-on-secondary-surface, #3a403c); }
 
   /* Motion model vocabulary --------------------------------------------- */
   /*
@@ -5079,6 +5083,8 @@
    *   node:      --ef-diagram-fill, --ef-diagram-stroke, --ef-diagram-accent,
    *              --ef-diagram-foreground
    *   connector: --ef-diagram-connector-stroke, --ef-diagram-connector-width
+   *   group:     the node properties plus --ef-diagram-h (M2, forma#88)
+   * The machine-readable contract is contracts/diagram-presentation.json.
    * Non-color cues: the visible node kind text, data-ef-shape, data-ef-line and
    * the textual relationship list. Focus never reads authored color.
    */
@@ -5123,6 +5129,46 @@
   }
   .ef-diagram-node[data-ef-shape="rounded"] { border-radius: var(--ef-primitive-spacing-3, 0.75rem); }
   .ef-diagram-node[data-ef-shape="pill"] { border-radius: 999px; padding-inline: var(--ef-primitive-spacing-5, 1.5rem); }
+  /*
+   * FMD-M2 (forma#88). Ellipse and diamond keep a real border (never a
+   * background-only shape) so the boundary survives backgrounds-off print and
+   * forced colors. --ef-diagram-h is an optional minimum height.
+   */
+  .ef-diagram-node { min-block-size: var(--ef-diagram-h, auto); }
+  .ef-diagram-node[data-ef-shape="ellipse"] {
+    border-radius: 50%;
+    border-inline-start-width: 2px;
+    border-block-end: 6px solid var(--ef-diagram-node-accent);
+    padding: var(--ef-primitive-spacing-4, 1rem) calc(var(--ef-diagram-w, 12rem) * 0.14);
+    place-content: center;
+    text-align: center;
+  }
+  .ef-diagram-node[data-ef-shape="ellipse"] .ef-diagram-node__meta,
+  .ef-diagram-node[data-ef-shape="diamond"] .ef-diagram-node__meta { grid-template-columns: auto auto; justify-content: center; text-align: start; }
+  /*
+   * A square box whose ::before is the diamond; the content sits in the
+   * inscribed square. Padding is derived from --ef-diagram-w because percentage
+   * padding would resolve against the canvas, not the node.
+   */
+  .ef-diagram-node[data-ef-shape="diamond"] {
+    aspect-ratio: 1;
+    padding: calc(var(--ef-diagram-w, 12rem) * 0.2);
+    border: 0;
+    background: transparent;
+    place-content: center;
+    text-align: center;
+    isolation: isolate;
+  }
+  .ef-diagram-node[data-ef-shape="diamond"]::before {
+    content: "";
+    position: absolute;
+    inset: 14.645%;
+    z-index: -1;
+    transform: rotate(45deg);
+    border: 2px solid var(--ef-diagram-node-stroke);
+    border-left: 6px solid var(--ef-diagram-node-accent);
+    background: var(--ef-diagram-node-fill);
+  }
   .ef-diagram-node :where(h3, p, dl, dd) { margin: 0; color: inherit; max-inline-size: none; }
   .ef-diagram-node__label { font-size: 1rem; line-height: 1.25; }
   .ef-diagram-node a { color: inherit; }
@@ -5167,20 +5213,146 @@
     vertical-align: middle;
   }
 
+  /*
+   * Groups, lanes and phases (FMD-M2). A boundary with a visible text label,
+   * painted beneath connectors and nodes (place it first in the canvas).
+   * Membership is consumer data: overlap on the canvas never implies it, so the
+   * consumer states membership in text (node metadata or the relationship list).
+   * Kind is text in __kind; data-ef-group only selects the presentation.
+   */
+  .ef-diagram-group {
+    --ef-diagram-group-fill: var(--ef-diagram-fill, transparent);
+    --ef-diagram-group-stroke: var(--ef-diagram-stroke, var(--ef-color-border-functional, #3a403c));
+    --ef-diagram-group-accent: var(--ef-diagram-accent, var(--ef-diagram-group-stroke));
+    --ef-diagram-group-foreground: var(--ef-diagram-foreground, var(--ef-color-text-primary, #171a18));
+    position: absolute;
+    left: var(--ef-diagram-x, 0);
+    top: var(--ef-diagram-y, 0);
+    inline-size: var(--ef-diagram-w, 20rem);
+    block-size: var(--ef-diagram-h, 10rem);
+    box-sizing: border-box;
+    margin: 0;
+    border: 2px solid var(--ef-diagram-group-stroke);
+    border-block-start: 6px solid var(--ef-diagram-group-accent);
+    background: var(--ef-diagram-group-fill);
+    color: var(--ef-diagram-group-foreground);
+  }
+  .ef-diagram-group[data-ef-line="dashed"] { border-style: dashed; border-block-start-style: solid; }
+  .ef-diagram-group[data-ef-line="dotted"] { border-style: dotted; border-block-start-style: solid; }
+  .ef-diagram-group[data-ef-group="lane"] { border-block-start-width: 2px; border-inline-start-width: 6px; border-inline-start-color: var(--ef-diagram-group-accent); border-inline-start-style: solid; }
+  .ef-diagram-group__header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--ef-primitive-spacing-2, 0.5rem);
+    align-items: baseline;
+    margin: 0;
+    padding: var(--ef-primitive-spacing-1, 0.25rem) var(--ef-primitive-spacing-2, 0.5rem);
+    color: inherit;
+    font-size: 0.875rem;
+    overflow-wrap: anywhere;
+  }
+  .ef-diagram-group__kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+  .ef-diagram-group__label { font-weight: 700; }
+
+  /*
+   * Metadata value state (FMD-SCHEMA-006/007). The state is text; the border
+   * style is a secondary cue. Explicit values carry no tag.
+   */
+  .ef-diagram-value-state {
+    display: inline-block;
+    margin-inline-start: var(--ef-primitive-spacing-1, 0.25rem);
+    padding: 0 var(--ef-primitive-spacing-1, 0.25rem);
+    border: 1px dashed currentColor;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.4;
+    text-transform: none;
+    letter-spacing: normal;
+    vertical-align: baseline;
+  }
+  .ef-diagram-value-state[data-ef-value-state="unknown"],
+  .ef-diagram-value-state[data-ef-value-state="unavailable"] { border-style: dotted; }
+  .ef-diagram-value-state[data-ef-value-state="invalid"] { border-style: solid; border-width: 2px; font-weight: 700; }
+  .ef-diagram-value-state[data-ef-value-state="source-bound"] { border-style: double; border-width: 3px; }
+
   @media (forced-colors: active) {
-    .ef-diagram-node, .ef-diagram-legend__swatch { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node, .ef-diagram-legend__swatch, .ef-diagram-group { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node[data-ef-shape="diamond"] { background: transparent; }
+    .ef-diagram-node[data-ef-shape="diamond"]::before { border-color: CanvasText; background: Canvas; }
     .ef-diagram-connector { stroke: CanvasText; }
     .ef-diagram-marker { fill: CanvasText; }
     .ef-diagram-connector__label { background: Canvas; color: CanvasText; }
   }
 
-  /* Backgrounds-off and grayscale print: boundaries, kinds and line styles remain. */
+  /*
+   * Print (color, grayscale and backgrounds-off). Authored strokes and accents
+   * stay, since borders print even when backgrounds are disabled. Without an
+   * authored stroke, boundaries print black. Kinds, labels, line styles and
+   * the relationship list carry meaning when fills disappear.
+   */
   @media print {
     .ef-diagram__viewport { overflow: visible; border-color: #000; }
-    .ef-diagram-node { break-inside: avoid; border-color: #000; }
+    .ef-diagram-node { break-inside: avoid; --ef-diagram-node-stroke: var(--ef-diagram-stroke, #000); }
+    .ef-diagram-group { --ef-diagram-group-stroke: var(--ef-diagram-stroke, #000); }
     .ef-diagram { break-inside: avoid; }
   }
 
+  /*
+   * Diagram contract 2.1.0 (workflow capability, forma#93; ADR-0006): ports,
+   * node status, node description and the membership list. Presentation only.
+   * Ports are connection-point markers placed by the consumer on a node side
+   * (data-ef-side) at an offset along it (--ef-diagram-port-offset, a
+   * percentage). Status is text in the node's metadata; data-ef-status only
+   * selects a secondary, non-colour cue (outline, border style).
+   */
+  .ef-diagram-node__description { font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .ef-diagram-port {
+    position: absolute;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    box-sizing: border-box;
+    border: 2px solid var(--ef-diagram-node-stroke, var(--ef-color-border-functional, #3a403c));
+    border-radius: 50%;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    transform: translate(-50%, -50%);
+  }
+  .ef-diagram-port[data-ef-side="top"] { left: var(--ef-diagram-port-offset, 50%); top: 0; }
+  .ef-diagram-port[data-ef-side="bottom"] { left: var(--ef-diagram-port-offset, 50%); top: 100%; }
+  .ef-diagram-port[data-ef-side="left"] { left: 0; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-side="right"] { left: 100%; top: var(--ef-diagram-port-offset, 50%); }
+  .ef-diagram-port[data-ef-direction="in"] { border-radius: 0; }
+  .ef-diagram-port[data-ef-direction="inout"] { border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
+  .ef-diagram-port__label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.125rem;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-size: 0.6875rem;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+  .ef-diagram-node[data-ef-status="active"] { box-shadow: 0 0 0 3px var(--ef-color-surface-primary, #f2efe7), 0 0 0 6px var(--ef-diagram-node-stroke); }
+  .ef-diagram-node[data-ef-status="blocked"],
+  .ef-diagram-node[data-ef-status="failed"] { border-style: double; border-width: 4px; border-inline-start-width: 6px; }
+  .ef-diagram-node[data-ef-status="skipped"],
+  .ef-diagram-node[data-ef-status="cancelled"] { border-style: dashed; border-inline-start-style: solid; }
+  .ef-diagram-node[data-ef-status="pending"],
+  .ef-diagram-node[data-ef-status="waiting"] { border-style: dotted; border-inline-start-style: solid; }
+  .ef-diagram__membership { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--ef-primitive-spacing-1, 0.25rem) var(--ef-primitive-spacing-3, 0.75rem); margin: 0; }
+  .ef-diagram__membership :where(dt) { font-weight: 700; overflow-wrap: anywhere; }
+  .ef-diagram__membership :where(dd) { margin: 0; overflow-wrap: anywhere; }
+  @media (max-width: 30rem) {
+    .ef-diagram__membership { grid-template-columns: minmax(0, 1fr); }
+  }
+  @media (forced-colors: active) {
+    .ef-diagram-port, .ef-diagram-port__label { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .ef-diagram-node[data-ef-status="active"] { box-shadow: none; outline: 3px solid CanvasText; outline-offset: 3px; }
+  }
+
   /* BEGIN generated: character-grid coordinates (tools/character-grid-css.mjs) */
   .ef-character-grid[data-ef-rows="1"] { --ef-grid-rows: 1; }
   .ef-character-grid[data-ef-rows="2"] { --ef-grid-rows: 2; }

package/dist/build-metrics.json

@@ -15,6 +15,8 @@
     "patterns/badge.html",
     "patterns/best-worst.html",
     "patterns/binary-choice.html",
+    "patterns/bounded-overflow.html",
+    "patterns/button.html",
     "patterns/callout.html",
     "patterns/card-grid.html",
     "patterns/character-grid-3270.html",
@@ -37,11 +39,13 @@
     "patterns/comparison-pairs.html",
     "patterns/composer.html",
     "patterns/conflict-review.html",
+    "patterns/container.html",
     "patterns/conversation.html",
     "patterns/cta.html",
     "patterns/dashboard-grid.html",
     "patterns/data-grid.html",
     "patterns/date-range.html",
+    "patterns/date-time-field.html",
     "patterns/dense-ledger.html",
     "patterns/diagnostic-status.html",
     "patterns/diagram.html",
@@ -68,6 +72,7 @@
     "patterns/focus-stage.html",
     "patterns/frame.html",
     "patterns/freshness.html",
+    "patterns/grid.html",
     "patterns/handoff-summary.html",
     "patterns/hero.html",
     "patterns/hierarchical-choice.html",
@@ -75,6 +80,7 @@
     "patterns/hierarchy-tree.html",
     "patterns/identifier.html",
     "patterns/image-choice.html",
+    "patterns/key-value-list.html",
     "patterns/landmark-region.html",
     "patterns/lane-board.html",
     "patterns/marketing-shell.html",
@@ -119,6 +125,7 @@
     "patterns/scroll-progress.html",
     "patterns/search.html",
     "patterns/section-heading.html",
+    "patterns/section.html",
     "patterns/security-blockers.html",
     "patterns/security-evidence-age.html",
     "patterns/security-evidence-chain.html",
@@ -135,20 +142,26 @@
     "patterns/site-footer.html",
     "patterns/site-header.html",
     "patterns/skeleton.html",
+    "patterns/skip-link.html",
     "patterns/slider.html",
     "patterns/spatial-canvas.html",
     "patterns/special-choice.html",
     "patterns/spinner.html",
     "patterns/split-pane.html",
+    "patterns/split.html",
     "patterns/stack.html",
     "patterns/state-survivability.html",
     "patterns/status-lozenge.html",
     "patterns/steps.html",
+    "patterns/surface.html",
     "patterns/survey-progress.html",
     "patterns/switch.html",
     "patterns/switcher.html",
     "patterns/symbol-rating.html",
     "patterns/tabs.html",
+    "patterns/text-field.html",
+    "patterns/text-roles.html",
+    "patterns/textarea.html",
     "patterns/timeline.html",
     "patterns/toast.html",
     "patterns/tooltip.html",
@@ -156,6 +169,7 @@
     "patterns/validation-message.html",
     "patterns/validation-summary.html",
     "patterns/verification-frame.html",
+    "patterns/visually-hidden.html",
     "patterns/wizard.html",
     "patterns/work-queue.html",
     "patterns/workspace-shell.html",
@@ -163,13 +177,13 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 300750,
+    "all.css": 309758,
     "assessment.css": 34482,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 189629,
-    "foundations.css": 10639,
+    "components.css": 198383,
+    "foundations.css": 10893,
     "marketing.css": 45073,
     "patterns/active-filter-summary.html": 532,
     "patterns/alert.html": 384,
@@ -178,6 +192,8 @@
     "patterns/badge.html": 411,
     "patterns/best-worst.html": 1268,
     "patterns/binary-choice.html": 652,
+    "patterns/bounded-overflow.html": 596,
+    "patterns/button.html": 187,
     "patterns/callout.html": 1408,
     "patterns/card-grid.html": 1032,
     "patterns/character-grid-3270.html": 4693,
@@ -200,11 +216,13 @@
     "patterns/comparison-pairs.html": 770,
     "patterns/composer.html": 1074,
     "patterns/conflict-review.html": 854,
+    "patterns/container.html": 245,
     "patterns/conversation.html": 1009,
     "patterns/cta.html": 597,
     "patterns/dashboard-grid.html": 590,
     "patterns/data-grid.html": 1316,
     "patterns/date-range.html": 519,
+    "patterns/date-time-field.html": 367,
     "patterns/dense-ledger.html": 526,
     "patterns/diagnostic-status.html": 303,
     "patterns/diagram.html": 4260,
@@ -231,13 +249,15 @@
     "patterns/focus-stage.html": 377,
     "patterns/frame.html": 365,
     "patterns/freshness.html": 187,
+    "patterns/grid.html": 305,
     "patterns/handoff-summary.html": 686,
     "patterns/hero.html": 1066,
     "patterns/hierarchical-choice.html": 919,
     "patterns/hierarchical-multi-choice.html": 1086,
     "patterns/hierarchy-tree.html": 480,
     "patterns/identifier.html": 617,
-    "patterns/image-choice.html": 878,
+    "patterns/image-choice.html": 1813,
+    "patterns/key-value-list.html": 238,
     "patterns/landmark-region.html": 265,
     "patterns/lane-board.html": 710,
     "patterns/marketing-shell.html": 2405,
@@ -282,6 +302,7 @@
     "patterns/scroll-progress.html": 446,
     "patterns/search.html": 385,
     "patterns/section-heading.html": 528,
+    "patterns/section.html": 190,
     "patterns/security-blockers.html": 399,
     "patterns/security-evidence-age.html": 370,
     "patterns/security-evidence-chain.html": 432,
@@ -298,20 +319,26 @@
     "patterns/site-footer.html": 702,
     "patterns/site-header.html": 922,
     "patterns/skeleton.html": 354,
+    "patterns/skip-link.html": 186,
     "patterns/slider.html": 403,
-    "patterns/spatial-canvas.html": 951,
+    "patterns/spatial-canvas.html": 976,
     "patterns/special-choice.html": 568,
     "patterns/spinner.html": 175,
     "patterns/split-pane.html": 348,
+    "patterns/split.html": 344,
     "patterns/stack.html": 353,
     "patterns/state-survivability.html": 999,
     "patterns/status-lozenge.html": 358,
     "patterns/steps.html": 287,
+    "patterns/surface.html": 206,
     "patterns/survey-progress.html": 446,
     "patterns/switch.html": 506,
     "patterns/switcher.html": 386,
     "patterns/symbol-rating.html": 1493,
     "patterns/tabs.html": 741,
+    "patterns/text-field.html": 359,
+    "patterns/text-roles.html": 396,
+    "patterns/textarea.html": 387,
     "patterns/timeline.html": 902,
     "patterns/toast.html": 525,
     "patterns/tooltip.html": 2188,
@@ -319,6 +346,7 @@
     "patterns/validation-message.html": 180,
     "patterns/validation-summary.html": 530,
     "patterns/verification-frame.html": 1245,
+    "patterns/visually-hidden.html": 144,
     "patterns/wizard.html": 817,
     "patterns/work-queue.html": 971,
     "patterns/workspace-shell.html": 479,