@echelon-foundry/design-system 0.3.0 → 0.4.0

package/dist/components.css

@@ -35,6 +35,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 --------------------------------------------- */
   /*
@@ -4340,6 +4342,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 +4388,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,20 +4472,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/foundations.css

@@ -107,6 +107,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); }

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.4.0 | forma-all.css | bundle echelon-marketing
     Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -647,6 +647,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); }
@@ -779,6 +781,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 --------------------------------------------- */
   /*
@@ -5084,6 +5088,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.
    */
@@ -5128,6 +5134,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; }
@@ -5172,20 +5218,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/marketing/forma-echelon-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.4.0 | forma-echelon-marketing.css | bundle echelon-marketing
     Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -747,6 +747,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); }

package/dist/marketing/forma-marketing-theme-echelon.css

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.4.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
     Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 

package/dist/marketing/forma-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.3.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.4.0 | forma-marketing.css | bundle echelon-marketing
     Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -746,6 +746,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); }

package/dist/marketing/forma-marketing.manifest.json

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.3.0",
+  "forma": "0.4.0",
   "bundle": "echelon-marketing",
   "description": "Forma presentation artifacts for Echelon marketing sites. Every artifact is a single self-contained CSS file with no imports or relative URLs.",
-  "releaseTag": "v0.3.0",
+  "releaseTag": "v0.4.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 77198,
-      "sha256": "9aec7b369ef6b60ceb5c8db51f088d232d2da07816cf9074ef1859fe035f4a65",
+      "bytes": 77452,
+      "sha256": "e9f2f952cbec98bbdf270d8a6ed639fa8abc57d45053a78acbb85775102f35ea",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.css",
@@ -23,7 +23,7 @@
       "file": "forma-marketing-theme-echelon.css",
       "description": "Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.",
       "bytes": 6295,
-      "sha256": "157f1ec870a8825a0bbbfed4e719db7b92962e2625a8165f73abc4214c01e907",
+      "sha256": "295da09137526ef046ec46101db12231755d13b5ce5377a180f34ea1064417c6",
       "sources": [
         "build/marketing/echelon-marketing.tokens.css",
         "themes/echelon/marketing.css"
@@ -32,8 +32,8 @@
     {
       "file": "forma-echelon-marketing.css",
       "description": "Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.",
-      "bytes": 83338,
-      "sha256": "383948a077c070ad4bda90688a84f65bd319fde1e326197d5917f0dde632f947",
+      "bytes": 83592,
+      "sha256": "c0634b649d91f3a4fda166c3b926655fd1dc0270406e0a2bb43dc38303fa7709",
       "sources": [
         "artifact:forma-marketing.css",
         "artifact:forma-marketing-theme-echelon.css"
@@ -42,8 +42,8 @@
     {
       "file": "forma-all.css",
       "description": "Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.",
-      "bytes": 301112,
-      "sha256": "06a5a33e06a5aefd7dead874c259c67611907074ec95346d30e0cdb57d18ea37",
+      "bytes": 310120,
+      "sha256": "0d74d63c0cf65c732e32c1cdc66d241cec660b198b1151c54b2edafc5e32fa68",
       "sources": [
         "dist/all.css"
       ]

package/dist/marketing/forma-marketing.sha256

@@ -1,4 +1,4 @@
-9aec7b369ef6b60ceb5c8db51f088d232d2da07816cf9074ef1859fe035f4a65  forma-marketing.css
-157f1ec870a8825a0bbbfed4e719db7b92962e2625a8165f73abc4214c01e907  forma-marketing-theme-echelon.css
-383948a077c070ad4bda90688a84f65bd319fde1e326197d5917f0dde632f947  forma-echelon-marketing.css
-06a5a33e06a5aefd7dead874c259c67611907074ec95346d30e0cdb57d18ea37  forma-all.css
+e9f2f952cbec98bbdf270d8a6ed639fa8abc57d45053a78acbb85775102f35ea  forma-marketing.css
+295da09137526ef046ec46101db12231755d13b5ce5377a180f34ea1064417c6  forma-marketing-theme-echelon.css
+c0634b649d91f3a4fda166c3b926655fd1dc0270406e0a2bb43dc38303fa7709  forma-echelon-marketing.css
+0d74d63c0cf65c732e32c1cdc66d241cec660b198b1151c54b2edafc5e32fa68  forma-all.css

package/dist/patterns/bounded-overflow.html

@@ -0,0 +1,9 @@
+<div class="ef-bounded-overflow" role="region" aria-label="Quarterly totals by region" tabindex="0">
+  <table>
+    <thead><tr><th scope="col">Region</th><th scope="col">Q1</th><th scope="col">Q2</th><th scope="col">Q3</th><th scope="col">Q4</th><th scope="col">Year</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">North America</th><td>1,204,000</td><td>1,318,500</td><td>1,402,250</td><td>1,511,000</td><td>5,435,750</td></tr>
+      <tr><th scope="row">Europe</th><td>904,100</td><td>931,000</td><td>1,010,400</td><td>1,120,900</td><td>3,966,400</td></tr>
+    </tbody>
+  </table>
+</div>

package/dist/patterns/button.html

@@ -0,0 +1,5 @@
+<div class="ef-actions">
+  <button type="submit">Save changes</button>
+  <button type="button">Cancel</button>
+  <a class="ef-button" href="#button-help">Read the help article</a>
+</div>

package/dist/patterns/container.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <div class="ef-container" data-ef-width="narrow">
+    <h2>Privacy notice</h2>
+    <p>Narrow containers keep reading-focused regions at a comfortable measure while the page background stays full width.</p>
+  </div>
+</div>

package/dist/patterns/date-time-field.html

@@ -0,0 +1,5 @@
+<div class="ef-field">
+  <label class="ef-field__label" for="date-time-field-due">Due date</label>
+  <span class="ef-field__description" id="date-time-field-due-description">The browser supplies its own date picker; typing the date also works.</span>
+  <input id="date-time-field-due" name="due" type="date" aria-describedby="date-time-field-due-description">
+</div>

package/dist/patterns/grid.html

@@ -0,0 +1,5 @@
+<ul class="ef-grid" aria-label="Environments" role="list">
+  <li class="ef-surface"><h3>Production</h3><p>12 services, all reporting.</p></li>
+  <li class="ef-surface"><h3>Staging</h3><p>12 services, 1 deploying.</p></li>
+  <li class="ef-surface"><h3>Development</h3><p>9 services, 3 idle.</p></li>
+</ul>

package/dist/patterns/image-choice.html

@@ -4,7 +4,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="compact" required>
     <span class="ef-choice__media">
-      <img src="/path/to/compact-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='21' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='32' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='43' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='54' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='65' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='76' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Compact layout</strong>
@@ -15,7 +15,7 @@
   <label class="ef-choice ef-choice--media">
     <input type="radio" name="layout-choice" value="spacious">
     <span class="ef-choice__media">
-      <img src="/path/to/spacious-layout.png" alt="">
+      <img width="160" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23e3e0d7'/%3E%3Crect x='10' y='10' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='34' width='140' height='8' fill='%23686d68'/%3E%3Crect x='10' y='58' width='140' height='8' fill='%23686d68'/%3E%3C/svg%3E" alt="">
     </span>
     <span class="ef-choice__content">
       <strong>Spacious layout</strong>

package/dist/patterns/key-value-list.html

@@ -0,0 +1,5 @@
+<dl class="ef-key-value-list">
+  <div><dt>Account</dt><dd>Northwind Logistics</dd></div>
+  <div><dt>Plan</dt><dd>Team, billed annually</dd></div>
+  <div><dt>Renewal</dt><dd><time datetime="2027-03-01">1 March 2027</time></dd></div>
+</dl>

package/dist/patterns/section.html

@@ -0,0 +1,4 @@
+<section class="ef-section" aria-labelledby="section-title">
+  <h2 id="section-title">Recent activity</h2>
+  <p>Sections separate page regions with a consistent block rhythm.</p>
+</section>

package/dist/patterns/skip-link.html

@@ -0,0 +1,6 @@
+<div class="ef-site">
+  <a class="ef-skip-link" href="#skip-link-main">Skip to main content</a>
+  <main id="skip-link-main" tabindex="-1">
+    <h1>Account settings</h1>
+  </main>
+</div>