@akcelik/strct 5.8.0 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.8.0",
+  "version": "5.10.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -2915,6 +2915,18 @@ interface StrctSegmentedOption {
     icon?: string;
     /** Disable just this segment. */
     disabled?: boolean;
+    /**
+     * How much is behind this view — "History 14". Drawn after the label as a
+     * muted tabular number; the selected option keeps it muted.
+     */
+    count?: number;
+    /** A count that is itself the news: "Failed 3" in critical. */
+    countStatus?: StrctStatus;
+    /**
+     * What the count is called, for the option's accessible name: given
+     * `(n) => n + ' runs'`, the option reads "History, 14 runs".
+     */
+    countLabel?: (count: number) => string;
 }
 /** Segment size. */
 type StrctSegmentedSize = 'sm' | 'md';
@@ -3862,6 +3874,8 @@ interface StrctDatagridLabels {
     openDetail: string;
     toggleDetail: string;
     closeDetail: string;
+    /** The pane's way back to the list, when it has taken the list's place. */
+    backToList: string;
     rowActions: string;
     chooseColumns: string;
     refresh: string;
@@ -3919,6 +3933,27 @@ interface StrctDatagridColumn {
      */
     editor?: 'text' | 'number' | 'select';
     /** Options for `editor: 'select'` (the library's own option shape). */
+    /**
+     * What this column sorts by, when the cell does not show it: "1.5 TB" is
+     * sorted by its bytes, a formatted date by its timestamp. `null` and `''`
+     * are "unread" and sort last in both directions.
+     */
+    sortValue?: (row: StrctRow) => unknown;
+    /** Full control of the order, when a key is not enough. Wins over `sortValue`. */
+    comparator?: (a: StrctRow, b: StrctRow) => number;
+    /** What an export writes for this column; defaults to the stored value. */
+    exportValue?: (row: StrctRow) => unknown;
+    /**
+     * Keep this column visible while a `detailPane` is open. Without any, the
+     * list collapses to its first column — which cuts a long name in half and
+     * hides the status the operator is triaging by.
+     */
+    keepInPane?: boolean;
+    /**
+     * Hidden until the chooser is asked for it — the column exists, it is just
+     * not one of the defaults. A persisted or bound `columnState` wins.
+     */
+    hidden?: boolean;
     /**
      * The choices an `editor: 'select'` offers. A function is asked per row: a
      * rule that holds a value the host no longer reports lists it for that row
@@ -3956,12 +3991,60 @@ interface StrctDatagridLazyState {
     /** The global quick-filter term ('' when none). */
     quickFilter: string;
 }
+/**
+ * A group the consumer defines, beside `groupBy`. A triage page orders its
+ * groups by urgency, not alphabetically, and "Passed (59)" starts folded.
+ */
+interface StrctDatagridGroup {
+    /** The `groupBy` column's value this group holds. */
+    value: unknown;
+    /** Shown instead of the raw value. */
+    label?: string;
+    /** Tints the label and the count chip. */
+    status?: StrctStatus;
+    /** One muted line after the count — "Blocks the join until …". */
+    note?: string;
+    /** Initial state; groups are expanded by default. */
+    collapsed?: boolean;
+    /** Shown instead of the row count — a server's total. */
+    count?: number;
+}
+/**
+ * A fully custom group header row:
+ *
+ *   <ng-template strctGroupHeader let-group let-count="count">
+ *     <strct-badge [status]="group.status">{{ group.label }}</strct-badge> {{ count }}
+ *   </ng-template>
+ */
+/** The pane header's own title, instead of the first column's value. */
+declare class StrctDetailPaneTitle {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDetailPaneTitle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDetailPaneTitle, "[strctDetailPaneTitle]", never, {}, {}, never, never, true, never>;
+}
+/** Status, category, nodes — what the row is, beside its title. */
+declare class StrctDetailPaneMeta {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDetailPaneMeta, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDetailPaneMeta, "[strctDetailPaneMeta]", never, {}, {}, never, never, true, never>;
+}
+/** Controls at the pane header's end; the close button stays the library's. */
+declare class StrctDetailPaneActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDetailPaneActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDetailPaneActions, "[strctDetailPaneActions]", never, {}, {}, never, never, true, never>;
+}
+declare class StrctGroupHeaderDef {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctGroupHeaderDef, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctGroupHeaderDef, "ng-template[strctGroupHeader]", never, {}, {}, never, never, true, never>;
+}
 /** Persistable user column preferences (widths from resize, hidden from the
  *  chooser, order from drag-reorder). */
 interface StrctDatagridColumnState {
     widths?: Record<string, number>;
     hidden?: string[];
     order?: string[];
+    /** The column the operator sorted by, and which way. */
+    sortKey?: string | null;
+    sortDir?: 'asc' | 'desc';
 }
 /** One rendered tbody item: a data row, or a group header. */
 interface DgItem {
@@ -3971,6 +4054,8 @@ interface DgItem {
         label: string;
         count: number;
         collapsed: boolean;
+        status?: StrctStatus;
+        note?: string;
     };
 }
 /**
@@ -4015,6 +4100,22 @@ declare class StrctDatagrid {
     /** Collapse the grid to a single column and open a side detail pane for the
      *  clicked row (distinct from {@link expandable}). */
     readonly detailPane: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * How wide the list column is while the pane is open — px or any CSS width.
+     * 260px cuts a test name like "Validate Switch Enabled Teaming
+     * Configurations" in half and hides its status.
+     */
+    readonly paneListWidth: _angular_core.InputSignal<string>;
+    /**
+     * Below this container width (px) the pane takes the list's place, with a
+     * way back in its header, rather than squeezing both into a phone.
+     */
+    readonly paneTakeoverWidth: _angular_core.InputSignal<number>;
+    /**
+     * The row whose pane is open, two-way: a "what to do next" chip opens the
+     * finding it settles, a URL fragment deep-links to a test, `null` closes it.
+     */
+    readonly activeRowId: _angular_core.ModelSignal<unknown>;
     /** Compact density mode. */
     readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
@@ -4109,6 +4210,7 @@ declare class StrctDatagrid {
         openDetail: string;
         toggleDetail: string;
         closeDetail: string;
+        backToList: string;
         rowActions: string;
         chooseColumns: string;
         refresh: string;
@@ -4173,6 +4275,19 @@ declare class StrctDatagrid {
      * groups. Paging is bypassed while grouped; not combinable with `virtual`.
      */
     readonly groupBy: _angular_core.InputSignal<string | null>;
+    /**
+     * The groups themselves, beside `groupBy`: their order, their labels, a
+     * tone, a note, whether they start folded and a count of the consumer's
+     * own. Values no group mentions follow, in the order the rows arrived.
+     */
+    readonly groups: _angular_core.InputSignal<readonly StrctDatagridGroup[] | null>;
+    /** Keep a declared group that holds no rows, rather than dropping it. */
+    readonly showEmptyGroups: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Which groups are folded, two-way — so a summary counter elsewhere on the
+     * page can open the group it counts.
+     */
+    readonly collapsedGroups: _angular_core.ModelSignal<readonly unknown[]>;
     /**
      * Two-way per-column filter state: `key → contains-text` (text filter) or
      * `key → unknown[]` (checked value set). Applied client-side; in `lazy`
@@ -4239,6 +4354,9 @@ declare class StrctDatagrid {
     }>;
     private readonly menu;
     protected readonly detailDef: _angular_core.Signal<StrctRowDetailDef | undefined>;
+    /** An `<ng-template strctGroupHeader let-group let-count="count">`. */
+    protected readonly groupHeaderDef: _angular_core.Signal<StrctGroupHeaderDef | undefined>;
+    protected readonly paneTitleDef: _angular_core.Signal<StrctDetailPaneTitle | undefined>;
     protected readonly actionBarDef: _angular_core.Signal<StrctDatagridActionBar | undefined>;
     /** A read-only grid with a note needed an empty action bar to show it. */
     protected readonly actionBarCaptionDef: _angular_core.Signal<StrctDatagridActionBarCaption | undefined>;
@@ -4260,8 +4378,13 @@ declare class StrctDatagrid {
     onResizeStart(e: MouseEvent, key: string): void;
     private onResizeMove;
     private onResizeEnd;
-    private readonly activeId;
     protected readonly activeRow: _angular_core.Signal<StrctRow | null>;
+    /**
+     * Whether the container is too narrow to show the list and the pane at once.
+     * It is the grid's own width that decides, not the viewport: the same grid
+     * is wide in a page and narrow in a drawer.
+     */
+    protected readonly narrowPane: _angular_core.WritableSignal<boolean>;
     protected readonly canExpand: _angular_core.Signal<boolean>;
     protected readonly canDetail: _angular_core.Signal<boolean>;
     protected readonly paneOpen: _angular_core.Signal<boolean>;
@@ -4279,7 +4402,8 @@ declare class StrctDatagrid {
     protected onColDragOver(key: string, event: DragEvent): void;
     protected onColDrop(key: string): void;
     protected onColDragEnd(): void;
-    private readonly collapsedGroups;
+    /** The folded groups as a set, from the two-way `collapsedGroups`. */
+    private readonly collapsedSet;
     /** Collapse / expand one group header. */
     toggleGroup(key: unknown): void;
     /** What tbody renders: plain (virtual/paged) rows, or groups + their rows. */
@@ -4320,6 +4444,8 @@ declare class StrctDatagrid {
      *  the new tabindex has rendered. */
     private focusTreeRow;
     private readonly hostRef;
+    private readonly zone;
+    private readonly destroyRef;
     protected readonly editing: _angular_core.WritableSignal<{
         rowKey: unknown;
         colKey: string;
@@ -4473,11 +4599,28 @@ declare class StrctDatagrid {
     constructor();
     private readPersistedState;
     private applyColumnState;
+    /** Whether a persisted or bound state has already decided what is hidden. */
+    private hiddenDecidedByState;
+    /** Whether the columns' own `hidden` flags have been read (once). */
+    private declaredHiddenApplied;
+    /**
+     * Columns the consumer declared hidden — the default for a column no state
+     * mentions. A list that shows five of twenty columns says so on the columns,
+     * rather than seeding `columnState` and reaching into the library's storage
+     * key to keep from overriding what the operator chose.
+     */
+    private applyDeclaredHidden;
     /**
      * The grid as CSV: header labels + every non-hidden column, all rows in the
      * current order (client mode: the full sorted set, not just the page).
      */
     toCSV(): string;
+    /**
+     * What an export writes for a cell: what the column says, else the stored
+     * value. A templated cell shows "2 h 15 m" and stored 8100; without this the
+     * export carries the seconds, an enum code or a bare `true`.
+     */
+    private exportValueOf;
     /**
      * The grid as a real .xlsx workbook (dependency-free SpreadsheetML):
      * header labels + every non-hidden column in the current order, all rows in
@@ -4491,6 +4634,14 @@ declare class StrctDatagrid {
     protected colspan(): number;
     /** Toggle the detail pane for a row (triggered by its »  button, not the row,
      *  so row cells remain selectable for copy). */
+    /** One tab stop for the list while a pane can be opened from it. */
+    protected paneRowTabindex(row: StrctRow): number;
+    /**
+     * The mail-client contract a triage list is read with: Enter or Space opens
+     * the row's pane, the arrows move the active row while it is open, and
+     * Escape closes the pane and leaves focus on the row it came from.
+     */
+    protected onPaneRowKeydown(row: StrctRow, event: KeyboardEvent): void;
     openDetail(row: StrctRow): void;
     closePane(): void;
     /** Open the row-action menu next to the clicked kebab button. */
@@ -4536,9 +4687,20 @@ declare class StrctDatagrid {
     /** Emit every selected row: fresh objects from the latest data where
      *  available, the last known snapshot otherwise (off-page lazy rows). */
     private commitSelection;
+    /**
+     * One row's sort key for a column: what the column says to sort by, else the
+     * stored value. A cell that shows "1.5 TB" sorts as text without this, which
+     * puts it before "900 GB"; a date written by toLocaleString sorts across
+     * days and AM/PM by its characters.
+     */
+    private sortKeyOf;
+    /** The column a key belongs to — the comparator and the sort key need it. */
+    private columnOf;
+    /** Compare two rows by a column, honouring its comparator and nulls-last. */
+    private compareRows;
     private compare;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDatagrid, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "paging": { "alias": "paging"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "moreTotal": { "alias": "moreTotal"; "required": false; "isSignal": true; }; "groupSelect": { "alias": "groupSelect"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "editHint": { "alias": "editHint"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "quickFilter": { "alias": "quickFilter"; "required": false; "isSignal": true; }; "quickFilterFields": { "alias": "quickFilterFields"; "required": false; "isSignal": true; }; "quickFilterable": { "alias": "quickFilterable"; "required": false; "isSignal": true; }; "quickFilterAlign": { "alias": "quickFilterAlign"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; }, { "selectedId": "selectedIdChange"; "loadMore": "loadMore"; "selectedIds": "selectedIdsChange"; "columnState": "columnStateChange"; "filters": "filtersChange"; "quickFilter": "quickFilterChange"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["detailDef", "actionBarDef", "actionBarCaptionDef", "cellDefs"], ["[strctDatagridActionBarCaption]", "[strctDatagridActionBar]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "paneListWidth": { "alias": "paneListWidth"; "required": false; "isSignal": true; }; "paneTakeoverWidth": { "alias": "paneTakeoverWidth"; "required": false; "isSignal": true; }; "activeRowId": { "alias": "activeRowId"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "paging": { "alias": "paging"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "moreTotal": { "alias": "moreTotal"; "required": false; "isSignal": true; }; "groupSelect": { "alias": "groupSelect"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "editHint": { "alias": "editHint"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "showEmptyGroups": { "alias": "showEmptyGroups"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "quickFilter": { "alias": "quickFilter"; "required": false; "isSignal": true; }; "quickFilterFields": { "alias": "quickFilterFields"; "required": false; "isSignal": true; }; "quickFilterable": { "alias": "quickFilterable"; "required": false; "isSignal": true; }; "quickFilterAlign": { "alias": "quickFilterAlign"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; }, { "activeRowId": "activeRowIdChange"; "selectedId": "selectedIdChange"; "loadMore": "loadMore"; "selectedIds": "selectedIdsChange"; "columnState": "columnStateChange"; "collapsedGroups": "collapsedGroupsChange"; "filters": "filtersChange"; "quickFilter": "quickFilterChange"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["detailDef", "groupHeaderDef", "paneTitleDef", "actionBarDef", "actionBarCaptionDef", "cellDefs"], ["[strctDatagridActionBarCaption]", "[strctDatagridActionBar]", "[strctDetailPaneTitle]", "[strctDetailPaneMeta]", "[strctDetailPaneActions]"], true, never>;
 }
 
 /** Timeline node state colors. */
@@ -5275,6 +5437,17 @@ declare class StrctMetricTile {
     readonly href: _angular_core.InputSignal<string | null>;
     /** Makes the whole tile a control that emits `activated`. */
     readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The tile is a filter: `true` draws it on and says `aria-pressed`, `false`
+     * draws it off and still says so. `null` (the default) is a tile that is
+     * not a toggle at all, which must not claim a pressed state.
+     */
+    readonly pressed: _angular_core.InputSignalWithTransform<boolean | null, string | boolean | null | undefined>;
+    /**
+     * `sm` is the verdict-band size: six counters beside a one-line verdict at
+     * 1440px, where the dashboard size fits three.
+     */
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     /**
      * 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
@@ -5320,7 +5493,7 @@ declare class StrctMetricTile {
     protected readonly deltaTone: _angular_core.Signal<"flat" | "up" | "down">;
     protected readonly sparkStatus: _angular_core.Signal<StrctChartStatus>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMetricTile, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMetricTile, "strct-metric-tile", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "captionStatus": { "alias": "captionStatus"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; "deltaAriaLabel": { "alias": "deltaAriaLabel"; "required": false; "isSignal": true; }; "invertDelta": { "alias": "invertDelta"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[strctMetricMeter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMetricTile, "strct-metric-tile", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "captionStatus": { "alias": "captionStatus"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "navigate": { "alias": "navigate"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; "deltaAriaLabel": { "alias": "deltaAriaLabel"; "required": false; "isSignal": true; }; "invertDelta": { "alias": "invertDelta"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[strctMetricMeter]"], true, never>;
 }
 
 /**
@@ -6501,9 +6674,16 @@ declare class StrctStatusDot {
      * not jitter. Under `prefers-reduced-motion` the halo is a static ring.
      */
     readonly pulse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * `solid` is an outcome. `ring` — a 2px outline with a transparent centre —
+     * is a state that is **not** one: "Inconclusive", "Not applicable",
+     * "Unknown". They must not read as Warning or Passed with only the colour
+     * to tell them apart, so the shape carries the difference (WCAG 1.4.1).
+     */
+    readonly variant: _angular_core.InputSignal<"solid" | "ring">;
     protected readonly text: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctStatusDot, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctStatusDot, "strct-status-dot", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctStatusDot, "strct-status-dot", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** What a live view is currently doing. */
@@ -7760,5 +7940,5 @@ declare function strctCheckHostInputs(host: HTMLElement, selector: string, owns:
  */
 declare function strctCheckHostDisplay(host: HTMLElement, selector: string, expected: string): void;
 
-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, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, 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, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctReorderMoveEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };
+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, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridGroup, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctReorderMoveEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };