@akcelik/strct 4.18.0 → 4.20.0

package/fesm2022/akcelik-strct.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, contentChildren, HostListener, effect, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, ViewContainerRef, Injector, viewChildren, Renderer2, Pipe, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -1033,21 +1033,66 @@ class StrctShellService {
  *   </strct-shell>
  */
 class StrctShell {
+    /**
+     * Id of the main region. Given one, the shell renders "Skip to main content"
+     * as its first focusable element — invisible until focused. Null (the
+     * default) renders nothing, so existing shells are unchanged.
+     */
+    skipLinkTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkTarget" }] : /* istanbul ignore next */ []));
+    /** The link's text (localisable). */
+    skipLinkLabel = input('Skip to main content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkLabel" }] : /* istanbul ignore next */ []));
+    doc = inject(DOCUMENT$1);
+    /**
+     * Moves focus rather than only the scroll position: an href alone scrolls
+     * without focusing, so the next Tab would resume from the link.
+     */
+    skipToMain(event) {
+        const id = this.skipLinkTarget();
+        const target = id ? this.doc.getElementById(id) : null;
+        if (!target)
+            return;
+        event.preventDefault();
+        if (!target.hasAttribute('tabindex'))
+            target.setAttribute('tabindex', '-1');
+        target.focus();
+        // Optional: not every environment implements it (jsdom does not).
+        target.scrollIntoView?.({ block: 'start' });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctShell, isStandalone: true, selector: "strct-shell", inputs: { skipLinkTarget: { classPropertyName: "skipLinkTarget", publicName: "skipLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skipLinkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-shell" }, providers: [StrctShellService], ngImport: i0, template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, decorators: [{
             type: Component,
             args: [{ selector: 'strct-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StrctShellService], template: `
+    @if (skipLinkTarget()) {
+      <!-- The first focusable element on the page, invisible until focused. -->
+      <a
+        class="strct-shell__skip"
+        [attr.href]="'#' + skipLinkTarget()"
+        (click)="skipToMain($event)"
+        >{{ skipLinkLabel() }}</a
+      >
+    }
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}\n"] }]
-        }] });
+  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+        }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
 /** Top application bar. Holds brand on the left and actions on the right. */
 class StrctHeader {
     /** Accessible label of the mobile drawer toggle. */
@@ -2790,13 +2835,20 @@ class StrctAccordionPanel {
     /** Whether the panel is open (two-way). */
     expanded = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /**
+     * `quiet` is a fold in running text — no border or background, a `--text-sm`
+     * summary in `--t2` with a chevron, the body indented. It reads like a raw
+     * `<details>` while keeping the button + region semantics.
+     */
+    appearance = input('boxed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     bodyId = `strct-acc-${++accordionCounter}`;
     headId = `${this.bodyId}-head`;
     toggle() {
         this.expanded.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAccordionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAccordionPanel, isStandalone: true, selector: "strct-accordion-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "strct-acc" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAccordionPanel, isStandalone: true, selector: "strct-accordion-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.strct-acc--quiet": "appearance() === 'quiet'" }, classAttribute: "strct-acc" }, ngImport: i0, template: `
     <button
       type="button"
       class="strct-acc__head"
@@ -2815,7 +2867,7 @@ class StrctAccordionPanel {
         <ng-content />
       </div>
     }
-  `, isInline: true, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\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 });
+  `, isInline: true, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}.strct-acc--quiet+.strct-acc--quiet{border-top:0}.strct-acc--quiet .strct-acc__head{width:auto;padding:2px 0;gap:6px;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-acc--quiet .strct-acc__head:hover{background:none;color:var(--t1);text-decoration:underline}.strct-acc--quiet .strct-acc__head:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-acc--quiet .strct-acc__title{flex:none}.strct-acc--quiet .strct-acc__body{padding:4px 0 8px;padding-inline-start:var(--space-3);border-top:0;font-size:var(--text-sm)}\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: StrctAccordionPanel, decorators: [{
             type: Component,
@@ -2838,8 +2890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <ng-content />
       </div>
     }
-  `, host: { class: 'strct-acc' }, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+  `, host: {
+                        class: 'strct-acc',
+                        '[class.strct-acc--quiet]': "appearance() === 'quiet'",
+                    }, styles: [".strct-acc{display:block}.strct-acc+.strct-acc{border-top:1px solid var(--b2)}.strct-acc__head{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:start}.strct-acc__head:hover{background:var(--bg-3)}.strct-acc__chevron{display:inline-flex;color:var(--t3);transition:transform .16s ease}.strct-acc__chevron--open{transform:rotate(90deg);color:var(--acc)}[dir=rtl] .strct-acc__chevron:not(.strct-acc__chevron--open){transform:rotate(180deg)}.strct-acc__title{flex:1}.strct-acc__body{padding:4px 14px 14px;padding-inline-start:32px;color:var(--t2);font-size:13px;border-top:1px solid var(--b1)}.strct-acc--quiet+.strct-acc--quiet{border-top:0}.strct-acc--quiet .strct-acc__head{width:auto;padding:2px 0;gap:6px;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-acc--quiet .strct-acc__head:hover{background:none;color:var(--t1);text-decoration:underline}.strct-acc--quiet .strct-acc__head:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-acc--quiet .strct-acc__title{flex:none}.strct-acc--quiet .strct-acc__body{padding:4px 0 8px;padding-inline-start:var(--space-3);border-top:0;font-size:var(--text-sm)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 let tabsCounter = 0;
 /** A single tab. Place inside `<strct-tabs>`; `label` names its button. */
@@ -18108,6 +18163,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 +18208,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 +18381,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 +18592,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
@@ -22532,6 +22848,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, 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 }] }] } });
 
+const STATE_ICON = {
+    empty: 'monitor',
+    off: 'stopped',
+    error: 'warning',
+};
+/**
+ * A live picture — a console thumbnail, a camera — sits in a fixed-ratio frame,
+ * and when there is no picture yet, or none at all, the frame says why **in its
+ * own small space**: an empty state is too large for a 240px card.
+ *
+ *   <strct-media-frame ratio="4 / 3"><img [src]="thumb" alt="" /></strct-media-frame>
+ *   <strct-media-frame state="off" message="The VM is off" />
+ */
+class StrctMediaFrame {
+    /** The frame's aspect ratio, as a CSS `aspect-ratio` value. */
+    ratio = input('4 / 3', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    /** What the frame shows: the projected picture, or why there is none. */
+    state = input('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** The placeholder's line ("The VM is off"). */
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Overrides the icon derived from `state`. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** The whole frame becomes one tab stop that emits `activated`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The accessible name of that control; falls back to `message`. */
+    activateLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activateLabel" }] : /* istanbul ignore next */ []));
+    /** The frame was activated. */
+    activated = output();
+    iconName = computed(() => {
+        const explicit = this.icon();
+        if (explicit)
+            return explicit;
+        const state = this.state();
+        return state === 'content' || state === 'loading' ? '' : STATE_ICON[state];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMediaFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMediaFrame, isStandalone: true, selector: "strct-media-frame", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, activateLabel: { classPropertyName: "activateLabel", publicName: "activateLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "style.aspect-ratio": "ratio()", "attr.data-state": "state()", "class.strct-mf--interactive": "interactive()" }, classAttribute: "strct-mf" }, ngImport: i0, template: `
+    @if (state() === 'content') {
+      <ng-content />
+    } @else {
+      <span class="strct-mf__placeholder">
+        @if (state() === 'loading') {
+          <strct-spinner size="sm" />
+        } @else if (iconName()) {
+          <strct-icon [name]="iconName()" [size]="20" />
+        }
+        @if (message()) {
+          <span class="strct-mf__msg">{{ message() }}</span>
+        }
+      </span>
+    }
+    @if (interactive()) {
+      <button
+        type="button"
+        class="strct-mf__hit"
+        [attr.aria-label]="activateLabel() || message() || null"
+        (click)="activated.emit()"
+      ></button>
+    }
+  `, isInline: true, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMediaFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-media-frame', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSpinner], template: `
+    @if (state() === 'content') {
+      <ng-content />
+    } @else {
+      <span class="strct-mf__placeholder">
+        @if (state() === 'loading') {
+          <strct-spinner size="sm" />
+        } @else if (iconName()) {
+          <strct-icon [name]="iconName()" [size]="20" />
+        }
+        @if (message()) {
+          <span class="strct-mf__msg">{{ message() }}</span>
+        }
+      </span>
+    }
+    @if (interactive()) {
+      <button
+        type="button"
+        class="strct-mf__hit"
+        [attr.aria-label]="activateLabel() || message() || null"
+        (click)="activated.emit()"
+      ></button>
+    }
+  `, host: {
+                        class: 'strct-mf',
+                        '[style.aspect-ratio]': 'ratio()',
+                        '[attr.data-state]': 'state()',
+                        '[class.strct-mf--interactive]': 'interactive()',
+                    }, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"] }]
+        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+
 /**
  * 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
@@ -24448,5 +24864,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, 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, 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 };
+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, StrctMediaFrame, 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