@akcelik/strct 5.3.0 → 5.5.0

package/fesm2022/akcelik-strct.mjs

@@ -2539,6 +2539,25 @@ class StrctProgress {
     /** A quiet line under the bar — "219 GB free across 2 nodes". */
     caption = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /**
+     * The caption's tone. A critical capacity line's note — "2 GB left after the
+     * tightest node" — is the warning; `--t3` says it is an aside.
+     */
+    captionStatus = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionStatus" }] : /* istanbul ignore next */ []));
+    /**
+     * The bar's accessible name, when the visible `label` is not it: a column of
+     * per-cluster memory bars would otherwise all be named "Memory". Defaults to
+     * `label`.
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Where `showValue` puts the number: on its own row above the track, or
+     * beside it — which is what a bar inside a table cell wants.
+     */
+    valuePosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valuePosition" }] : /* istanbul ignore next */ []));
     /** Running, but with no percentage to report. */
     indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Stack several fills (used now + what would arrive); clamped to 100 total. */
@@ -2594,13 +2613,13 @@ class StrctProgress {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctProgress, isStandalone: true, selector: "strct-progress", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, visibleLabel: { classPropertyName: "visibleLabel", publicName: "visibleLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-progress--neutral": "resolvedStatus() === 'neutral'", "class.strct-progress--success": "resolvedStatus() === 'success'", "class.strct-progress--warning": "resolvedStatus() === 'warning'", "class.strct-progress--critical": "resolvedStatus() === 'critical'" }, classAttribute: "strct-progress" }, ngImport: i0, template: `
-    @if (visibleLabel() || showValue()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctProgress, isStandalone: true, selector: "strct-progress", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, visibleLabel: { classPropertyName: "visibleLabel", publicName: "visibleLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, captionStatus: { classPropertyName: "captionStatus", publicName: "captionStatus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-progress--neutral": "resolvedStatus() === 'neutral'", "class.strct-progress--success": "resolvedStatus() === 'success'", "class.strct-progress--warning": "resolvedStatus() === 'warning'", "class.strct-progress--critical": "resolvedStatus() === 'critical'", "class.strct-progress--endvalue": "showValue() && valuePosition() === 'end'" }, classAttribute: "strct-progress" }, ngImport: i0, template: `
+    @if (visibleLabel() || (showValue() && valuePosition() === 'top')) {
       <div class="strct-progress__row">
         @if (visibleLabel()) {
           <span class="strct-progress__label">{{ label() }}</span>
         }
-        @if (showValue()) {
+        @if (showValue() && valuePosition() === 'top') {
           <span class="strct-progress__value">{{ valueText() || clamped() + '%' }}</span>
         }
       </div>
@@ -2608,7 +2627,7 @@ class StrctProgress {
     <div
       class="strct-progress__track"
       role="progressbar"
-      [attr.aria-label]="label() || 'Progress'"
+      [attr.aria-label]="ariaLabel() || label() || 'Progress'"
       [attr.aria-valuenow]="indeterminate() ? null : clamped()"
       [attr.aria-valuetext]="valueDescription()"
       [attr.aria-valuemin]="indeterminate() ? null : 0"
@@ -2627,20 +2646,28 @@ class StrctProgress {
         <div class="strct-progress__fill" [style.width.%]="clamped()"></div>
       }
     </div>
+    @if (showValue() && valuePosition() === 'end') {
+      <!-- A bar in a cell wants its number beside the track, not above it. -->
+      <span class="strct-progress__value strct-progress__value--end">{{
+        valueText() || clamped() + '%'
+      }}</span>
+    }
     @if (caption()) {
-      <p class="strct-progress__caption">{{ caption() }}</p>
+      <p class="strct-progress__caption strct-progress__caption--{{ captionStatus() ?? 'none' }}">
+        {{ caption() }}
+      </p>
     }
-  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProgress, decorators: [{
             type: Component,
             args: [{ selector: 'strct-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    @if (visibleLabel() || showValue()) {
+    @if (visibleLabel() || (showValue() && valuePosition() === 'top')) {
       <div class="strct-progress__row">
         @if (visibleLabel()) {
           <span class="strct-progress__label">{{ label() }}</span>
         }
-        @if (showValue()) {
+        @if (showValue() && valuePosition() === 'top') {
           <span class="strct-progress__value">{{ valueText() || clamped() + '%' }}</span>
         }
       </div>
@@ -2648,7 +2675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <div
       class="strct-progress__track"
       role="progressbar"
-      [attr.aria-label]="label() || 'Progress'"
+      [attr.aria-label]="ariaLabel() || label() || 'Progress'"
       [attr.aria-valuenow]="indeterminate() ? null : clamped()"
       [attr.aria-valuetext]="valueDescription()"
       [attr.aria-valuemin]="indeterminate() ? null : 0"
@@ -2667,8 +2694,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <div class="strct-progress__fill" [style.width.%]="clamped()"></div>
       }
     </div>
+    @if (showValue() && valuePosition() === 'end') {
+      <!-- A bar in a cell wants its number beside the track, not above it. -->
+      <span class="strct-progress__value strct-progress__value--end">{{
+        valueText() || clamped() + '%'
+      }}</span>
+    }
     @if (caption()) {
-      <p class="strct-progress__caption">{{ caption() }}</p>
+      <p class="strct-progress__caption strct-progress__caption--{{ captionStatus() ?? 'none' }}">
+        {{ caption() }}
+      </p>
     }
   `, host: {
                         class: 'strct-progress',
@@ -2676,8 +2711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-progress--success]': "resolvedStatus() === 'success'",
                         '[class.strct-progress--warning]': "resolvedStatus() === 'warning'",
                         '[class.strct-progress--critical]': "resolvedStatus() === 'critical'",
-                    }, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], visibleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }] } });
+                        '[class.strct-progress--endvalue]': "showValue() && valuePosition() === 'end'",
+                    }, styles: [".strct-progress{display:block}.strct-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-block-end:4px;font-size:var(--text-sm)}.strct-progress__label{color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-progress__value{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-progress__caption{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--t3)}.strct-progress__caption--accent{color:var(--acc)}.strct-progress__caption--success{color:var(--success)}.strct-progress__caption--warning{color:var(--warning)}.strct-progress__caption--critical{color:var(--critical)}.strct-progress--endvalue{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.strct-progress--endvalue .strct-progress__track{flex:1;min-width:0}.strct-progress__value--end{flex:none;font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums}.strct-progress--endvalue .strct-progress__caption,.strct-progress--endvalue .strct-progress__row{flex-basis:100%}.strct-progress__track{position:relative;display:flex;height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--neutral .strct-progress__fill{background:var(--t3)}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}.strct-progress .strct-progress__fill--neutral{background:var(--t3)}.strct-progress .strct-progress__fill--accent{background:var(--acc)}.strct-progress .strct-progress__fill--success{background:var(--success)}.strct-progress .strct-progress__fill--warning{background:var(--warning)}.strct-progress .strct-progress__fill--critical{background:var(--critical)}.strct-progress__track .strct-progress__fill+.strct-progress__fill{border-start-start-radius:0;border-end-start-radius:0}.strct-progress .strct-progress__fill--indeterminate{width:35%;animation:strct-progress-sweep 1.1s ease-in-out infinite}@keyframes strct-progress-sweep{0%{transform:translate(-120%)}to{transform:translate(340%)}}@media(prefers-reduced-motion:reduce){.strct-progress .strct-progress__fill--indeterminate{width:100%;animation:none;background:repeating-linear-gradient(135deg,var(--acc) 0 6px,color-mix(in srgb,var(--acc) 45%,transparent) 6px 12px)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], visibleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], captionStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionStatus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }] } });
 
 /** Indeterminate loading ring. `<strct-spinner size="sm" />`. */
 class StrctSpinner {
@@ -18948,9 +18984,15 @@ class StrctFlow {
     /** 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. */
+    /**
+     * Column headings, in order — a string, or a `{ heading, emptyText }` for a
+     * column that must be drawn even when no node lands in it.
+     */
     columns = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** The columns as declared, normalised. */
+    columnDefs = computed(() => (this.columns() ?? []).map((c) => (typeof c === 'string' ? { heading: c } : c)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
     nodeTpl = contentChild(StrctFlowNodeTemplate, { ...(ngDevMode ? { debugName: "nodeTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -18985,10 +19027,18 @@ class StrctFlow {
             const c = this.columnOf().get(n.id) ?? 0;
             byColumn.set(c, [...(byColumn.get(c) ?? []), n]);
         }
-        const headings = this.columns() ?? [];
-        return [...byColumn.keys()]
+        const defs = this.columnDefs();
+        // A column with an emptyText is drawn even with nothing in it: "no other
+        // member" is the answer, and an absent column cannot say it.
+        const declared = defs.map((d, i) => (d.emptyText ? i : -1)).filter((i) => i >= 0);
+        return [...new Set([...byColumn.keys(), ...declared])]
             .sort((a, b) => a - b)
-            .map((index) => ({ index, heading: headings[index] ?? '', nodes: byColumn.get(index) }));
+            .map((index) => ({
+            index,
+            heading: defs[index]?.heading ?? '',
+            emptyText: defs[index]?.emptyText ?? '',
+            nodes: byColumn.get(index) ?? [],
+        }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnsView" }] : /* istanbul ignore next */ []));
     /** What a node says to assistive tech: itself, then where it leads. */
@@ -19133,10 +19183,14 @@ class StrctFlow {
             @if (col.heading) {
               <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
+            @if (!col.nodes.length && col.emptyText) {
+              <p class="strct-flow__colempty">{{ col.emptyText }}</p>
+            }
             <ul class="strct-flow__boxes">
               @for (node of col.nodes; track node.id) {
                 <li
                   class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [class.strct-flow__box--surface]="node.emphasis === 'surface'"
                   [attr.data-flow-node]="node.id"
                 >
                   @if (nodeTpl(); as tpl) {
@@ -19209,7 +19263,7 @@ class StrctFlow {
         <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--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 });
+  `, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.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,
@@ -19235,10 +19289,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             @if (col.heading) {
               <div class="strct-flow__colhead">{{ col.heading }}</div>
             }
+            @if (!col.nodes.length && col.emptyText) {
+              <p class="strct-flow__colempty">{{ col.emptyText }}</p>
+            }
             <ul class="strct-flow__boxes">
               @for (node of col.nodes; track node.id) {
                 <li
                   class="strct-flow__box strct-flow__box--{{ node.status ?? 'neutral' }}"
+                  [class.strct-flow__box--surface]="node.emphasis === 'surface'"
                   [attr.data-flow-node]="node.id"
                 >
                   @if (nodeTpl(); as tpl) {
@@ -19323,7 +19381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-flow--critical]': "status() === 'critical'",
                         '[class.strct-flow--live]': 'animated()',
                         '[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"] }]
+                    }, 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__box--surface.strct-flow__box--accent{background:var(--acc-m);color:var(--acc)}.strct-flow__box--surface.strct-flow__box--success{background:var(--success-bg);color:var(--success)}.strct-flow__box--surface.strct-flow__box--warning{background:var(--warning-bg);color:var(--warning)}.strct-flow__box--surface.strct-flow__box--critical{background:var(--critical-bg);color:var(--critical)}.strct-flow__box--surface .strct-flow__sub,.strct-flow__box--surface .strct-flow__role{color:inherit;opacity:.85}.strct-flow__colempty{margin:0;padding:var(--space-2) var(--space-3);border:1px dashed var(--b2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--t3)}.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 }] }] } });
 
 /**
@@ -19360,11 +19418,36 @@ class StrctMetricTile {
     ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
     /** Makes the whole tile a control that emits `activated`. */
     interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * What a plain click on an `href` tile does. `browser` follows the link, as
+     * today. `app` belongs to a single-page app: the click is prevented and
+     * `activated` fires, so the router navigates and the page is not reloaded —
+     * while a middle click or a modified one (Ctrl / Cmd / Shift / Alt) still
+     * opens the link the way the browser would, because the tile is a real
+     * link, not a button painted like one.
+     */
+    navigate = input('browser', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigate" }] : /* istanbul ignore next */ []));
     /** Emitted when an `interactive` tile is activated. */
     activated = output();
     /** The link / button's name: the KPI and its value, since the tile is the target. */
     hitLabel = computed(() => [this.label(), `${this.value()}${this.unit()}`].filter(Boolean).join(': '), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hitLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A plain primary click on an `href` tile, when `navigate="app"`: the
+     * browser's own navigation is prevented and `activated` carries it, so a
+     * single-page app routes instead of reloading. Anything the browser treats
+     * as "open this somewhere else" — a middle click, Ctrl / Cmd / Shift / Alt,
+     * or a link with a target — is left alone.
+     */
+    onHrefClick(event) {
+        if (this.navigate() !== 'app')
+            return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        this.activated.emit();
+    }
     /** Change indicator; sign drives the arrow + colour. Null hides it. */
     delta = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
@@ -19416,7 +19499,7 @@ class StrctMetricTile {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sparkStatus" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMetricTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMetricTile, isStandalone: true, selector: "strct-metric-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, captionStatus: { classPropertyName: "captionStatus", publicName: "captionStatus", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null }, deltaAriaLabel: { classPropertyName: "deltaAriaLabel", publicName: "deltaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "class.strct-mt--actionable": "href() || interactive()", "class.strct-mt--loading": "loading()", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "strct-mt" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctMetricTile, isStandalone: true, selector: "strct-metric-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, captionStatus: { classPropertyName: "captionStatus", publicName: "captionStatus", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null }, deltaAriaLabel: { classPropertyName: "deltaAriaLabel", publicName: "deltaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { properties: { "class.strct-mt--status": "status() !== 'neutral'", "attr.data-status": "status() !== 'neutral' ? status() : null", "class.strct-mt--actionable": "href() || interactive()", "class.strct-mt--loading": "loading()", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "strct-mt" }, ngImport: i0, template: `
     @if (loading()) {
       <strct-skeleton width="45%" height="12px" />
       <strct-skeleton width="65%" height="28px" />
@@ -19461,7 +19544,12 @@ class StrctMetricTile {
     <!-- A KPI you can drill into is a link. The hit area covers the tile, so
          the whole tile is the target and the focus ring is the tile's own. -->
     @if (href()) {
-      <a class="strct-mt__hit" [href]="href()" [attr.aria-label]="hitLabel()"></a>
+      <a
+        class="strct-mt__hit"
+        [href]="href()"
+        [attr.aria-label]="hitLabel()"
+        (click)="onHrefClick($event)"
+      ></a>
     } @else if (interactive()) {
       <button
         type="button"
@@ -19470,7 +19558,7 @@ class StrctMetricTile {
         (click)="activated.emit()"
       ></button>
     }
-  `, isInline: true, styles: [".strct-mt{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);min-width:0}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__meter:empty{display:none}.strct-mt__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;border-radius:inherit;cursor:pointer}.strct-mt__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mt--actionable:hover{border-color:var(--b3);background:var(--bg-2)}.strct-mt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:var(--text-3xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__caption--accent{color:var(--acc)}.strct-mt__caption--success{color:var(--success)}.strct-mt__caption--warning{color:var(--warning)}.strct-mt__caption--critical{color:var(--critical)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSkeleton, selector: "strct-skeleton", inputs: ["width", "height", "circle"] }, { kind: "component", type: StrctSparkline, selector: "strct-sparkline", inputs: ["data", "status", "area", "width", "height", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-mt{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);min-width:0}.strct-mt--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg);background:var(--t3)}.strct-mt[data-status=accent]:before{background:var(--acc)}.strct-mt[data-status=success]:before{background:var(--success)}.strct-mt[data-status=warning]:before{background:var(--warning)}.strct-mt[data-status=critical]:before{background:var(--critical)}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__meter:empty{display:none}.strct-mt__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;border-radius:inherit;cursor:pointer}.strct-mt__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mt--actionable:hover{border-color:var(--b3);background:var(--bg-2)}.strct-mt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:var(--text-3xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__caption--accent{color:var(--acc)}.strct-mt__caption--success{color:var(--success)}.strct-mt__caption--warning{color:var(--warning)}.strct-mt__caption--critical{color:var(--critical)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctSkeleton, selector: "strct-skeleton", inputs: ["width", "height", "circle"] }, { kind: "component", type: StrctSparkline, selector: "strct-sparkline", inputs: ["data", "status", "area", "width", "height", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMetricTile, decorators: [{
             type: Component,
@@ -19519,7 +19607,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <!-- A KPI you can drill into is a link. The hit area covers the tile, so
          the whole tile is the target and the focus ring is the tile's own. -->
     @if (href()) {
-      <a class="strct-mt__hit" [href]="href()" [attr.aria-label]="hitLabel()"></a>
+      <a
+        class="strct-mt__hit"
+        [href]="href()"
+        [attr.aria-label]="hitLabel()"
+        (click)="onHrefClick($event)"
+      ></a>
     } @else if (interactive()) {
       <button
         type="button"
@@ -19530,11 +19623,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     }
   `, host: {
                         class: 'strct-mt',
+                        '[class.strct-mt--status]': "status() !== 'neutral'",
+                        '[attr.data-status]': "status() !== 'neutral' ? status() : null",
                         '[class.strct-mt--actionable]': 'href() || interactive()',
                         '[class.strct-mt--loading]': 'loading()',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, styles: [".strct-mt{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);min-width:0}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__meter:empty{display:none}.strct-mt__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;border-radius:inherit;cursor:pointer}.strct-mt__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mt--actionable:hover{border-color:var(--b3);background:var(--bg-2)}.strct-mt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:var(--text-3xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__caption--accent{color:var(--acc)}.strct-mt__caption--success{color:var(--success)}.strct-mt__caption--warning{color:var(--warning)}.strct-mt__caption--critical{color:var(--critical)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], captionStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionStatus", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }], deltaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaAriaLabel", required: false }] }], invertDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "invertDelta", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+                    }, styles: [".strct-mt{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);min-width:0}.strct-mt--status:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg);background:var(--t3)}.strct-mt[data-status=accent]:before{background:var(--acc)}.strct-mt[data-status=success]:before{background:var(--success)}.strct-mt[data-status=warning]:before{background:var(--warning)}.strct-mt[data-status=critical]:before{background:var(--critical)}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__meter:empty{display:none}.strct-mt__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;border-radius:inherit;cursor:pointer}.strct-mt__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mt--actionable:hover{border-color:var(--b3);background:var(--bg-2)}.strct-mt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:var(--text-3xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__caption--accent{color:var(--acc)}.strct-mt__caption--success{color:var(--success)}.strct-mt__caption--warning{color:var(--warning)}.strct-mt__caption--critical{color:var(--critical)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], captionStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionStatus", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }], deltaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaAriaLabel", required: false }] }], invertDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "invertDelta", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 let heroCounter = 0;
 /** Default leading icon per status, when `icon` is not supplied. */
@@ -19574,16 +19669,33 @@ class StrctHero {
     /** Tighter padding for secondary placements. */
     dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * Opt into a polite live region (role="status") for banners whose content
-     * updates after load; static banners should leave this off. Critical heroes
-     * are always role="alert" regardless.
+     * How the banner announces itself. `true` opts a non-critical hero into a
+     * polite live region (`role="status"`), for content that updates after load.
+     * `'polite'` and `'assertive'` say it outright, whatever the status — a page
+     * that renders its verdict on navigation wants `'polite'`, so a critical
+     * hero does not interrupt on every load.
      */
-    live = input(false, { ...(ngDevMode ? { debugName: "live" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    live = input(false, { ...(ngDevMode ? { debugName: "live" } : /* istanbul ignore next */ {}), transform: (v) => v === 'assertive' || v === 'polite' ? v : booleanAttribute(v) });
+    /**
+     * A critical hero interrupts by default, because it usually appears in
+     * answer to something the user did. A page that renders a verdict on
+     * navigation would interrupt on every load instead, so `live="polite"` makes
+     * it a `status`; `live="assertive"` asks for `alert` whatever the status.
+     */
+    liveRole = computed(() => {
+        const live = this.live();
+        if (live === 'polite')
+            return 'status';
+        if (live === 'assertive')
+            return 'alert';
+        return this.status() === 'critical' ? 'alert' : live ? 'status' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveRole" }] : /* istanbul ignore next */ []));
     headingId = `strct-hero-${++heroCounter}`;
     resolvedIcon = computed(() => this.icon() || DEFAULT_ICON[this.status()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHero, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctHero, isStandalone: true, selector: "strct-hero", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-hero--accent": "status() === 'accent'", "class.strct-hero--success": "status() === 'success'", "class.strct-hero--warning": "status() === 'warning'", "class.strct-hero--critical": "status() === 'critical'", "class.strct-hero--dense": "dense()", "attr.role": "status() === 'critical' ? 'alert' : live() ? 'status' : null", "attr.aria-labelledby": "headingId" }, classAttribute: "strct-hero" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctHero, isStandalone: true, selector: "strct-hero", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-hero--accent": "status() === 'accent'", "class.strct-hero--success": "status() === 'success'", "class.strct-hero--warning": "status() === 'warning'", "class.strct-hero--critical": "status() === 'critical'", "class.strct-hero--dense": "dense()", "attr.role": "liveRole()", "attr.aria-labelledby": "headingId" }, classAttribute: "strct-hero" }, ngImport: i0, template: `
     <span class="strct-hero__chip" aria-hidden="true">
       <strct-icon [name]="resolvedIcon()" [size]="dense() ? 16 : 18" />
     </span>
@@ -19622,7 +19734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-hero--warning]': "status() === 'warning'",
                         '[class.strct-hero--critical]': "status() === 'critical'",
                         '[class.strct-hero--dense]': 'dense()',
-                        '[attr.role]': "status() === 'critical' ? 'alert' : live() ? 'status' : null",
+                        '[attr.role]': 'liveRole()',
                         '[attr.aria-labelledby]': 'headingId',
                     }, styles: [".strct-hero{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--b3)}.strct-hero--dense{padding:var(--space-3) var(--space-4);gap:var(--space-2)}.strct-hero__chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--bg-a);color:var(--t2)}.strct-hero--dense .strct-hero__chip{width:28px;height:28px}.strct-hero__text{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:3px}.strct-hero__heading{margin:0;font-size:var(--text-xl);font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:var(--leading-tight)}.strct-hero--dense .strct-hero__heading{font-size:var(--text-lg)}.strct-hero__desc{font-size:var(--text-md);color:var(--t2);line-height:var(--leading-normal)}.strct-hero__desc:empty{display:none}.strct-hero__aside{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);margin-inline-start:auto}.strct-hero__meta,.strct-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}.strct-hero__meta:empty,.strct-hero__actions:empty{display:none}.strct-hero__aside:not(:has(*:not(:empty))){display:none}.strct-hero--accent{border-inline-start-color:var(--acc)}.strct-hero--accent .strct-hero__chip{background:var(--acc);color:var(--inv)}.strct-hero--success{border-inline-start-color:var(--success)}.strct-hero--success .strct-hero__chip{background:var(--success);color:var(--inv)}.strct-hero--warning{border-inline-start-color:var(--warning)}.strct-hero--warning .strct-hero__chip{background:var(--warning);color:var(--inv)}.strct-hero--critical{border-inline-start-color:var(--critical)}.strct-hero--critical .strct-hero__chip{background:var(--critical);color:var(--inv)}@media(max-width:560px){.strct-hero__aside{margin-inline-start:0;align-items:stretch;width:100%}.strct-hero__meta,.strct-hero__actions{justify-content:flex-start}}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }] } });
@@ -20230,6 +20342,13 @@ class StrctEmptyState {
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     title = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Which heading element the title is. `null` renders a `<p>` — what a
+     * loading state inside a card wants, since it should not add a heading to
+     * the page outline.
+     */
+    titleLevel = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleLevel" }] : /* istanbul ignore next */ []));
     /**
      * `sm` is the inline row a 240px frame wants: a 16px icon with the title and
      * description on one line. A page-sized empty state stays `md`.
@@ -20243,7 +20362,7 @@ class StrctEmptyState {
     toneClass = computed(() => this.tone() || VARIANTS[this.variant()].tone, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctEmptyState, isStandalone: true, selector: "strct-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-empty--sm": "size() === 'sm'", "attr.aria-busy": "variant() === 'loading' ? 'true' : null" }, classAttribute: "strct-empty" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctEmptyState, isStandalone: true, selector: "strct-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, titleLevel: { classPropertyName: "titleLevel", publicName: "titleLevel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-empty--sm": "size() === 'sm'", "attr.aria-busy": "variant() === 'loading' ? 'true' : null" }, classAttribute: "strct-empty" }, ngImport: i0, template: `
     <span class="strct-empty__icon strct-empty__icon--{{ toneClass() }}">
       @if (variant() === 'loading') {
         <strct-spinner [size]="size() === 'sm' ? 'sm' : 'md'" [label]="title()" />
@@ -20255,12 +20374,33 @@ class StrctEmptyState {
         />
       }
     </span>
-    <h3 class="strct-empty__title">{{ title() }}</h3>
+    <!-- A zero state on a page is a heading; a loading state inside a card is
+         not, and an outline that gains an h3 while data loads is noise. -->
+    @switch (titleLevel()) {
+      @case (2) {
+        <h2 class="strct-empty__title">{{ title() }}</h2>
+      }
+      @case (3) {
+        <h3 class="strct-empty__title">{{ title() }}</h3>
+      }
+      @case (4) {
+        <h4 class="strct-empty__title">{{ title() }}</h4>
+      }
+      @case (5) {
+        <h5 class="strct-empty__title">{{ title() }}</h5>
+      }
+      @case (6) {
+        <h6 class="strct-empty__title">{{ title() }}</h6>
+      }
+      @default {
+        <p class="strct-empty__title">{{ title() }}</p>
+      }
+    }
     @if (description()) {
       <p class="strct-empty__desc">{{ description() }}</p>
     }
     <div class="strct-empty__actions"><ng-content /></div>
-  `, isInline: true, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\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 });
+  `, isInline: true, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font:inherit;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\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: StrctEmptyState, decorators: [{
             type: Component,
@@ -20276,7 +20416,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         />
       }
     </span>
-    <h3 class="strct-empty__title">{{ title() }}</h3>
+    <!-- A zero state on a page is a heading; a loading state inside a card is
+         not, and an outline that gains an h3 while data loads is noise. -->
+    @switch (titleLevel()) {
+      @case (2) {
+        <h2 class="strct-empty__title">{{ title() }}</h2>
+      }
+      @case (3) {
+        <h3 class="strct-empty__title">{{ title() }}</h3>
+      }
+      @case (4) {
+        <h4 class="strct-empty__title">{{ title() }}</h4>
+      }
+      @case (5) {
+        <h5 class="strct-empty__title">{{ title() }}</h5>
+      }
+      @case (6) {
+        <h6 class="strct-empty__title">{{ title() }}</h6>
+      }
+      @default {
+        <p class="strct-empty__title">{{ title() }}</p>
+      }
+    }
     @if (description()) {
       <p class="strct-empty__desc">{{ description() }}</p>
     }
@@ -20285,8 +20446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-empty',
                         '[class.strct-empty--sm]': "size() === 'sm'",
                         '[attr.aria-busy]': "variant() === 'loading' ? 'true' : null",
-                    }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+                    }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font:inherit;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty--sm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px var(--space-2);text-align:start;padding:var(--space-3)}.strct-empty--sm .strct-empty__icon{width:16px;height:16px;border-radius:0;margin-bottom:0;background:none;grid-row:1}.strct-empty--sm .strct-empty__title{font-size:13px;grid-row:1}.strct-empty--sm .strct-empty__desc,.strct-empty--sm .strct-empty__actions{grid-column:2}.strct-empty--sm .strct-empty__desc{font-size:var(--text-sm);max-width:none}.strct-empty--sm .strct-empty__actions:empty{display:none}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLevel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
 /**
  * Unit formatting for infrastructure consoles — bytes, rates, durations and
@@ -23700,6 +23861,14 @@ class StrctLegend {
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Rows become toggle buttons carrying `aria-pressed`. */
     interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * `legend` is the key of what is drawn: an off row is struck through,
+     * because it is a series that has been hidden. `picker` is a catalogue —
+     * the counters a host could show — where an off row is simply not picked,
+     * so it stays plain and the picked ones carry a check.
+     */
+    appearance = input('legend', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     /** The label of the row that was toggled. */
     itemToggle = output();
     /** The status vocabulary's own tokens — 'accent' is `--acc`, not `--accent`. */
@@ -23714,7 +23883,7 @@ class StrctLegend {
         return item.color ?? StrctLegend.TONE[item.status ?? 'accent'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctLegend, isStandalone: true, selector: "strct-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggle: "itemToggle" }, host: { properties: { "class.strct-legend--vertical": "orientation() === 'vertical'" }, classAttribute: "strct-legend" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctLegend, isStandalone: true, selector: "strct-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggle: "itemToggle" }, host: { properties: { "class.strct-legend--vertical": "orientation() === 'vertical'", "class.strct-legend--picker": "appearance() === 'picker'" }, classAttribute: "strct-legend" }, ngImport: i0, template: `
     <ul class="strct-legend__list" role="list">
       @for (item of items(); track item.label) {
         <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
@@ -23723,6 +23892,9 @@ class StrctLegend {
               type="button"
               class="strct-legend__hit"
               [attr.aria-pressed]="!item.off"
+              [disabled]="item.disabled || null"
+              [attr.title]="item.reason || null"
+              [attr.aria-description]="item.reason || null"
               (click)="itemToggle.emit(item.label)"
             >
               <span
@@ -23731,6 +23903,15 @@ class StrctLegend {
                 aria-hidden="true"
               ></span>
               <span class="strct-legend__label">{{ item.label }}</span>
+              @if (appearance() === 'picker') {
+                <!-- A picker says what is picked with a check; an unpicked row
+                     is simply not picked, so it is not struck through. -->
+                <span class="strct-legend__check" aria-hidden="true">
+                  @if (!item.off) {
+                    <strct-icon name="check" [size]="12" [strokeWidth]="2" />
+                  }
+                </span>
+              }
               @if (item.value !== undefined) {
                 <span class="strct-legend__value">{{ item.value }}</span>
               }
@@ -23749,11 +23930,11 @@ class StrctLegend {
         </li>
       }
     </ul>
-  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, 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--picker .strct-legend__hit[aria-pressed=false]{opacity:1}.strct-legend--picker .strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:none;color:var(--t2)}.strct-legend__check{display:inline-flex;width:12px;color:var(--acc);flex:none}.strct-legend__hit:disabled{cursor:not-allowed;opacity:.5}.strct-legend__hit:disabled .strct-legend__label{text-decoration:none}.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"], 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: StrctLegend, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+            args: [{ selector: 'strct-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
     <ul class="strct-legend__list" role="list">
       @for (item of items(); track item.label) {
         <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
@@ -23762,6 +23943,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
               type="button"
               class="strct-legend__hit"
               [attr.aria-pressed]="!item.off"
+              [disabled]="item.disabled || null"
+              [attr.title]="item.reason || null"
+              [attr.aria-description]="item.reason || null"
               (click)="itemToggle.emit(item.label)"
             >
               <span
@@ -23770,6 +23954,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 aria-hidden="true"
               ></span>
               <span class="strct-legend__label">{{ item.label }}</span>
+              @if (appearance() === 'picker') {
+                <!-- A picker says what is picked with a check; an unpicked row
+                     is simply not picked, so it is not struck through. -->
+                <span class="strct-legend__check" aria-hidden="true">
+                  @if (!item.off) {
+                    <strct-icon name="check" [size]="12" [strokeWidth]="2" />
+                  }
+                </span>
+              }
               @if (item.value !== undefined) {
                 <span class="strct-legend__value">{{ item.value }}</span>
               }
@@ -23791,10 +23984,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
   `, host: {
                         class: 'strct-legend',
                         '[class.strct-legend--vertical]': "orientation() === 'vertical'",
-                    }, 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"] }] } });
+                        '[class.strct-legend--picker]': "appearance() === 'picker'",
+                    }, 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--picker .strct-legend__hit[aria-pressed=false]{opacity:1}.strct-legend--picker .strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:none;color:var(--t2)}.strct-legend__check{display:inline-flex;width:12px;color:var(--acc);flex:none}.strct-legend__hit:disabled{cursor:not-allowed;opacity:.5}.strct-legend__hit:disabled .strct-legend__label{text-decoration:none}.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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }] } });
 
 const STEP_LABELS = {
+    planned: 'planned',
     pending: 'pending',
     active: 'in progress',
     done: 'done',
@@ -23841,6 +24036,14 @@ class StrctSteps {
     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 list's accessible name — "Migration plan", "Upgrade progress". An
+     * `<ol>` of steps with no name is one of several lists on a page.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Let a long pill label wrap instead of ending in an ellipsis. */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The state words read after each label. */
     labels = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
@@ -23851,8 +24054,8 @@ class StrctSteps {
         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">
+    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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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()", "class.strct-steps--wrap": "wrap()" }, classAttribute: "strct-steps" }, queries: [{ propertyName: "actionTpl", first: true, predicate: StrctStepAction, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    <ol class="strct-steps__list" [attr.aria-label]="label() || null">
       @for (step of steps(); track step.id; let i = $index) {
         <li
           class="strct-steps__step"
@@ -23884,12 +24087,12 @@ class StrctSteps {
         </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 });
+  `, 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--wrap .strct-steps__label{overflow:visible;text-overflow:clip;white-space:normal}.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=planned]{color:var(--t1);border-color:var(--b2)}.strct-steps--dots .strct-steps__step[data-state=planned] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b2)}.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">
+    <ol class="strct-steps__list" [attr.aria-label]="label() || null">
       @for (step of steps(); track step.id; let i = $index) {
         <li
           class="strct-steps__step"
@@ -23928,8 +24131,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[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 }] }] } });
+                        '[class.strct-steps--wrap]': 'wrap()',
+                    }, 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--wrap .strct-steps__label{overflow:visible;text-overflow:clip;white-space:normal}.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=planned]{color:var(--t1);border-color:var(--b2)}.strct-steps--dots .strct-steps__step[data-state=planned] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b2)}.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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", 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',
@@ -23948,6 +24152,13 @@ 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 */ []));
+    /**
+     * How the media fills the frame. `cover` crops to fill, as today; `contain`
+     * shows all of it — what a console thumbnail needs, since the corner it
+     * would crop is where the error is.
+     */
+    fit = input('cover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fit" }] : /* 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 */ []));
@@ -23973,7 +24184,7 @@ class StrctMediaFrame {
     }, /* @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: `
+    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 }, fit: { classPropertyName: "fit", publicName: "fit", 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()", "class.strct-mf--contain": "fit() === 'contain'" }, classAttribute: "strct-mf" }, ngImport: i0, template: `
     @if (state() === 'content') {
       <ng-content />
     } @else {
@@ -23996,7 +24207,7 @@ class StrctMediaFrame {
         (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 });
+  `, 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--contain>img,.strct-mf--contain>video,.strct-mf--contain>canvas{object-fit:contain}.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,
@@ -24028,8 +24239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[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"] }] } });
+                        '[class.strct-mf--contain]': "fit() === 'contain'",
+                    }, 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--contain>img,.strct-mf--contain>video,.strct-mf--contain>canvas{object-fit:contain}.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 }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", 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"] }] } });
 
 const WINDOW_LABELS = {
     minimize: 'Minimize',
@@ -24757,6 +24969,11 @@ class StrctChatComposer {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Disabled while the assistant is busy, say. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Only the send button is disabled: the reader may draft their next question
+     * while a reply is still streaming. `disabled` stops the typing as well.
+     */
+    sendDisabled = input(false, { ...(ngDevMode ? { debugName: "sendDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** How tall the box grows before it scrolls. */
     maxRows = input(8, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
@@ -24789,7 +25006,7 @@ class StrctChatComposer {
     }
     submit() {
         const text = this.value().trim();
-        if (!text || this.disabled())
+        if (!text || this.disabled() || this.sendDisabled())
             return;
         this.send.emit(text);
         this.value.set('');
@@ -24801,7 +25018,7 @@ class StrctChatComposer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatComposer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChatComposer, isStandalone: true, selector: "strct-chat-composer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, sendLabel: { classPropertyName: "sendLabel", publicName: "sendLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", send: "send" }, host: { classAttribute: "strct-composer" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChatComposer, isStandalone: true, selector: "strct-chat-composer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sendDisabled: { classPropertyName: "sendDisabled", publicName: "sendDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, sendLabel: { classPropertyName: "sendLabel", publicName: "sendLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", send: "send" }, host: { classAttribute: "strct-composer" }, ngImport: i0, template: `
     <label class="strct-composer__label" [attr.for]="inputId">{{ label() }}</label>
     <div class="strct-composer__box">
       <textarea
@@ -24821,7 +25038,7 @@ class StrctChatComposer {
         type="button"
         class="strct-composer__send"
         [attr.aria-label]="sendLabel()"
-        [disabled]="disabled() || !value().trim()"
+        [disabled]="disabled() || sendDisabled() || !value().trim()"
         (click)="submit()"
       >
         <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
@@ -24851,14 +25068,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         type="button"
         class="strct-composer__send"
         [attr.aria-label]="sendLabel()"
-        [disabled]="disabled() || !value().trim()"
+        [disabled]="disabled() || sendDisabled() || !value().trim()"
         (click)="submit()"
       >
         <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
       </button>
     </div>
   `, host: { class: 'strct-composer' }, styles: [".strct-composer{display:block}.strct-composer__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-composer__box{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);transition:border-color .14s ease,box-shadow .14s ease}.strct-composer__box:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;padding:6px 0;font-family:var(--font);font-size:13px;line-height:20px;color:var(--t1);overflow-y:auto}.strct-composer__input:focus{outline:none}.strct-composer__input::placeholder{color:var(--t3)}.strct-composer__send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--radius-md);background:var(--acc);color:var(--inv);cursor:pointer}.strct-composer__send:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-composer__send:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], sendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sendDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendDisabled", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], sendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }] } });
 let composerCounter = 0;
 
 /**
@@ -26279,6 +26496,14 @@ class StrctToolbar {
         const idx = items.indexOf(active);
         if (idx < 0)
             return; // focus is not on a toolbar control
+        // A control that has opened something owns its own arrow keys: a select's
+        // listbox, a menu, a tree inside a popover. The bar's roving must not take
+        // them, or the list cannot be walked from the keyboard at all.
+        if (active?.getAttribute('aria-expanded') === 'true')
+            return;
+        const target = event.target;
+        if (target?.closest('[role=listbox], [role=menu], [role=dialog], [role=tree], [role=grid]'))
+            return;
         const vertical = this.orientation() === 'vertical';
         const prevKey = vertical ? 'ArrowUp' : 'ArrowLeft';
         const nextKey = vertical ? 'ArrowDown' : 'ArrowRight';