@truenas/ui-components 0.4.11 → 0.5.0

package/types/truenas-ui-components.d.ts

@@ -1,6 +1,6 @@
 import * as _truenas_ui_components from '@truenas/ui-components';
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, OnInit, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader, ModifierKeys as ModifierKeys$1 } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
@@ -1300,6 +1300,7 @@ declare class TnButtonComponent implements AfterViewInit {
     classes: _angular_core.Signal<string[]>;
     handleAnchorClick(event: MouseEvent): void;
     private hostRef;
+    constructor();
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
@@ -1506,7 +1507,7 @@ declare class TnIconComponent {
 }
 
 type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'before' | 'after';
-declare class TnTooltipDirective implements OnInit, OnDestroy {
+declare class TnTooltipDirective implements AfterViewInit, OnDestroy {
     message: _angular_core.InputSignal<string>;
     position: _angular_core.InputSignal<TooltipPosition>;
     disabled: _angular_core.InputSignal<boolean>;
@@ -1520,22 +1521,44 @@ declare class TnTooltipDirective implements OnInit, OnDestroy {
     private _isTooltipVisible;
     private _positionSub;
     private _tooltipId;
-    /**
-     * Only point `aria-describedby` at the tooltip when there is actually a message to
-     * describe. Otherwise every host (e.g. an icon button with no tooltip) would carry a
-     * dangling reference to a tooltip element that is never rendered.
-     */
-    protected get _ariaDescribedBy(): string | null;
     private _overlay;
     private _elementRef;
     private _viewContainerRef;
     private _overlayPositionBuilder;
-    ngOnInit(): void;
+    private _ariaDescriber;
+    private _viewInitialized;
+    private _describedTarget;
+    private _describedMessage;
+    private _innerObserver;
+    /**
+     * Re-sync the description (see ngAfterViewInit) when the inputs change. The initial
+     * write cannot happen here: on the first run the host's child components (e.g.
+     * tn-button's inner `<button>`) have not rendered yet.
+     */
+    private readonly _syncDescriptionOnInputChange;
+    /**
+     * Expose the message to assistive tech via CDK's AriaDescriber: it keeps the text in
+     * a persistent visually-hidden element (so `aria-describedby` never dangles — the
+     * overlay tooltip only exists while shown) and adds/removes only its own id token,
+     * leaving descriptions the control already carries (form hints, error ids) intact.
+     * The description goes on the interactive element itself: the host when it is one,
+     * otherwise the first interactive descendant (e.g. `<tn-button>`'s inner `<button>`),
+     * because screen readers read descriptions off the focused control, not wrappers.
+     */
+    ngAfterViewInit(): void;
+    private _syncAriaDescription;
+    /**
+     * The overlay tooltip renders its message as HTML (`[innerHTML]`), but AriaDescriber
+     * writes the description as plain text — strip any markup so screen readers never
+     * announce literal tags. DOMParser parses inert markup (no script execution).
+     */
+    private _plainTextMessage;
+    private _removeAriaDescription;
     ngOnDestroy(): void;
     _onMouseEnter(): void;
     _onMouseLeave(): void;
-    _onFocus(): void;
-    _onBlur(): void;
+    _onFocusIn(): void;
+    _onFocusOut(event: FocusEvent): void;
     _onKeydown(event: KeyboardEvent): void;
     /** Shows the tooltip */
     show(delay?: number): void;
@@ -2977,6 +3000,15 @@ interface TnCardAction {
     handler: () => void;
     disabled?: boolean;
     icon?: string;
+    /**
+     * Tooltip for the action button — useful for explaining why an action is unavailable.
+     * Shows on pointer hover (including while the action is disabled, since hover
+     * retargets to the button's host element) and on keyboard focus while enabled. A
+     * disabled native button is not focusable, so keyboard-only users cannot reach the
+     * reason; screen reader users can still read it when browsing the button via its
+     * persistent `aria-describedby` description.
+     */
+    tooltip?: string;
     /**
      * Test-id applied to the rendered action button. Rendered under whichever attribute name
      * is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -6289,10 +6321,51 @@ declare class TnTableColumnDirective {
     name: _angular_core.InputSignal<string>;
     sortable: _angular_core.InputSignal<boolean>;
     width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Human-readable label for the column. Used as the default header text in the
+     * regular table layout AND the default field label in card mode, so a single
+     * annotation serves both — prefer this over a text-only `tnHeaderCellDef`.
+     * A `tnHeaderCellDef` template still overrides the header; `cardLabel` still
+     * overrides the card field label. Falls back to the column `name` when unset.
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Relative importance of this column in card mode (see `mobileLayout` on
+     * `tn-table`). Higher numbers render first; fields ranked beyond
+     * `cardPrimaryCount` fold under a "More fields" disclosure. Defaults to `0`,
+     * in which case columns fall back to their `displayedColumns` order. Has no
+     * effect in the regular (wide) table layout.
+     */
+    cardPriority: _angular_core.InputSignal<number>;
+    /**
+     * Marks this column as the card's title in card mode — rendered prominently
+     * in the card header alongside any row actions, never as a label/value field.
+     * If no column sets this, the first displayed column that isn't `cardHidden` is
+     * used, falling back to the first displayed column when every column is hidden —
+     * a column deliberately kept off the card is not promoted to its most prominent
+     * slot.
+     */
+    cardTitle: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, this column is omitted entirely from the card layout (e.g. a
+     * redundant id, or a column whose meaning is already conveyed by the title).
+     * Ignored in the regular table layout.
+     */
+    cardHidden: _angular_core.InputSignal<boolean>;
+    /**
+     * Overrides the field label shown for this column in card mode. Defaults to the
+     * column's `label`, then to the column name.
+     *
+     * A `tnHeaderCellDef` template is NOT used here — it is an `ng-template`, not
+     * text, so there is nothing to read out. A column whose header comes only from
+     * that template renders its bare column name as the card field label; set
+     * `label` (or `cardLabel`) to give the card something readable.
+     */
+    cardLabel: _angular_core.InputSignal<string | undefined>;
     headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     cellTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableColumnDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTableColumnDirective, "[tnColumnDef]", ["tnColumnDef"], { "name": { "alias": "tnColumnDef"; "required": true; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["headerTemplate", "cellTemplate"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTableColumnDirective, "[tnColumnDef]", ["tnColumnDef"], { "name": { "alias": "tnColumnDef"; "required": true; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "cardPriority": { "alias": "cardPriority"; "required": false; "isSignal": true; }; "cardTitle": { "alias": "cardTitle"; "required": false; "isSignal": true; }; "cardHidden": { "alias": "cardHidden"; "required": false; "isSignal": true; }; "cardLabel": { "alias": "cardLabel"; "required": false; "isSignal": true; }; }, {}, ["headerTemplate", "cellTemplate"], never, true, never>;
 }
 /**
  * Directive to define the expandable detail row template.
@@ -6313,18 +6386,80 @@ declare class TnDetailRowDefDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDetailRowDefDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnDetailRowDefDirective, "[tnDetailRowDef]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive to define a row's action controls (e.g. edit/delete buttons).
+ *
+ * Place inside `tn-table` to render a trailing actions column, pinned to the right edge
+ * in `scroll` mode (see `mobileLayout` on `tn-table`) and scrolling with the rest of the
+ * table above `cardBreakpoint`. In card mode the same template is rendered inline beside
+ * the card title, so row actions stay reachable at every viewport width. The template
+ * receives the row as its implicit context.
+ *
+ * @example
+ * ```html
+ * <tn-table [dataSource]="data" [displayedColumns]="columns">
+ *   ...column defs...
+ *   <ng-template tnRowActionsDef let-row>
+ *     <tn-icon-button name="mat-edit" ariaLabel="Edit" (click)="edit(row)" />
+ *     <tn-icon-button name="mat-delete" ariaLabel="Delete" (click)="remove(row)" />
+ *   </ng-template>
+ * </tn-table>
+ * ```
+ */
+declare class TnRowActionsDefDirective {
+    template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnRowActionsDefDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnRowActionsDefDirective, "[tnRowActionsDef]", never, {}, {}, never, never, true, never>;
+}
 
 interface TnTableDataSource<T = unknown> {
     data?: T[];
     connect?(): T[];
     disconnect?(): void;
 }
+/** Payload of the table's `sortChange` output. */
 interface TnSortEvent {
+    /**
+     * The column that is sorted *after* the change, or `''` when the sort was cleared — the
+     * third click on a table header, or the "Unsorted" option in card mode. Both layouts
+     * report the resulting state, so a cleared sort never names the column just cleared.
+     */
     column: string;
+    /** Direction after the change; `''` when no sort is active, which is always the case when `column` is `''`. */
     direction: 'asc' | 'desc' | '';
 }
+/**
+ * How the table adapts when its container is narrower than `cardBreakpoint`:
+ * - `scroll` — the table keeps its columns and scrolls horizontally, with the
+ *   first column and the actions column pinned in place *while it overflows*.
+ *   Default, and card mode is strictly opt-in — but note this is NOT a no-op for
+ *   existing tables: because the default `cardBreakpoint` is 640, any table whose
+ *   host content box measures under that (a phone, or a sidebar or dashboard card
+ *   on a desktop) gets `tn-table--scroll` and therefore the pinning, where it
+ *   previously scrolled all of its columns together. Raise `cardBreakpoint` if a
+ *   table should never pin.
+ *
+ *   Overflow is not automatic either: `auto` layout (the default) sizes to content
+ *   and overflows on its own, but a `fixedLayout` table fits its container exactly,
+ *   so it only overflows — and only then pins — once `minColumnWidth` or `minWidth`
+ *   gives it a floor.
+ * - `cards`  — each row collapses into a stacked card (title + actions header,
+ *   priority-ranked label/value fields, optional detail content).
+ * Above the breakpoint both modes render the regular table.
+ */
+type TnTableMobileLayout = 'cards' | 'scroll';
 declare class TnTableComponent<T = unknown> implements OnInit {
     private destroyRef;
+    private elementRef;
+    private injector;
+    /**
+     * Element that had focus when `loading` went true, so it can be restored afterwards.
+     *
+     * `inert` blurs whatever is focused inside it and refuses focus while set, so without this
+     * a keyboard user who pressed Enter on a sortable header — the flow that *starts* most
+     * loads — was dropped to `<body>` and had to tab back from the top of the document.
+     */
+    private focusBeforeLoading;
     dataSource: _angular_core.InputSignal<TnTableDataSource<T> | T[]>;
     displayedColumns: _angular_core.InputSignal<string[]>;
     trackBy: _angular_core.InputSignal<((index: number, item: T) => unknown) | undefined>;
@@ -6390,6 +6525,12 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * When true, shows a spinner overlay over the table. Existing rows remain
      * visible (dimmed) so reloads don't cause layout jumps; if there are no rows
      * yet, the spinner replaces the empty state.
+     *
+     * The rendered surfaces are `inert` while this is true, so they leave the tab order *and*
+     * the accessibility tree — a screen-reader user hears the overlay's "Loading..." status
+     * rather than the stale rows. That is deliberate: `pointer-events` alone left every row,
+     * header and projected control activatable by keyboard against data being replaced.
+     * Focus is captured on the way in and restored on the way out.
      */
     loading: _angular_core.InputSignal<boolean>;
     /** Accessible label announced while loading. */
@@ -6398,6 +6539,16 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * When true, rows become keyboard-focusable (tabindex=0) and clicking or
      * pressing Enter/Space emits `rowClick`. Use this for "click row to view
      * details" patterns. Independent of `selectable` (checkbox) and `expandable`.
+     *
+     * Accessibility limitation in card mode: a card is `role="listitem"`, and the
+     * roles that would announce it as activatable (`button`, `option`) have
+     * presentational children, which would hide the card's own checkbox, row
+     * actions and "Details" toggle from assistive tech. So a clickable card is
+     * focusable and responds to Enter/Space, but is not announced as a control.
+     * Active state is conveyed with `aria-current`, and expansion with
+     * `aria-expanded` when `expandOnRowClick` is set. If an action must be
+     * discoverable by screen-reader users, project an explicit control through
+     * `[tnRowActionsDef]` rather than relying on card activation alone.
      */
     clickable: _angular_core.InputSignal<boolean>;
     /**
@@ -6405,6 +6556,12 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * chevron. Requires `clickable` — that is what makes rows activatable at all — and `expandable`;
      * rows the `isRowExpandable` predicate rejects are unaffected, since `toggleRowExpansion` gates
      * on it. `rowClick` still emits, so a consumer can both expand and react to the click.
+     *
+     * Applies in card mode too, where activating the card toggles its detail section. Both controls
+     * report the state: the card carries `aria-expanded` while it is the trigger (`listitem` does
+     * permit it, unlike `aria-selected`), and the "Details" button carries it unconditionally,
+     * because that button is what a screen-reader user reaches by tabbing. The redundancy is
+     * deliberate — see the comment above the button in the template.
      */
     expandOnRowClick: _angular_core.InputSignal<boolean>;
     /**
@@ -6451,6 +6608,32 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     minWidth: _angular_core.InputSignal<string>;
     /** The floor actually applied to the table — explicit if given, else derived, else none. */
     protected readonly resolvedMinWidth: _angular_core.Signal<string | null>;
+    /**
+     * How the table adapts when its container is narrower than `cardBreakpoint`.
+     * See {@link TnTableMobileLayout}. Defaults to `scroll`, which preserves the
+     * existing horizontal-scroll behavior; set to `cards` to opt into the stacked
+     * card layout.
+     */
+    mobileLayout: _angular_core.InputSignal<TnTableMobileLayout>;
+    /**
+     * Container width (px) below which `mobileLayout` takes effect. The component
+     * observes its own host width (via `ResizeObserver`), so this responds to the
+     * available container — a table in a narrow sidebar adapts on a wide screen.
+     *
+     * Measured against the host's **content box** — its border and padding are excluded — so a
+     * `[bordered]` table crosses the threshold at the same content width as an unbordered one.
+     */
+    cardBreakpoint: _angular_core.InputSignal<number>;
+    /**
+     * Number of fields shown directly on each card before the rest fold under a
+     * "More fields" disclosure. The title column is not counted. Defaults to `3`.
+     */
+    cardPrimaryCount: _angular_core.InputSignal<number>;
+    /**
+     * Emits the resulting sort state whenever the user changes it, from either layout.
+     * Clearing a sort emits `{ column: '', direction: '' }` rather than naming the column
+     * that was cleared — see {@link TnSortEvent}.
+     */
     sortChange: _angular_core.OutputEmitterRef<TnSortEvent>;
     selectionChange: _angular_core.OutputEmitterRef<T[]>;
     /** Emits the row when a clickable row is activated (click or Enter/Space). */
@@ -6464,6 +6647,10 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     rowDoubleClick: _angular_core.OutputEmitterRef<T>;
     columnDefs: _angular_core.Signal<readonly TnTableColumnDirective[]>;
     detailRowDef: _angular_core.Signal<TnDetailRowDefDirective | undefined>;
+    rowActionsDef: _angular_core.Signal<TnRowActionsDefDirective | undefined>;
+    /** Observed host width in px; drives the switch into card mode. */
+    private containerWidth;
+    private resizeObserver?;
     /**
      * Sorted column and direction. Two-way bindable (`[(sortColumn)]`), so a consumer that owns the
      * sort — a data provider, a table destroyed and rebuilt when its list empties out — can restore
@@ -6478,14 +6665,38 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * approach could address this.
      */
     expandedRows: _angular_core.WritableSignal<Set<unknown>>;
+    private static instanceCount;
+    private readonly instanceId;
     selection: SelectionModel<T>;
     private selectionCount;
     private initialized;
     private columnDefMap;
     constructor();
+    /**
+     * Reads the host's current **content-box** width into `containerWidth`.
+     *
+     * Content box specifically, to match the `ResizeObserver` callback's `contentRect`. The
+     * initial read used `getBoundingClientRect()` — the border box — so the two paths measured
+     * different quantities, and `[bordered]` puts a 1px border on each side: a bordered table
+     * whose content box is 639px rendered as a table on first paint (641 is not < 640) and
+     * flipped to cards on the observer's first callback, with no resize having happened. Host
+     * padding widens the gap further.
+     */
+    private measureContainer;
     ngOnInit(): void;
+    /** True when the layout should collapse rows into cards. */
+    isCardMode: _angular_core.Signal<boolean>;
+    /** True when the layout should keep the table but pin edge columns and scroll. */
+    isScrollMode: _angular_core.Signal<boolean>;
     data: _angular_core.Signal<T[]>;
     effectiveDisplayedColumns: _angular_core.Signal<string[]>;
+    /**
+     * Every column the table actually renders, including the trailing actions column, which
+     * `effectiveDisplayedColumns` does not track because it comes from a content template rather
+     * than `displayedColumns`. Used for the detail row's `colspan`, so a detail row spans the full
+     * width no matter which structural columns are on.
+     */
+    totalColumnCount: _angular_core.Signal<number>;
     isAllSelected: _angular_core.Signal<boolean>;
     isIndeterminate: _angular_core.Signal<boolean>;
     trackByFn: _angular_core.Signal<(index: number, item: T) => unknown>;
@@ -6509,17 +6720,155 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * {@link onRowClick} returns before toggling anything.
      */
     isRowExpandTrigger(row: T): boolean;
+    /**
+     * Card-mode counterpart of {@link isRowExpandTrigger}, additionally requiring a detail
+     * template. Card mode renders no expansion affordance at all without one, so `aria-expanded`
+     * on the card would advertise a state change that produces nothing.
+     *
+     * Table mode deliberately keeps the looser check: its rows are asserted to carry
+     * `aria-expanded` from `expandOnRowClick` alone, and that predates this layout.
+     */
+    isCardExpandTrigger(row: T): boolean;
+    /** DOM id for a row's detail panel, so the expand trigger can point `aria-controls` at it. */
+    detailPanelId(rowIndex: number): string;
     isRowActive(row: T): boolean;
-    onRowClick(row: T): void;
-    onRowDoubleClick(row: T): void;
+    /**
+     * @param row The activated row.
+     * @param event The originating DOM event, when there is one. Optional so a consumer (or a
+     *   test) can still activate a row programmatically; the control-target guard only applies
+     *   to real events, which is the only case where a projected control can be the source.
+     */
+    onRowClick(row: T, event?: Event): void;
+    /** @param event See {@link onRowClick} — same guard, same optionality. */
+    onRowDoubleClick(row: T, event?: Event): void;
     onRowKeydown(event: KeyboardEvent, row: T): void;
+    onCardClick(event: Event, row: T): void;
+    /** Card-mode counterpart of {@link onRowDoubleClick}, with the same guard. */
+    onCardDoubleClick(event: Event, row: T): void;
+    onCardKeydown(event: KeyboardEvent, row: T): void;
+    /** Anything focusable or otherwise interactive, regardless of layout. */
+    private static readonly INTERACTIVE_SELECTOR;
+    /**
+     * Whether an event originated on a control *within* the activation surface rather than on
+     * the surface itself.
+     *
+     * @param event The DOM event; its `currentTarget` is the activation surface.
+     * @param containerSelectors Layout-specific wrappers that count as controls.
+     */
+    private isControlTarget;
+    /**
+     * Interactive elements plus the card's own controls and its projected detail panel.
+     *
+     * A class allowlist is not enough: the detail panel renders consumer content inside the
+     * clickable card, so an allowlist lets a click on a projected button bubble up and fire
+     * `rowClick` — and with `expandOnRowClick`, collapse the very panel being used. Table mode
+     * never had that problem, because there the detail row is a sibling `<tr>` outside the
+     * clickable row.
+     *
+     * The card's own field values are deliberately not interactive, so they still activate the
+     * card whether primary or folded under "More fields".
+     */
+    private isCardControlTarget;
+    /**
+     * Table-mode counterpart. The cells stop `click` themselves, but nothing stopped `keydown`,
+     * so Enter on a projected action button bubbled to the row and got `preventDefault()`d —
+     * which *is* how Enter activates a `<button>`, so the consumer's handler never ran and
+     * `rowClick` fired for the row instead. Card mode has always guarded this; the two layouts
+     * disagreed about what a projected control does under the keyboard.
+     */
+    private isRowControlTarget;
+    /**
+     * Header-cell activation, guarded like the row and the card.
+     *
+     * A `<th>` is an activation surface too, and a control projected through
+     * `tnHeaderCellDef` broke both ways without this: clicking a filter button re-sorted the
+     * table as well as running the button's own handler, and Space on a checkbox in a
+     * *non-sortable* header was swallowed entirely — `onSortClick` returned early on the
+     * missing `sortable()`, but the template's `preventDefault()` ran regardless, so the
+     * control was simply dead.
+     *
+     * @param column The column the header belongs to.
+     * @param event The originating DOM event.
+     */
+    onSortHeaderClick(column: string, event: Event): void;
+    /**
+     * Keyboard counterpart of {@link onSortHeaderClick}.
+     *
+     * Takes `Event` rather than `KeyboardEvent` because Angular types `$event` as `Event` for
+     * the `keydown.enter` / `keydown.space` pseudo-events; narrowing happens here.
+     */
+    onSortHeaderKeydown(column: string, event: Event): void;
+    /** Handles the card-mode sort `<select>` change. */
+    onSortSelectChange(event: Event): void;
     toggleSelectAll(): void;
     toggleRowSelection(row: T): void;
     isRowSelected(row: T): boolean;
+    /**
+     * The column rendered as the card title. The first `displayedColumns` entry
+     * whose def sets `cardTitle`, else the first column not marked `cardHidden` —
+     * a column the consumer asked to keep off the card must not be promoted to its
+     * most prominent slot. Falls back to the first displayed column only when every
+     * column is hidden, since a card still needs a title.
+     */
+    cardTitleColumn: _angular_core.Signal<string>;
+    /**
+     * Columns rendered as label/value fields in a card, ordered by descending
+     * `cardPriority` (ties keep `displayedColumns` order). Excludes the title column
+     * and any `cardHidden` columns.
+     */
+    cardFieldColumns: _angular_core.Signal<string[]>;
+    /** Fields shown directly on the card (up to `cardPrimaryCount`). */
+    cardPrimaryColumns: _angular_core.Signal<string[]>;
+    /** Fields tucked behind the "More fields" disclosure. */
+    cardSecondaryColumns: _angular_core.Signal<string[]>;
+    /**
+     * Displayed columns that are sortable — populates the card-mode sort menu.
+     *
+     * `cardHidden` columns are excluded, because this menu *is* part of the card layout
+     * and `cardHidden` promises the column is "omitted entirely" from it. Offering one
+     * here would let a user reorder the cards by a value no card shows, with the
+     * direction toggle giving no clue what changed — and such a column often has no
+     * readable label either, since `getCardLabel()` falls back to the raw column name
+     * when the header lives only in a `tnHeaderCellDef` template.
+     *
+     * The title column stays eligible: it is excluded from the *fields*, but it is
+     * displayed, so sorting by it is meaningful.
+     */
+    sortableColumns: _angular_core.Signal<string[]>;
+    /**
+     * Whether the active sort column is one the table can actually sort by.
+     *
+     * `sortableColumns` rescues an active column into the menu so it stays clearable, even
+     * when it is `cardHidden`, absent from `displayedColumns`, or never `sortable()`. That
+     * escape hatch must not hand card mode a capability table mode refuses: clicking a
+     * non-sortable header does nothing, so the direction toggle is hidden — and
+     * {@link toggleSortDirection} refuses — for the same column.
+     */
+    protected readonly canSortActiveColumn: _angular_core.Signal<boolean>;
+    /**
+     * Sets (or clears, when passed `''`) the active sort column for card mode.
+     * Switching columns resets to ascending, and clearing emits an empty `column` —
+     * both matching {@link onSortClick}, since the same `sortChange` contract should
+     * not depend on which layout the container width happens to be showing.
+     */
+    setSortColumn(column: string): void;
+    /**
+     * Flips the active sort direction between ascending and descending.
+     *
+     * Starts from ascending, so a column carrying an empty direction — reachable by restoring only
+     * `sortColumn` through its two-way binding — sorts ascending rather than skipping straight to
+     * descending. Same reading of "empty direction means not sorted" as {@link onSortClick}.
+     */
+    toggleSortDirection(): void;
     getColumnDef(columnName: string): TnTableColumnDirective | undefined;
+    /**
+     * Field label for a column in card mode. Precedence: `cardLabel` override →
+     * shared `label` → the column name.
+     */
+    getCardLabel(column: string): string;
     getCellValue(row: T, column: string): unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "cardBreakpoint": { "alias": "cardBreakpoint"; "required": false; "isSignal": true; }; "cardPrimaryCount": { "alias": "cardPrimaryCount"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef", "rowActionsDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -6551,13 +6900,32 @@ declare class TnTableHarness extends ComponentHarness {
     /**
      * Gets the number of data rows (excludes header and detail rows).
      *
-     * @returns Promise resolving to the row count.
+     * Layout-aware: counts rendered cards in the card layout, so the count tracks what the
+     * user sees rather than reporting 0 for a container that happens to be narrow.
+     *
+     * @returns Promise resolving to the row count, or the card count in the card layout.
      */
     getRowCount(): Promise<number>;
+    /**
+     * Throws when the rendered layout is `cards`, for queries that have no card equivalent.
+     * The alternative is an empty array or a 0, which reads as "the table is empty" and
+     * greens a test over a rendered card list — the failure mode the selection and
+     * active-row methods were made layout-aware to avoid.
+     */
+    private assertTableLayout;
+    /**
+     * Mirror of {@link assertTableLayout} for the card API. `getCardCount()` answering 0 in
+     * table mode is the same silent-wrong-answer shape rejected for `getRowCount()`: a spec
+     * that forgot to push a sub-breakpoint width would assert emptiness and pass over 20
+     * rendered rows.
+     */
+    private assertCardLayout;
     /**
      * Gets the text content of header cells (excludes sort icons).
      *
      * @returns Promise resolving to an array of header text strings.
+     * @throws Error in the card layout, which renders no header row;
+     *   the thrown message names the card API.
      */
     getHeaderTexts(): Promise<string[]>;
     /**
@@ -6565,6 +6933,7 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param rowIndex Zero-based index of the data row.
      * @returns Promise resolving to an array of cell text strings.
+     * @throws Error in the card layout, which renders no rows; the thrown message names the card API.
      */
     getRowTexts(rowIndex: number): Promise<string[]>;
     /**
@@ -6573,18 +6942,23 @@ declare class TnTableHarness extends ComponentHarness {
      * @param rowIndex Zero-based index of the data row.
      * @param columnName The column's data-column attribute value.
      * @returns Promise resolving to the cell text.
+     * @throws Error in the card layout, which renders no cells;
+     *   the thrown message names the card API.
      */
     getCellText(rowIndex: number, columnName: string): Promise<string>;
     /**
      * Gets all row texts as a 2D string array (data-column cells only).
      *
      * @returns Promise resolving to an array of row text arrays.
+     * @throws Error in the card layout, which renders no rows; the thrown message names the card API.
      */
     getAllRowTexts(): Promise<string[][]>;
     /**
      * Clicks a sortable column header to cycle sort direction.
      *
      * @param columnName The column's data-column attribute value.
+     * @throws Error in the card layout, which renders no column headers;
+     *   the thrown message names the card API.
      */
     clickSortHeader(columnName: string): Promise<void>;
     /**
@@ -6592,34 +6966,46 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param columnName The column's data-column attribute value.
      * @returns Promise resolving to true if the column is sortable.
+     * @throws Error in the card layout, which renders no column headers;
+     *   the thrown message names the card API.
      */
     isSortable(columnName: string): Promise<boolean>;
     /**
      * Gets the current sort direction for a column via aria-sort.
      *
+     * `aria-sort="none"` — which a sortable-but-unsorted header now carries, so it is
+     * discoverable as sortable — is normalised to null, keeping "not sorted" a single value
+     * for callers. Only a non-sortable header has no attribute at all, and both answer null.
+     *
      * @param columnName The column's data-column attribute value.
      * @returns Promise resolving to 'ascending', 'descending', or null.
+     * @throws Error in the card layout, which renders no column headers;
+     *   the thrown message names the card API.
      */
     getSortDirection(columnName: string): Promise<string | null>;
+    /** True when the container is narrow enough that card mode is rendered. */
+    private isCards;
     /**
-     * Clicks the select-all checkbox in the header.
+     * Clicks the select-all control — the header checkbox in table mode, the card
+     * toolbar's "Select all" in card mode.
      */
     toggleSelectAll(): Promise<void>;
     /**
-     * Toggles selection for a specific row by clicking its checkbox cell.
+     * Toggles selection for a specific row (or its card) by clicking its checkbox
+     * wrapper.
      *
      * @param rowIndex Zero-based index of the data row.
      */
     toggleRowSelection(rowIndex: number): Promise<void>;
     /**
-     * Checks if a specific row's checkbox is checked.
+     * Checks if a specific row (or its card) is selected.
      *
      * @param rowIndex Zero-based index of the data row.
      * @returns Promise resolving to true if the row's checkbox is checked.
      */
     isRowSelected(rowIndex: number): Promise<boolean>;
     /**
-     * Gets the count of currently selected rows.
+     * Gets the count of currently selected rows, in either layout.
      *
      * @returns Promise resolving to the number of checked row checkboxes.
      */
@@ -6628,6 +7014,8 @@ declare class TnTableHarness extends ComponentHarness {
      * Clicks the expand button for a specific row.
      *
      * @param rowIndex Zero-based index of the data row.
+     * @throws Error in the card layout — use `toggleCardDetail()`;
+     *   the thrown message names the card API.
      */
     toggleRowExpansion(rowIndex: number): Promise<void>;
     /**
@@ -6635,6 +7023,7 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param rowIndex Zero-based index of the data row.
      * @returns Promise resolving to true if the row has the expanded class.
+     * @throws Error in the card layout, which renders no rows; the thrown message names the card API.
      */
     isRowExpanded(rowIndex: number): Promise<boolean>;
     /**
@@ -6643,12 +7032,15 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param rowIndex Zero-based index of the data row.
      * @returns Promise resolving to true if the row has an expand button.
+     * @throws Error in the card layout, whose expand control is the card's Details button;
+     *   the thrown message names the card API.
      */
     hasExpandControl(rowIndex: number): Promise<boolean>;
     /**
      * Clicks a row (for tables with `clickable` enabled).
      *
      * @param rowIndex Zero-based index of the data row.
+     * @throws Error in the card layout, which renders no rows; use {@link clickCard} there.
      */
     clickRow(rowIndex: number): Promise<void>;
     /**
@@ -6657,6 +7049,7 @@ declare class TnTableHarness extends ComponentHarness {
      * clicks first; this helper dispatches only the `dblclick` event.
      *
      * @param rowIndex Zero-based index of the data row.
+     * @throws Error in the card layout, which renders no rows; use {@link doubleClickCard} there.
      */
     doubleClickRow(rowIndex: number): Promise<void>;
     /**
@@ -6664,12 +7057,14 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param rowIndex Zero-based index of the data row.
      * @param key Which key to press — Enter or Space.
+     * @throws Error in the card layout, which renders no rows; use {@link pressKeyOnCard} there.
      */
     pressKeyOnRow(rowIndex: number, key: 'enter' | 'space'): Promise<void>;
     /**
      * Checks if a row is keyboard-focusable (tabindex=0).
      *
      * @param rowIndex Zero-based index of the data row.
+     * @throws Error in the card layout, which renders no rows; use {@link isCardFocusable} there.
      */
     isRowFocusable(rowIndex: number): Promise<boolean>;
     /**
@@ -6681,8 +7076,11 @@ declare class TnTableHarness extends ComponentHarness {
     /**
      * Checks if a data row is currently marked active.
      *
-     * @param rowIndex Zero-based index of the data row.
-     * @returns Promise resolving to true if the row has the active class.
+     * Layout-aware: reads the card's active class in the card layout, which marks the same
+     * state with `aria-current` rather than the row's `aria-selected`.
+     *
+     * @param rowIndex Zero-based index of the data row (or card).
+     * @returns Promise resolving to true if the row — or card — has the active class.
      */
     isRowActive(rowIndex: number): Promise<boolean>;
     /**
@@ -6696,14 +7094,151 @@ declare class TnTableHarness extends ComponentHarness {
      *
      * @param detailIndex Zero-based index among currently visible detail rows.
      * @returns Promise resolving to the detail row text.
+     * @throws Error in the card layout — use the card detail panel;
+     *   the thrown message names the card API.
      */
     getDetailRowContent(detailIndex: number): Promise<string>;
     /**
      * Gets the count of currently expanded detail rows.
      *
-     * @returns Promise resolving to the number of visible detail rows.
+     * Layout-aware: counts open card detail panels in the card layout, which renders the same
+     * expansion state without a detail `<tr>`.
+     *
+     * @returns Promise resolving to the number of visible detail rows, or open card detail
+     *   panels in the card layout.
      */
     getExpandedRowCount(): Promise<number>;
+    /**
+     * Reports the currently rendered layout: `cards` when the container is narrow
+     * enough that `mobileLayout="cards"` has taken effect, otherwise `table`.
+     *
+     * @returns Promise resolving to 'cards' or 'table'.
+     */
+    getLayoutMode(): Promise<'cards' | 'table'>;
+    /**
+     * Gets the number of rendered cards (card layout only).
+     *
+     * @returns Promise resolving to the card count.
+     */
+    getCardCount(): Promise<number>;
+    /**
+     * Gets the title text of a card.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @returns Promise resolving to the card title text.
+     */
+    getCardTitle(cardIndex: number): Promise<string>;
+    /**
+     * Gets the value text of a field within a card, by column name. The field
+     * may be a primary field or one tucked under "More fields".
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to the field's value text.
+     */
+    getCardFieldValue(cardIndex: number, columnName: string): Promise<string>;
+    /**
+     * Gets the column names of the fields shown directly on a card (i.e. not
+     * those hidden behind the "More fields" disclosure).
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @returns Promise resolving to an array of column names.
+     */
+    getCardPrimaryFieldColumns(cardIndex: number): Promise<string[]>;
+    /**
+     * Expands the "More fields" disclosure on a card to reveal lower-priority
+     * fields. No-op if the card has no secondary fields.
+     *
+     * @param cardIndex Zero-based index of the card.
+     */
+    expandCardMoreFields(cardIndex: number): Promise<void>;
+    /**
+     * Toggles a card's detail section (card layout equivalent of row expansion).
+     *
+     * @param cardIndex Zero-based index of the card.
+     */
+    toggleCardDetail(cardIndex: number): Promise<void>;
+    /**
+     * Gets the currently selected sort column in the card-layout sort menu, or
+     * `''` when unsorted. Returns null if the sort menu isn't rendered.
+     *
+     * @returns Promise resolving to the selected column name, '', or null.
+     */
+    getCardSortColumn(): Promise<string | null>;
+    /**
+     * Gets the active sort direction in the card layout, read from the direction toggle's
+     * `data-sort-direction`. Deliberately not derived from the button's `aria-label`: matching
+     * display text would silently report one direction forever if the wording or locale changed.
+     *
+     * @returns Promise resolving to 'asc' or 'desc'; `''` both when sorted by nothing and when the
+     *   active column isn't sortable (the toggle isn't rendered in either case, and this reads the
+     *   rendered control — so a non-sortable active column reports `''` even though the component's
+     *   `sortDirection()` holds a value); or null when the card sort menu isn't rendered at all
+     *   (table layout, or no sortable columns) — the same null-vs-empty distinction
+     *   {@link getCardSortColumn} makes.
+     */
+    getCardSortDirection(): Promise<'asc' | 'desc' | '' | null>;
+    /**
+     * Clicks the sort-direction toggle in the card-layout sort menu. No-op when the toggle
+     * isn't rendered, which is three cases: the table layout is showing (the whole card sort
+     * menu is absent — so a call made before the container narrowed does nothing and reports
+     * success), no active sort column, or an active column that isn't `sortable()` — card mode
+     * deliberately declines to reorder by a column whose table header ignores clicks.
+     */
+    toggleCardSortDirection(): Promise<void>;
+    /**
+     * Clicks a card body (card mirror of {@link clickRow}, for tables with `clickable`).
+     *
+     * Targets the card's title rather than the card box, because the card box's centre can sit
+     * on a projected row action or the selection checkbox, and the activation guard ignores
+     * clicks that originate on a control — the click would land and nothing would happen.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @throws Error in the table layout; use {@link clickRow} there.
+     */
+    clickCard(cardIndex: number): Promise<void>;
+    /**
+     * Double-clicks a card, triggering `rowDoubleClick` (card mirror of
+     * {@link doubleClickRow}). As there, only the `dblclick` event is dispatched — a real
+     * double-click also fires two single clicks first.
+     *
+     * Dispatched on the card rather than on the title {@link clickCard} aims at, because a
+     * synthesised event does not bubble: sent to the title it would never reach the card's
+     * handler. There is no cost to it here — the target is set explicitly, so unlike a real
+     * pointer click it cannot land on a projected control.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @throws Error in the table layout; use {@link doubleClickRow} there.
+     */
+    doubleClickCard(cardIndex: number): Promise<void>;
+    /**
+     * Sends a keyboard event to a card (Enter/Space activate clickable cards). Card mirror of
+     * {@link pressKeyOnRow}; the key goes to the card itself, which is the element that carries
+     * `tabindex` and the keydown handler.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @param key Which key to press — Enter or Space.
+     * @throws Error in the table layout; use {@link pressKeyOnRow} there.
+     */
+    pressKeyOnCard(cardIndex: number, key: 'enter' | 'space'): Promise<void>;
+    /**
+     * Checks if a card is keyboard-focusable (tabindex=0). Card mirror of
+     * {@link isRowFocusable}.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @throws Error in the table layout; use {@link isRowFocusable} there.
+     */
+    isCardFocusable(cardIndex: number): Promise<boolean>;
+    /** The card box itself — the element carrying `tabindex`, the handlers and the ARIA state. */
+    private cardAt;
+    /** The surface pointer activation is aimed at — see {@link clickCard} for why not the card. */
+    private cardActivationTarget;
+    /**
+     * Bounds check for the layout-aware methods. Counts whatever the rendered layout shows, via
+     * `getRowCount()` — unlike {@link assertRowExists}, which deliberately counts rows only,
+     * because its callers refuse card mode outright.
+     */
+    private assertIndexExists;
     private assertRowExists;
 }
 /**
@@ -6712,6 +7247,47 @@ declare class TnTableHarness extends ComponentHarness {
 interface TnTableHarnessFilters extends BaseHarnessFilters {
 }
 
+/**
+ * Testing utilities for `tn-table`'s container-driven responsive layout.
+ *
+ * Part of the public API because `TnTableHarness`'s layout-mismatch messages tell the caller
+ * to widen or narrow the container past `cardBreakpoint`, and jsdom implements no
+ * `ResizeObserver` — so without a stand-in a consumer's own spec has no supported way to
+ * follow that advice.
+ *
+ * Namespaced rather than exported as loose functions, matching `TnIconTesting` and
+ * `TnToastTesting`: these names live at the top level of the package, and `installObserver`
+ * or `emitContainerWidth` on their own give no hint that they concern tables.
+ *
+ * @example
+ * ```typescript
+ * let restoreResizeObserver: () => void;
+ *
+ * beforeEach(() => { restoreResizeObserver = TnTableTesting.installResizeObserver(); });
+ * afterEach(() => { restoreResizeObserver(); });
+ *
+ * // ...then, inside a test:
+ * TnTableTesting.emitContainerWidth(320);
+ * fixture.detectChanges();
+ * ```
+ */
+declare const TnTableTesting: {
+    /**
+     * Swaps `globalThis.ResizeObserver` for a stand-in and clears any instances left by a
+     * previous test.
+     *
+     * @returns A function that restores the original global — call it in `afterEach`.
+     */
+    installResizeObserver(): () => void;
+    /**
+     * Pushes `width` through every observer the component under test registered, as its
+     * content-box width — the same quantity `measureContainer` reads on the initial pass.
+     *
+     * @param width Content-box width in px. A 0 reads as unmeasurable, not narrow.
+     */
+    emitContainerWidth(width: number): void;
+};
+
 /**
  * Default labels rendered inside `tn-table-pager`. Consumers can override any
  * subset of these at the app root by providing a value for the
@@ -11362,5 +11938,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_RADIO_GROUP, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnCalendarIntl, injectTnFormFieldAria, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CalendarCellFill, CalendarCellHarnessFilters, CalendarHarnessFilters, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerCreateAction, FilePickerCreateActionEvent, FilePickerError, FilePickerHarnessFilters, FilePickerMode, FileSystemItem, FileSystemItemType, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioGroupHarnessFilters, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCalendarIntl, TnCalendarIntlInput, TnCalendarView, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnRadioGroupApi, TnRadioOption, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_RADIO_GROUP, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnCalendarIntl, injectTnFormFieldAria, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CalendarCellFill, CalendarCellHarnessFilters, CalendarHarnessFilters, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerCreateAction, FilePickerCreateActionEvent, FilePickerError, FilePickerHarnessFilters, FilePickerMode, FileSystemItem, FileSystemItemType, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioGroupHarnessFilters, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCalendarIntl, TnCalendarIntlInput, TnCalendarView, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnRadioGroupApi, TnRadioOption, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTableMobileLayout, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };