@akcelik/strct 4.13.0 → 4.15.0

package/fesm2022/akcelik-strct.mjs

@@ -17439,6 +17439,14 @@ class StrctDonut {
     ...(ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []));
     /** Show a legend (color · label · value · %) beside the ring. */
     legend = input(false, { ...(ngDevMode ? { debugName: "legend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the legend sits: beside the ring, or under it. */
+    legendPosition = input('side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * A zero-value category keeps its legend row, muted — "0 failed" is
+     * information. Set it false to drop those rows instead.
+     */
+    keepEmpty = input(true, { ...(ngDevMode ? { debugName: "keepEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Gap between slices, in degrees. */
     gap = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
@@ -17477,6 +17485,12 @@ class StrctDonut {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
+    /** The rows the legend shows — every arc, or only the non-empty ones. */
+    legendArcs = computed(() => {
+        const rows = this.arcs().map((arc, index) => ({ ...arc, index }));
+        return this.keepEmpty() ? rows : rows.filter((r) => r.value !== 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendArcs" }] : /* istanbul ignore next */ []));
     centerMain = computed(() => {
         const h = this.hovered();
         if (h !== null)
@@ -17512,7 +17526,7 @@ class StrctDonut {
         this.hovered.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDonut, isStandalone: true, selector: "strct-donut", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-donut" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDonut, isStandalone: true, selector: "strct-donut", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, keepEmpty: { classPropertyName: "keepEmpty", publicName: "keepEmpty", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-donut--legend-below": "legendPosition() === 'below'" }, classAttribute: "strct-donut" }, ngImport: i0, template: `
     <div class="strct-donut__layout">
       <div class="strct-donut__wrap" [style.width.px]="size()" [style.height.px]="size()">
         <svg
@@ -17561,12 +17575,13 @@ class StrctDonut {
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17578,7 +17593,7 @@ class StrctDonut {
         </ul>
       }
     </div>
-  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, decorators: [{
             type: Component,
@@ -17631,12 +17646,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17648,8 +17664,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </ul>
       }
     </div>
-  `, host: { class: 'strct-donut' }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
-        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+  `, host: {
+                        class: 'strct-donut',
+                        '[class.strct-donut--legend-below]': "legendPosition() === 'below'",
+                    }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
+        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], keepEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepEmpty", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
 
 const COLOR$1 = {
     accent: 'var(--acc)',
@@ -18021,6 +18040,22 @@ class StrctMetricTile {
     /** Tints the value (defaults to neutral primary text). */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * Tints the caption instead of the value — "2 down" is the warning, and the
+     * 14 nodes above it are not. `null` keeps the caption muted.
+     */
+    captionStatus = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionStatus" }] : /* istanbul ignore next */ []));
+    /** Renders the tile as a link: the whole tile is the target. */
+    href = input(null, /* @ts-ignore */
+    ...(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 });
+    /** 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 */ []));
     /** Change indicator; sign drives the arrow + colour. Null hides it. */
     delta = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
@@ -18072,7 +18107,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 }, 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 } }, host: { properties: { "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 }, 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: `
     @if (loading()) {
       <strct-skeleton width="45%" height="12px" />
       <strct-skeleton width="65%" height="28px" />
@@ -18098,8 +18133,14 @@ class StrctMetricTile {
         }
       </div>
 
+      <!-- A number over its bar: the meter sits under the value and above the
+           caption, so "62 %" and "of 80 GB" read as one thing. -->
+      <div class="strct-mt__meter"><ng-content select="[strctMetricMeter]" /></div>
+
       @if (caption()) {
-        <div class="strct-mt__caption">{{ caption() }}</div>
+        <div class="strct-mt__caption strct-mt__caption--{{ captionStatus() ?? 'none' }}">
+          {{ caption() }}
+        </div>
       }
 
       @if (data().length) {
@@ -18108,7 +18149,19 @@ class StrctMetricTile {
         </div>
       }
     }
-  `, isInline: true, styles: [".strct-mt{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__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__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 });
+    <!-- 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>
+    } @else if (interactive()) {
+      <button
+        type="button"
+        class="strct-mt__hit"
+        [attr.aria-label]="hitLabel()"
+        (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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMetricTile, decorators: [{
             type: Component,
@@ -18138,8 +18191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }
       </div>
 
+      <!-- A number over its bar: the meter sits under the value and above the
+           caption, so "62 %" and "of 80 GB" read as one thing. -->
+      <div class="strct-mt__meter"><ng-content select="[strctMetricMeter]" /></div>
+
       @if (caption()) {
-        <div class="strct-mt__caption">{{ caption() }}</div>
+        <div class="strct-mt__caption strct-mt__caption--{{ captionStatus() ?? 'none' }}">
+          {{ caption() }}
+        </div>
       }
 
       @if (data().length) {
@@ -18148,12 +18207,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </div>
       }
     }
+    <!-- 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>
+    } @else if (interactive()) {
+      <button
+        type="button"
+        class="strct-mt__hit"
+        [attr.aria-label]="hitLabel()"
+        (click)="activated.emit()"
+      ></button>
+    }
   `, host: {
                         class: 'strct-mt',
+                        '[class.strct-mt--actionable]': 'href() || interactive()',
                         '[class.strct-mt--loading]': 'loading()',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, styles: [".strct-mt{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__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__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 }] }], 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__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 }] }] } });
 
 let heroCounter = 0;
 /** Default leading icon per status, when `icon` is not supplied. */
@@ -18256,9 +18328,18 @@ class StrctAlert {
     /** Accessible label of the dismiss button (localizable). */
     dismissLabel = input('Dismiss', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Overrides the icon derived from `type` — a lock for a locked setting, a
+     * shield for a security note, when the tone alone does not say what kind of
+     * note this is. `null` keeps the derived one.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Emitted when the alert is dismissed. */
     closed = output();
-    icon = computed(() => {
+    iconName = computed(() => this.icon() ?? this.derivedIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    derivedIcon = computed(() => {
         switch (this.type()) {
             case 'success':
                 return 'success';
@@ -18270,38 +18351,46 @@ class StrctAlert {
                 return 'info';
         }
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "derivedIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAlert, isStandalone: true, selector: "strct-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "type() === 'critical' ? 'alert' : 'status'", "class.strct-alert--success": "type() === 'success'", "class.strct-alert--warning": "type() === 'warning'", "class.strct-alert--critical": "type() === 'critical'" }, classAttribute: "strct-alert" }, ngImport: i0, template: `
-    <strct-icon [name]="icon()" [size]="16" />
-    <div class="strct-alert__body"><ng-content /></div>
-    @if (closable()) {
-      <button
-        type="button"
-        class="strct-alert__close"
-        [attr.aria-label]="dismissLabel()"
-        (click)="closed.emit()"
-      >
-        <strct-icon name="close" [size]="13" />
-      </button>
-    }
-  `, isInline: true, styles: [".strct-alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctAlert, isStandalone: true, selector: "strct-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "type() === 'critical' ? 'alert' : 'status'", "class.strct-alert--success": "type() === 'success'", "class.strct-alert--warning": "type() === 'warning'", "class.strct-alert--critical": "type() === 'critical'" }, classAttribute: "strct-alert" }, ngImport: i0, template: `
+    <!-- The row carries the layout, not the host: a consumer setting
+         display:block for spacing must not put the icon on its own line. -->
+    <div class="strct-alert__row">
+      <strct-icon class="strct-alert__icon" [name]="iconName()" [size]="16" />
+      <div class="strct-alert__body"><ng-content /></div>
+      @if (closable()) {
+        <button
+          type="button"
+          class="strct-alert__close"
+          [attr.aria-label]="dismissLabel()"
+          (click)="closed.emit()"
+        >
+          <strct-icon name="close" [size]="13" />
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\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: StrctAlert, decorators: [{
             type: Component,
             args: [{ selector: 'strct-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <strct-icon [name]="icon()" [size]="16" />
-    <div class="strct-alert__body"><ng-content /></div>
-    @if (closable()) {
-      <button
-        type="button"
-        class="strct-alert__close"
-        [attr.aria-label]="dismissLabel()"
-        (click)="closed.emit()"
-      >
-        <strct-icon name="close" [size]="13" />
-      </button>
-    }
+    <!-- The row carries the layout, not the host: a consumer setting
+         display:block for spacing must not put the icon on its own line. -->
+    <div class="strct-alert__row">
+      <strct-icon class="strct-alert__icon" [name]="iconName()" [size]="16" />
+      <div class="strct-alert__body"><ng-content /></div>
+      @if (closable()) {
+        <button
+          type="button"
+          class="strct-alert__close"
+          [attr.aria-label]="dismissLabel()"
+          (click)="closed.emit()"
+        >
+          <strct-icon name="close" [size]="13" />
+        </button>
+      }
+    </div>
   `, host: {
                         class: 'strct-alert',
                         // role="alert" implies aria-live="assertive" for critical alerts.
@@ -18309,8 +18398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-alert--success]': "type() === 'success'",
                         '[class.strct-alert--warning]': "type() === 'warning'",
                         '[class.strct-alert--critical]': "type() === 'critical'",
-                    }, styles: [".strct-alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+                    }, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 let tooltipCounter = 0;
 /**
@@ -21858,13 +21947,19 @@ class StrctStatusDot {
     /** Dot size: `sm` for dense rows, `md` standalone. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Something happening *now* — a task running, a live chart. The halo pulses
+     * once a second; the dot itself never changes size, so a column of dots does
+     * not jitter. Under `prefers-reduced-motion` the halo is a static ring.
+     */
+    pulse = input(false, { ...(ngDevMode ? { debugName: "pulse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     text = computed(() => this.label() || DEFAULT_LABEL[this.status()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctStatusDot, isStandalone: true, selector: "strct-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-dot--accent": "status() === 'accent'", "class.strct-dot--success": "status() === 'success'", "class.strct-dot--warning": "status() === 'warning'", "class.strct-dot--critical": "status() === 'critical'", "class.strct-dot--sm": "size() === 'sm'", "class.strct-dot--pulse": "pulse()" }, classAttribute: "strct-dot" }, ngImport: i0, template: `
     <span class="strct-dot__dot" aria-hidden="true"></span>
     <span class="strct-dot__sr">{{ text() }}</span>
-  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStatusDot, decorators: [{
             type: Component,
@@ -21878,8 +21973,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-dot--warning]': "status() === 'warning'",
                         '[class.strct-dot--critical]': "status() === 'critical'",
                         '[class.strct-dot--sm]': "size() === 'sm'",
-                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                        '[class.strct-dot--pulse]': 'pulse()',
+                    }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
+
+const DEFAULT_LABELS = {
+    live: 'Live',
+    liveEvery: (s) => `Live · updates every ${s} s`,
+    connecting: 'Connecting…',
+    reconnecting: 'Reconnecting…',
+    paused: 'Paused',
+    stale: (relative) => `Last updated ${relative}`,
+    justNow: 'just now',
+    minutesAgo: (n) => `${n} min ago`,
+    hoursAgo: (n) => `${n} h ago`,
+};
+const TONE = {
+    live: 'success',
+    connecting: 'accent',
+    reconnecting: 'warning',
+    paused: 'neutral',
+    stale: 'warning',
+};
+/**
+ * "Live · updates every 5 s" and "Reconnecting…" are states of one indicator,
+ * not three captions written by hand next to three hand-rolled dots. A dot that
+ * is live and a dot that is merely green are different facts.
+ *
+ *   <strct-live-indicator state="live" [interval]="5000" />
+ *   <strct-live-indicator state="stale" [updatedAt]="lastRead" />
+ *
+ * It is a `role="status"`, so a change of state is announced politely — and the
+ * relative time re-renders on its own every 30 s without announcing each tick.
+ */
+class StrctLiveIndicator {
+    /** What the view is doing. */
+    state = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Refresh period in ms — turns "Live" into "Live · updates every 5 s". */
+    interval = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
+    /** When the data last arrived; drives the relative time of `stale`. */
+    updatedAt = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "updatedAt" }] : /* istanbul ignore next */ []));
+    /** Every string, for localisation. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    tone = computed(() => TONE[this.state()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Only a view that is actually receiving data pulses. */
+    pulsing = computed(() => this.state() === 'live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pulsing" }] : /* istanbul ignore next */ []));
+    L = computed(() => ({ ...DEFAULT_LABELS, ...this.labels() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
+    /** Re-read every 30 s, so "3 min ago" does not go stale on screen. */
+    now = signal(Date.now(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const timer = setInterval(() => this.now.set(Date.now()), 30_000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    }
+    relative = computed(() => {
+        const at = this.updatedAt();
+        if (at == null)
+            return '';
+        const ms = this.now() - (at instanceof Date ? at.getTime() : at);
+        const mins = Math.floor(ms / 60_000);
+        if (mins < 1)
+            return this.L().justNow;
+        if (mins < 60)
+            return this.L().minutesAgo(mins);
+        return this.L().hoursAgo(Math.floor(mins / 60));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "relative" }] : /* istanbul ignore next */ []));
+    text = computed(() => {
+        const l = this.L();
+        switch (this.state()) {
+            case 'live': {
+                const ms = this.interval();
+                return ms ? l.liveEvery(Math.round(ms / 1000)) : l.live;
+            }
+            case 'connecting':
+                return l.connecting;
+            case 'reconnecting':
+                return l.reconnecting;
+            case 'paused':
+                return l.paused;
+            case 'stale':
+                return this.relative() ? l.stale(this.relative()) : l.stale('');
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLiveIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctLiveIndicator, isStandalone: true, selector: "strct-live-indicator", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, updatedAt: { classPropertyName: "updatedAt", publicName: "updatedAt", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-state": "state()" }, classAttribute: "strct-live" }, ngImport: i0, template: `
+    <strct-status-dot size="sm" [status]="tone()" [pulse]="pulsing()" [label]="text()" />
+    <span class="strct-live__text">{{ text() }}</span>
+  `, isInline: true, styles: [".strct-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-live[data-state=reconnecting] .strct-live__text,.strct-live[data-state=stale] .strct-live__text{color:var(--warning)}.strct-live .strct-dot__sr{display:none}\n"], dependencies: [{ kind: "component", type: StrctStatusDot, selector: "strct-status-dot", inputs: ["status", "label", "size", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLiveIndicator, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-live-indicator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctStatusDot], template: `
+    <strct-status-dot size="sm" [status]="tone()" [pulse]="pulsing()" [label]="text()" />
+    <span class="strct-live__text">{{ text() }}</span>
+  `, host: {
+                        class: 'strct-live',
+                        role: 'status',
+                        'aria-live': 'polite',
+                        '[attr.data-state]': 'state()',
+                    }, styles: [".strct-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-live[data-state=reconnecting] .strct-live__text,.strct-live[data-state=stale] .strct-live__text{color:var(--warning)}.strct-live .strct-dot__sr{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], updatedAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatedAt", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
+
+/**
+ * A chart's key is a component. The same swatch · label · value rows serve a
+ * line chart's series picker, a diagram's edge styles and a donut's categories
+ * — instead of 9px squares with inline backgrounds written per screen.
+ *
+ *   <strct-legend [items]="series" orientation="vertical" />
+ *   <strct-legend [items]="edges" interactive (itemToggle)="toggle($event)" />
+ *
+ * A category with zero items still belongs in the key: pass it `muted`, because
+ * "0 failed" is information.
+ */
+class StrctLegend {
+    /** The rows of the key. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** `vertical` stacks the rows and aligns their values. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Rows become toggle buttons carrying `aria-pressed`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The label of the row that was toggled. */
+    itemToggle = output();
+    /** The status vocabulary's own tokens — 'accent' is `--acc`, not `--accent`. */
+    static TONE = {
+        neutral: 'var(--t3)',
+        accent: 'var(--acc)',
+        success: 'var(--success)',
+        warning: 'var(--warning)',
+        critical: 'var(--critical)',
+    };
+    swatchColor(item) {
+        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: `
+    <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">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </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 });
+}
+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: `
+    <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">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  `, 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"] }] } });
 
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
@@ -23747,5 +24063,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map