@echelon-foundry/design-system 0.3.0-main.216.1 → 0.3.0-main.218.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).
 
 

package/contracts/diagram-presentation.json

@@ -0,0 +1,103 @@
+{
+  "schemaVersion": "1.0.0",
+  "contract": "forma.diagram-presentation",
+  "contractVersion": "2.0.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"],
+    "consumer": ["geometry", "routing", "semanticKind", "metadataValues", "metadataVisibility", "namedStyles", "paletteSlots", "metadataMappings", "appearancePrecedence", "membership"],
+    "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", "metadata": "ef-diagram-node__meta" },
+      "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"]
+    },
+    "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",
+    "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/dist/all.css

@@ -5079,6 +5079,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 +5125,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,17 +5209,88 @@
     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; }
   }
 

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,12 +177,12 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 300750,
+    "all.css": 306099,
     "assessment.css": 34482,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 189629,
+    "components.css": 194978,
     "foundations.css": 10639,
     "marketing.css": 45073,
     "patterns/active-filter-summary.html": 532,
@@ -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/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,

package/dist/components.css

@@ -4340,6 +4340,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.
    */
@@ -4384,6 +4386,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; }
@@ -4428,17 +4470,88 @@
     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; }
   }