@akcelik/strct 4.17.0 → 4.19.0

package/fesm2022/akcelik-strct.mjs

@@ -18108,6 +18108,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
   `, host: { class: 'strct-gauge' }, styles: [".strct-gauge{display:inline-block}.strct-gauge__wrap{position:relative}.strct-gauge__track{stroke:var(--bg-3)}@media(prefers-reduced-motion:no-preference){.strct-gauge__value{transition:stroke-dasharray .4s ease}}.strct-gauge__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-gauge__num{font-size:var(--text-2xl);font-weight:600;color:var(--t1);line-height:1}.strct-gauge__pct{font-size:12px;color:var(--t2);margin-inline-start:1px}.strct-gauge__label{font-size:12px;color:var(--t2);margin-top:3px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
 
+/**
+ * A node's own content in a fan-out diagram — chips, a bar, a count. The
+ * template's context is the node (`let-node`), including its `data`.
+ */
+class StrctFlowNodeTemplate {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlowNodeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctFlowNodeTemplate, isStandalone: true, selector: "ng-template[strctFlowNode]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlowNodeTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[strctFlowNode]' }]
+        }] });
 /**
  * Shows a connection between two (or N) endpoints with an optional animated
  * "flow" — moving dots travelling along the connector — to represent live data
@@ -18141,6 +18153,148 @@ class StrctFlow {
     /** Layout axis. */
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * `chain` (default) is the straight A → B connector. `fan-out` places nodes
+     * in columns and draws the edges between them; `tree` is `fan-out` with the
+     * columns derived from each node's depth.
+     */
+    layout = input('chain', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** The edges of a fan-out / tree. `null` keeps the consecutive chain. */
+    edges = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    /** Column headings, in order. */
+    columns = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    nodeTpl = contentChild(StrctFlowNodeTemplate, { ...(ngDevMode ? { debugName: "nodeTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /** Which column each node sits in: its own, or its depth in the edge graph. */
+    columnOf = computed(() => {
+        const nodes = this.nodes();
+        const map = new Map();
+        if (this.layout() === 'tree') {
+            const parents = new Map();
+            for (const e of this.edges() ?? [])
+                parents.set(e.to, e.from);
+            const depth = (id, seen = new Set()) => {
+                const parent = parents.get(id);
+                if (parent === undefined || seen.has(id))
+                    return 0;
+                seen.add(id);
+                return depth(parent, seen) + 1;
+            };
+            for (const n of nodes)
+                map.set(n.id, n.column ?? depth(n.id));
+            return map;
+        }
+        for (const [i, n] of nodes.entries())
+            map.set(n.id, n.column ?? i);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOf" }] : /* istanbul ignore next */ []));
+    /** The columns as rendered: a heading (when given) and the nodes in it. */
+    columnsView = computed(() => {
+        const byColumn = new Map();
+        for (const n of this.nodes()) {
+            const c = this.columnOf().get(n.id) ?? 0;
+            byColumn.set(c, [...(byColumn.get(c) ?? []), n]);
+        }
+        const headings = this.columns() ?? [];
+        return [...byColumn.keys()]
+            .sort((a, b) => a - b)
+            .map((index) => ({ index, heading: headings[index] ?? '', nodes: byColumn.get(index) }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsView" }] : /* istanbul ignore next */ []));
+    /** What a node says to assistive tech: itself, then where it leads. */
+    nodeSummary(node) {
+        const out = (this.edges() ?? [])
+            .filter((e) => e.from === node.id)
+            .map((e) => this.nodes().find((n) => n.id === e.to)?.label ?? e.to);
+        return out.length ? `→ ${out.join(', ')}` : '';
+    }
+    /** Measured edge geometry — recomputed whenever the boxes move or resize. */
+    edgePaths = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edgePaths" }] : /* istanbul ignore next */ []));
+    viewBox = signal('0 0 0 0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.observe());
+        // Re-measure when the data changes; the observer covers size changes.
+        effect(() => {
+            this.nodes();
+            this.edges();
+            this.layout();
+            queueMicrotask(() => this.measure());
+        });
+    }
+    observe() {
+        if (this.layout() === 'chain' || typeof ResizeObserver === 'undefined')
+            return;
+        const fan = this.host.nativeElement.querySelector('.strct-flow__fan');
+        if (!fan)
+            return;
+        const ro = new ResizeObserver(() => this.measure());
+        ro.observe(fan);
+        for (const box of fan.querySelectorAll('.strct-flow__box'))
+            ro.observe(box);
+        this.destroyRef.onDestroy(() => ro.disconnect());
+        this.measure();
+    }
+    /**
+     * Orthogonal connectors, from the boxes' real positions: out of the source's
+     * inline end, across the gap, then into the target's inline start.
+     */
+    measure() {
+        if (this.layout() === 'chain')
+            return;
+        const fan = this.host.nativeElement.querySelector('.strct-flow__fan');
+        const edges = this.edges();
+        if (!fan || !edges?.length) {
+            this.edgePaths.set([]);
+            return;
+        }
+        const base = fan.getBoundingClientRect();
+        this.viewBox.set(`0 0 ${Math.round(base.width)} ${Math.round(base.height)}`);
+        // Looked up from the boxes themselves rather than through a selector: a
+        // node id is consumer data, and CSS.escape is not everywhere (jsdom).
+        const boxes = new Map();
+        for (const el of fan.querySelectorAll('[data-flow-node]')) {
+            const id = el.dataset['flowNode'];
+            if (id)
+                boxes.set(id, el);
+        }
+        const rect = (id) => {
+            const el = boxes.get(id);
+            if (!el)
+                return null;
+            const r = el.getBoundingClientRect();
+            return { x: r.left - base.left, y: r.top - base.top, w: r.width, h: r.height };
+        };
+        const paths = [];
+        for (const [i, e] of edges.entries()) {
+            const a = rect(e.from);
+            const b = rect(e.to);
+            if (!a || !b)
+                continue;
+            const x1 = a.x + a.w;
+            const y1 = a.y + a.h / 2;
+            const x2 = b.x;
+            const y2 = b.y + b.h / 2;
+            const mid = x1 + (x2 - x1) / 2;
+            const d = Math.abs(y1 - y2) < 1
+                ? `M ${x1} ${y1} L ${x2} ${y2}`
+                : `M ${x1} ${y1} H ${mid} V ${y2} H ${x2}`;
+            paths.push({
+                key: `${e.from}-${e.to}-${i}`,
+                d,
+                status: e.status ?? 'neutral',
+                dashed: e.style === 'dashed',
+                animated: !!e.animated,
+            });
+        }
+        this.edgePaths.set(paths);
+    }
     /** A flow needs at least two terminals to animate. */
     connected = computed(() => this.nodes().length > 1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
@@ -18172,103 +18326,210 @@ class StrctFlow {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctFlow, isStandalone: true, selector: "strct-flow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class.strct-flow--vertical": "orientation() === 'vertical'", "class.strct-flow--neutral": "status() === 'neutral'", "class.strct-flow--accent": "status() === 'accent'", "class.strct-flow--success": "status() === 'success'", "class.strct-flow--warning": "status() === 'warning'", "class.strct-flow--critical": "status() === 'critical'", "class.strct-flow--live": "animated()", "attr.aria-label": "ariaLabel()" }, classAttribute: "strct-flow" }, ngImport: i0, template: `
-    <div class="strct-flow__row">
-      @for (node of nodes(); track node.id; let last = $last) {
-        <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
-          <span class="strct-flow__dot" aria-hidden="true"></span>
-          <span class="strct-flow__node-text">
-            <span class="strct-flow__label">{{ node.label }}</span>
-            @if (node.role) {
-              <span class="strct-flow__role">{{ node.role }}</span>
-            }
-            @if (node.sublabel) {
-              <span class="strct-flow__sub">{{ node.sublabel }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctFlow, isStandalone: true, selector: "strct-flow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "layout() === 'chain' ? 'img' : null", "class.strct-flow--fan": "layout() !== 'chain'", "class.strct-flow--vertical": "orientation() === 'vertical'", "class.strct-flow--neutral": "status() === 'neutral'", "class.strct-flow--accent": "status() === 'accent'", "class.strct-flow--success": "status() === 'success'", "class.strct-flow--warning": "status() === 'warning'", "class.strct-flow--critical": "status() === 'critical'", "class.strct-flow--live": "animated()", "attr.aria-label": "layout() === 'chain' ? ariaLabel() : null" }, classAttribute: "strct-flow" }, queries: [{ propertyName: "nodeTpl", first: true, predicate: StrctFlowNodeTemplate, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    @if (layout() !== 'chain') {
+      <div class="strct-flow__fan" #fan>
+        <!-- The edges are geometry, not content: they are measured from the
+             boxes after they render, and hidden from assistive tech, which is
+             given the structure instead. -->
+        <svg class="strct-flow__edges" aria-hidden="true" [attr.viewBox]="viewBox()">
+          @for (e of edgePaths(); track e.key) {
+            <path
+              class="strct-flow__edge strct-flow__edge--{{ e.status }}"
+              [class.strct-flow__edge--dashed]="e.dashed"
+              [class.strct-flow__edge--animated]="e.animated"
+              [attr.d]="e.d"
+              fill="none"
+            />
+          }
+        </svg>
+        @for (col of columnsView(); track col.index) {
+          <div class="strct-flow__col" role="group" [attr.aria-label]="col.heading || null">
+            @if (col.heading) {
+              <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
-          </span>
-        </div>
+            <ul class="strct-flow__boxes">
+              @for (node of col.nodes; track node.id) {
+                <li
+                  class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [attr.data-flow-node]="node.id"
+                >
+                  @if (nodeTpl(); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{ $implicit: node, node }"
+                    />
+                  } @else {
+                    <span class="strct-flow__label">{{ node.label }}</span>
+                    @if (node.role) {
+                      <span class="strct-flow__role">{{ node.role }}</span>
+                    }
+                    @if (node.sublabel) {
+                      <span class="strct-flow__sub">{{ node.sublabel }}</span>
+                    }
+                  }
+                  <span class="strct-flow__sr">{{ nodeSummary(node) }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      @if (label()) {
+        <div class="strct-flow__caption">{{ label() }}</div>
+      }
+    } @else {
+      <div class="strct-flow__row">
+        @for (node of nodes(); track node.id; let last = $last) {
+          <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
+            <span class="strct-flow__dot" aria-hidden="true"></span>
+            <span class="strct-flow__node-text">
+              <span class="strct-flow__label">{{ node.label }}</span>
+              @if (node.role) {
+                <span class="strct-flow__role">{{ node.role }}</span>
+              }
+              @if (node.sublabel) {
+                <span class="strct-flow__sub">{{ node.sublabel }}</span>
+              }
+            </span>
+          </div>
 
-        @if (!last) {
-          <div class="strct-flow__conn" aria-hidden="true">
-            <span class="strct-flow__line"></span>
-            @if (showArrow('forward')) {
-              <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
-            }
-            @if (showArrow('reverse')) {
-              <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
-            }
-            @if (animated()) {
+          @if (!last) {
+            <div class="strct-flow__conn" aria-hidden="true">
+              <span class="strct-flow__line"></span>
               @if (showArrow('forward')) {
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
               }
               @if (showArrow('reverse')) {
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
               }
-            }
-          </div>
+              @if (animated()) {
+                @if (showArrow('forward')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                }
+                @if (showArrow('reverse')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                }
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    @if (caption()) {
-      <div class="strct-flow__caption">{{ caption() }}</div>
+      @if (caption()) {
+        <div class="strct-flow__caption">{{ caption() }}</div>
+      }
     }
-  `, isInline: true, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow--fan{container-type:inline-size}.strct-flow__fan{position:relative;display:flex;align-items:flex-start;gap:var(--strct-flow-col-gap, 48px)}.strct-flow__edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.strct-flow__edge{stroke:var(--b3);stroke-width:1.5}.strct-flow__edge--accent{stroke:var(--acc)}.strct-flow__edge--success{stroke:var(--success)}.strct-flow__edge--warning{stroke:var(--warning)}.strct-flow__edge--critical{stroke:var(--critical)}.strct-flow__edge--dashed{stroke-dasharray:4 3}.strct-flow__edge--animated{stroke-dasharray:5 4;animation:strct-flow-dash 1s linear infinite}@keyframes strct-flow-dash{to{stroke-dashoffset:-9}}@media(prefers-reduced-motion:reduce){.strct-flow__edge--animated{animation:none}}.strct-flow__col{position:relative;flex:1 1 0;min-width:0}.strct-flow__colhead{font-size:var(--text-sm);font-weight:600;color:var(--t3);margin-block-end:var(--space-2)}.strct-flow__boxes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.strct-flow__box{display:flex;flex-direction:column;gap:3px;padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);min-width:0}.strct-flow__box--accent{border-color:var(--acc30)}.strct-flow__box--success{border-color:var(--success)}.strct-flow__box--warning{border-color:var(--warning)}.strct-flow__box--critical{border-color:var(--critical)}.strct-flow__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container (max-width: 480px){.strct-flow__fan{flex-direction:column;gap:var(--space-3)}.strct-flow__edges{display:none}.strct-flow__col{padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2)}}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFlow, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="strct-flow__row">
-      @for (node of nodes(); track node.id; let last = $last) {
-        <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
-          <span class="strct-flow__dot" aria-hidden="true"></span>
-          <span class="strct-flow__node-text">
-            <span class="strct-flow__label">{{ node.label }}</span>
-            @if (node.role) {
-              <span class="strct-flow__role">{{ node.role }}</span>
-            }
-            @if (node.sublabel) {
-              <span class="strct-flow__sub">{{ node.sublabel }}</span>
+            args: [{ selector: 'strct-flow', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: `
+    @if (layout() !== 'chain') {
+      <div class="strct-flow__fan" #fan>
+        <!-- The edges are geometry, not content: they are measured from the
+             boxes after they render, and hidden from assistive tech, which is
+             given the structure instead. -->
+        <svg class="strct-flow__edges" aria-hidden="true" [attr.viewBox]="viewBox()">
+          @for (e of edgePaths(); track e.key) {
+            <path
+              class="strct-flow__edge strct-flow__edge--{{ e.status }}"
+              [class.strct-flow__edge--dashed]="e.dashed"
+              [class.strct-flow__edge--animated]="e.animated"
+              [attr.d]="e.d"
+              fill="none"
+            />
+          }
+        </svg>
+        @for (col of columnsView(); track col.index) {
+          <div class="strct-flow__col" role="group" [attr.aria-label]="col.heading || null">
+            @if (col.heading) {
+              <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
-          </span>
-        </div>
+            <ul class="strct-flow__boxes">
+              @for (node of col.nodes; track node.id) {
+                <li
+                  class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [attr.data-flow-node]="node.id"
+                >
+                  @if (nodeTpl(); as tpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="tpl"
+                      [ngTemplateOutletContext]="{ $implicit: node, node }"
+                    />
+                  } @else {
+                    <span class="strct-flow__label">{{ node.label }}</span>
+                    @if (node.role) {
+                      <span class="strct-flow__role">{{ node.role }}</span>
+                    }
+                    @if (node.sublabel) {
+                      <span class="strct-flow__sub">{{ node.sublabel }}</span>
+                    }
+                  }
+                  <span class="strct-flow__sr">{{ nodeSummary(node) }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      @if (label()) {
+        <div class="strct-flow__caption">{{ label() }}</div>
+      }
+    } @else {
+      <div class="strct-flow__row">
+        @for (node of nodes(); track node.id; let last = $last) {
+          <div class="strct-flow__node strct-flow__node--{{ node.status ?? 'neutral' }}">
+            <span class="strct-flow__dot" aria-hidden="true"></span>
+            <span class="strct-flow__node-text">
+              <span class="strct-flow__label">{{ node.label }}</span>
+              @if (node.role) {
+                <span class="strct-flow__role">{{ node.role }}</span>
+              }
+              @if (node.sublabel) {
+                <span class="strct-flow__sub">{{ node.sublabel }}</span>
+              }
+            </span>
+          </div>
 
-        @if (!last) {
-          <div class="strct-flow__conn" aria-hidden="true">
-            <span class="strct-flow__line"></span>
-            @if (showArrow('forward')) {
-              <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
-            }
-            @if (showArrow('reverse')) {
-              <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
-            }
-            @if (animated()) {
+          @if (!last) {
+            <div class="strct-flow__conn" aria-hidden="true">
+              <span class="strct-flow__line"></span>
               @if (showArrow('forward')) {
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--fwd"></span>
               }
               @if (showArrow('reverse')) {
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
-                <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                <span class="strct-flow__arrow strct-flow__arrow--rev"></span>
               }
-            }
-          </div>
+              @if (animated()) {
+                @if (showArrow('forward')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--fwd strct-flow__pkt--3"></span>
+                }
+                @if (showArrow('reverse')) {
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--1"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--2"></span>
+                  <span class="strct-flow__pkt strct-flow__pkt--rev strct-flow__pkt--3"></span>
+                }
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    @if (caption()) {
-      <div class="strct-flow__caption">{{ caption() }}</div>
+      @if (caption()) {
+        <div class="strct-flow__caption">{{ caption() }}</div>
+      }
     }
   `, host: {
                         class: 'strct-flow',
-                        role: 'img',
+                        '[attr.role]': "layout() === 'chain' ? 'img' : null",
+                        '[class.strct-flow--fan]': "layout() !== 'chain'",
                         '[class.strct-flow--vertical]': "orientation() === 'vertical'",
                         '[class.strct-flow--neutral]': "status() === 'neutral'",
                         '[class.strct-flow--accent]': "status() === 'accent'",
@@ -18276,9 +18537,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-flow--warning]': "status() === 'warning'",
                         '[class.strct-flow--critical]': "status() === 'critical'",
                         '[class.strct-flow--live]': 'animated()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    }, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+                        '[attr.aria-label]': "layout() === 'chain' ? ariaLabel() : null",
+                    }, styles: [".strct-flow{--strct-flow-color: var(--acc);display:block}.strct-flow--neutral{--strct-flow-color: var(--t3)}.strct-flow--accent{--strct-flow-color: var(--acc)}.strct-flow--success{--strct-flow-color: var(--success)}.strct-flow--warning{--strct-flow-color: var(--warning)}.strct-flow--critical{--strct-flow-color: var(--critical)}.strct-flow__row{display:flex;align-items:center;gap:var(--space-2)}.strct-flow--vertical .strct-flow__row{flex-direction:column;align-items:stretch}.strct-flow--fan{container-type:inline-size}.strct-flow__fan{position:relative;display:flex;align-items:flex-start;gap:var(--strct-flow-col-gap, 48px)}.strct-flow__edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.strct-flow__edge{stroke:var(--b3);stroke-width:1.5}.strct-flow__edge--accent{stroke:var(--acc)}.strct-flow__edge--success{stroke:var(--success)}.strct-flow__edge--warning{stroke:var(--warning)}.strct-flow__edge--critical{stroke:var(--critical)}.strct-flow__edge--dashed{stroke-dasharray:4 3}.strct-flow__edge--animated{stroke-dasharray:5 4;animation:strct-flow-dash 1s linear infinite}@keyframes strct-flow-dash{to{stroke-dashoffset:-9}}@media(prefers-reduced-motion:reduce){.strct-flow__edge--animated{animation:none}}.strct-flow__col{position:relative;flex:1 1 0;min-width:0}.strct-flow__colhead{font-size:var(--text-sm);font-weight:600;color:var(--t3);margin-block-end:var(--space-2)}.strct-flow__boxes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.strct-flow__box{display:flex;flex-direction:column;gap:3px;padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);min-width:0}.strct-flow__box--accent{border-color:var(--acc30)}.strct-flow__box--success{border-color:var(--success)}.strct-flow__box--warning{border-color:var(--warning)}.strct-flow__box--critical{border-color:var(--critical)}.strct-flow__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container (max-width: 480px){.strct-flow__fan{flex-direction:column;gap:var(--space-3)}.strct-flow__edges{display:none}.strct-flow__col{padding-inline-start:var(--space-3);border-inline-start:2px solid var(--b2)}}.strct-flow__node{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);flex-shrink:0}.strct-flow__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--t3)}.strct-flow__node--accent .strct-flow__dot{background:var(--acc)}.strct-flow__node--success .strct-flow__dot{background:var(--success)}.strct-flow__node--warning .strct-flow__dot{background:var(--warning)}.strct-flow__node--critical .strct-flow__dot{background:var(--critical)}.strct-flow__node-text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-flow__label{font-size:var(--text-md);font-weight:600;color:var(--t1);line-height:1.2}.strct-flow__role{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--t3)}.strct-flow__sub{font-size:var(--text-sm);color:var(--t3)}.strct-flow__conn{position:relative;flex:1 1 auto;min-width:40px;height:2px;align-self:center}.strct-flow--vertical .strct-flow__conn{width:2px;min-width:0;height:28px;flex:0 0 28px;align-self:center}.strct-flow__line{position:absolute;inset:0;border-radius:2px;background:linear-gradient(to right,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow--vertical .strct-flow__line{background:linear-gradient(to bottom,var(--b3),color-mix(in srgb,var(--strct-flow-color) 55%,transparent),var(--b3))}.strct-flow__arrow{position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}.strct-flow__arrow--fwd{right:-1px;transform:translateY(-50%);border-inline-start:6px solid var(--strct-flow-color)}.strct-flow__arrow--rev{left:-1px;transform:translateY(-50%);border-inline-end:6px solid var(--strct-flow-color)}.strct-flow--vertical .strct-flow__arrow{top:auto;left:50%}.strct-flow--vertical .strct-flow__arrow--fwd{right:auto;bottom:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:6px solid var(--strct-flow-color);border-bottom:0}.strct-flow--vertical .strct-flow__arrow--rev{left:50%;top:-1px;transform:translate(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-bottom:6px solid var(--strct-flow-color);border-top:0}.strct-flow__pkt{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--strct-flow-color);box-shadow:0 0 5px var(--strct-flow-color)}.strct-flow--vertical .strct-flow__pkt{top:0;left:50%}.strct-flow__pkt--fwd{animation:strct-flow-fwd 1.8s linear infinite}.strct-flow__pkt--rev{animation:strct-flow-rev 1.8s linear infinite}.strct-flow--vertical .strct-flow__pkt--fwd{animation-name:strct-flow-fwd-v}.strct-flow--vertical .strct-flow__pkt--rev{animation-name:strct-flow-rev-v}.strct-flow__pkt--2{animation-delay:.6s}.strct-flow__pkt--3{animation-delay:1.2s}@keyframes strct-flow-fwd{0%{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}@keyframes strct-flow-rev{0%{left:100%;opacity:0}15%,85%{opacity:1}to{left:0;opacity:0}}@keyframes strct-flow-fwd-v{0%{top:0;opacity:0}15%,85%{opacity:1}to{top:100%;opacity:0}}@keyframes strct-flow-rev-v{0%{top:100%;opacity:0}15%,85%{opacity:1}to{top:0;opacity:0}}.strct-flow__caption{margin-top:var(--space-2);text-align:center;font-size:var(--text-sm);color:var(--t3)}.strct-flow--vertical .strct-flow__caption{text-align:start}@media(prefers-reduced-motion:reduce){.strct-flow__pkt{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], nodeTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctFlowNodeTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
  * Dense KPI tile: a label, a large value (+ unit), an optional change indicator
@@ -22395,6 +22656,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }] } });
 
+const STEP_LABELS = {
+    pending: 'pending',
+    active: 'in progress',
+    done: 'done',
+    failed: 'failed',
+    skipped: 'skipped',
+    blocked: 'blocked',
+};
+/**
+ * Per-step action for `appearance="cards"`. The template's context is the step:
+ *
+ *   <ng-template strctStepAction let-step>
+ *     <button strct-button size="sm" (click)="run(step)">Run</button>
+ *   </ng-template>
+ */
+class StrctStepAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStepAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctStepAction, isStandalone: true, selector: "ng-template[strctStepAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStepAction, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[strctStepAction]' }]
+        }] });
+/**
+ * A process the user *watches* rather than drives: an update run per host
+ * (Check → Download → Install → Verify), or a numbered method on a landing
+ * page. A wizard's rail is the wrong control — the user did not start each step
+ * and cannot go back to one — and a timeline implies history. Neither says
+ * "skipped" or "blocked".
+ *
+ *   <strct-steps [steps]="run" appearance="pills" />
+ *   <strct-steps [steps]="method" appearance="cards" numbered />
+ */
+class StrctSteps {
+    /** The steps, in order. */
+    steps = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** `pills` (default), `dots` for a long run, `cards` for a numbered method. */
+    appearance = input('pills', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Vertical stacks the steps and turns the connector into a rail. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Numbers the pills (cards are always numbered). */
+    numbered = input(false, { ...(ngDevMode ? { debugName: "numbered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Tighter pills, for one row per host in a long list. */
+    dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The state words read after each label. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    actionTpl = contentChild(StrctStepAction, { ...(ngDevMode ? { debugName: "actionTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    L = computed(() => ({ ...STEP_LABELS, ...this.labels() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
+    stateWord(state) {
+        return this.L()[state];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSteps, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSteps, isStandalone: true, selector: "strct-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-steps--dots": "appearance() === 'dots'", "class.strct-steps--cards": "appearance() === 'cards'", "class.strct-steps--vertical": "orientation() === 'vertical'", "class.strct-steps--numbered": "numbered()", "class.strct-steps--dense": "dense()" }, classAttribute: "strct-steps" }, queries: [{ propertyName: "actionTpl", first: true, predicate: StrctStepAction, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    <ol class="strct-steps__list">
+      @for (step of steps(); track step.id; let i = $index) {
+        <li
+          class="strct-steps__step"
+          [attr.data-state]="step.state"
+          [attr.aria-current]="step.state === 'active' ? 'step' : null"
+          [attr.title]="appearance() === 'cards' ? null : step.description || null"
+        >
+          <span class="strct-steps__marker" aria-hidden="true">
+            @if (numbered() || appearance() === 'cards') {
+              {{ i + 1 }}
+            }
+          </span>
+          <span class="strct-steps__text">
+            <span class="strct-steps__label">{{ step.label }}</span>
+            @if (appearance() === 'cards' && step.description) {
+              <span class="strct-steps__desc">{{ step.description }}</span>
+            }
+          </span>
+          @if (actionTpl(); as tpl) {
+            <span class="strct-steps__action">
+              <ng-container
+                [ngTemplateOutlet]="tpl"
+                [ngTemplateOutletContext]="{ $implicit: step, step }"
+              />
+            </span>
+          }
+          <!-- The colour says the state; this says it in words. -->
+          <span class="strct-steps__sr">{{ stateWord(step.state) }}</span>
+        </li>
+      }
+    </ol>
+  `, isInline: true, styles: [".strct-steps{display:block;min-width:0}.strct-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}.strct-steps--vertical .strct-steps__list{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.strct-steps__step{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--b2);border-radius:999px;font-size:var(--text-sm);color:var(--t2);background:var(--bg-1);min-width:0}.strct-steps--dense .strct-steps__step{padding:2px 8px}.strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:\"\";position:absolute;inset-inline-start:-5px;width:5px;height:1px;background:var(--b2)}.strct-steps--vertical .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:14px;top:-7px;width:1px;height:7px}.strct-steps__marker:empty{display:none}.strct-steps__marker{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--t2)}.strct-steps__text{display:flex;flex-direction:column;min-width:0}.strct-steps__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-steps__desc{font-size:var(--text-sm);color:var(--t3);white-space:normal}.strct-steps__action{margin-inline-start:auto;padding-inline-start:8px;flex:none}.strct-steps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-steps__step[data-state=done]{border-color:var(--success);color:var(--success)}.strct-steps__step[data-state=done] .strct-steps__marker{background:var(--success);color:var(--inv)}.strct-steps__step[data-state=active]{border-color:var(--acc);color:var(--acc);background:var(--acc-s)}.strct-steps__step[data-state=active] .strct-steps__marker{background:var(--acc);color:var(--inv)}.strct-steps__step[data-state=failed]{border-color:var(--critical);color:var(--critical)}.strct-steps__step[data-state=failed] .strct-steps__marker{background:var(--critical);color:var(--inv)}.strct-steps__step[data-state=blocked]{border-color:var(--warning);color:var(--warning)}.strct-steps__step[data-state=blocked] .strct-steps__marker{background:var(--warning);color:var(--inv)}.strct-steps__step[data-state=skipped]{color:var(--t3);border-style:dashed}.strct-steps__step[data-state=skipped] .strct-steps__label{text-decoration:line-through}.strct-steps__step[data-state=pending]{color:var(--t3);border-color:var(--t4)}.strct-steps__step[data-state=active]:after{content:\"\";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--acc);animation:strct-steps-pulse 1.4s ease-out infinite;pointer-events:none}@keyframes strct-steps-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.strct-steps__step[data-state=active]:after{animation:none;opacity:.5;transform:none}}.strct-steps--dots .strct-steps__step{padding:0;border:0;background:none;gap:4px}.strct-steps--dots .strct-steps__label{display:none}.strct-steps--dots .strct-steps__marker{display:inline-flex;width:9px;height:9px;font-size:0}.strct-steps--dots .strct-steps__step[data-state=pending] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b3)}.strct-steps--dots .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:-4px;width:4px}.strct-steps--cards .strct-steps__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-steps-card-min, 220px),100%),1fr));gap:var(--space-3)}.strct-steps--cards .strct-steps__step{align-items:flex-start;border-radius:var(--radius-lg);padding:var(--space-3);background:var(--bg-1)}.strct-steps--cards .strct-steps__label{font-weight:600;white-space:normal}.strct-steps--cards .strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSteps, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-steps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: `
+    <ol class="strct-steps__list">
+      @for (step of steps(); track step.id; let i = $index) {
+        <li
+          class="strct-steps__step"
+          [attr.data-state]="step.state"
+          [attr.aria-current]="step.state === 'active' ? 'step' : null"
+          [attr.title]="appearance() === 'cards' ? null : step.description || null"
+        >
+          <span class="strct-steps__marker" aria-hidden="true">
+            @if (numbered() || appearance() === 'cards') {
+              {{ i + 1 }}
+            }
+          </span>
+          <span class="strct-steps__text">
+            <span class="strct-steps__label">{{ step.label }}</span>
+            @if (appearance() === 'cards' && step.description) {
+              <span class="strct-steps__desc">{{ step.description }}</span>
+            }
+          </span>
+          @if (actionTpl(); as tpl) {
+            <span class="strct-steps__action">
+              <ng-container
+                [ngTemplateOutlet]="tpl"
+                [ngTemplateOutletContext]="{ $implicit: step, step }"
+              />
+            </span>
+          }
+          <!-- The colour says the state; this says it in words. -->
+          <span class="strct-steps__sr">{{ stateWord(step.state) }}</span>
+        </li>
+      }
+    </ol>
+  `, host: {
+                        class: 'strct-steps',
+                        '[class.strct-steps--dots]': "appearance() === 'dots'",
+                        '[class.strct-steps--cards]': "appearance() === 'cards'",
+                        '[class.strct-steps--vertical]': "orientation() === 'vertical'",
+                        '[class.strct-steps--numbered]': 'numbered()',
+                        '[class.strct-steps--dense]': 'dense()',
+                    }, styles: [".strct-steps{display:block;min-width:0}.strct-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}.strct-steps--vertical .strct-steps__list{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.strct-steps__step{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--b2);border-radius:999px;font-size:var(--text-sm);color:var(--t2);background:var(--bg-1);min-width:0}.strct-steps--dense .strct-steps__step{padding:2px 8px}.strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:\"\";position:absolute;inset-inline-start:-5px;width:5px;height:1px;background:var(--b2)}.strct-steps--vertical .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:14px;top:-7px;width:1px;height:7px}.strct-steps__marker:empty{display:none}.strct-steps__marker{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--t2)}.strct-steps__text{display:flex;flex-direction:column;min-width:0}.strct-steps__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-steps__desc{font-size:var(--text-sm);color:var(--t3);white-space:normal}.strct-steps__action{margin-inline-start:auto;padding-inline-start:8px;flex:none}.strct-steps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-steps__step[data-state=done]{border-color:var(--success);color:var(--success)}.strct-steps__step[data-state=done] .strct-steps__marker{background:var(--success);color:var(--inv)}.strct-steps__step[data-state=active]{border-color:var(--acc);color:var(--acc);background:var(--acc-s)}.strct-steps__step[data-state=active] .strct-steps__marker{background:var(--acc);color:var(--inv)}.strct-steps__step[data-state=failed]{border-color:var(--critical);color:var(--critical)}.strct-steps__step[data-state=failed] .strct-steps__marker{background:var(--critical);color:var(--inv)}.strct-steps__step[data-state=blocked]{border-color:var(--warning);color:var(--warning)}.strct-steps__step[data-state=blocked] .strct-steps__marker{background:var(--warning);color:var(--inv)}.strct-steps__step[data-state=skipped]{color:var(--t3);border-style:dashed}.strct-steps__step[data-state=skipped] .strct-steps__label{text-decoration:line-through}.strct-steps__step[data-state=pending]{color:var(--t3);border-color:var(--t4)}.strct-steps__step[data-state=active]:after{content:\"\";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--acc);animation:strct-steps-pulse 1.4s ease-out infinite;pointer-events:none}@keyframes strct-steps-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.strct-steps__step[data-state=active]:after{animation:none;opacity:.5;transform:none}}.strct-steps--dots .strct-steps__step{padding:0;border:0;background:none;gap:4px}.strct-steps--dots .strct-steps__label{display:none}.strct-steps--dots .strct-steps__marker{display:inline-flex;width:9px;height:9px;font-size:0}.strct-steps--dots .strct-steps__step[data-state=pending] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b3)}.strct-steps--dots .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:-4px;width:4px}.strct-steps--cards .strct-steps__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-steps-card-min, 220px),100%),1fr));gap:var(--space-3)}.strct-steps--cards .strct-steps__step{align-items:flex-start;border-radius:var(--radius-lg);padding:var(--space-3);background:var(--bg-1)}.strct-steps--cards .strct-steps__label{font-weight:600;white-space:normal}.strct-steps--cards .strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:none}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], actionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctStepAction), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+/**
+ * A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
+ * arrow is the library's, the new one is emphasised — and assistive tech hears
+ * a sentence rather than an arrow glyph.
+ *
+ *   <strct-change from="v10.27" to="v10.28" mono />
+ */
+class StrctChange {
+    /** The value before. */
+    from = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    /** The value after. */
+    to = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
+    /** Monospace, for versions and identifiers. */
+    mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What assistive tech hears in place of the arrow (localisable). */
+    label = input((from, to) => `from ${from} to ${to}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChange, isStandalone: true, selector: "strct-change", inputs: { from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: true, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-change--mono": "mono()" }, classAttribute: "strct-change" }, ngImport: i0, template: `
+    <span class="strct-change__from" aria-hidden="true">{{ from() }}</span>
+    <strct-icon
+      class="strct-change__arrow"
+      strictName="arrowRight"
+      [size]="13"
+      aria-hidden="true"
+    />
+    <span class="strct-change__to" aria-hidden="true">{{ to() }}</span>
+    <span class="strct-change__sr">{{ label()(from(), to()) }}</span>
+  `, isInline: true, styles: [".strct-change{display:inline-flex;align-items:center;gap:5px;min-width:0}.strct-change--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-change__from{color:var(--t3)}.strct-change__arrow{color:var(--t3);flex:none}.strct-change__to{color:var(--t1);font-weight:600}.strct-change__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChange, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-change', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <span class="strct-change__from" aria-hidden="true">{{ from() }}</span>
+    <strct-icon
+      class="strct-change__arrow"
+      strictName="arrowRight"
+      [size]="13"
+      aria-hidden="true"
+    />
+    <span class="strct-change__to" aria-hidden="true">{{ to() }}</span>
+    <span class="strct-change__sr">{{ label()(from(), to()) }}</span>
+  `, host: {
+                        class: 'strct-change',
+                        '[class.strct-change--mono]': 'mono()',
+                    }, styles: [".strct-change{display:inline-flex;align-items:center;gap:5px;min-width:0}.strct-change--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-change__from{color:var(--t3)}.strct-change__arrow{color:var(--t3);flex:none}.strct-change__to{color:var(--t1);font-weight:600}.strct-change__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], propDecorators: { from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: true }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: true }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
  * public primitive behind menus, signposts and rich pickers:
@@ -24261,5 +24709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map