@truenas/ui-components 0.4.12 → 0.5.0

package/fesm2022/truenas-ui-components.mjs

@@ -11244,10 +11244,51 @@ class TnTableColumnDirective {
     name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'tnColumnDef' });
     sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
     width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /**
+     * 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 = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * 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 = input(0, ...(ngDevMode ? [{ debugName: "cardPriority" }] : []));
+    /**
+     * 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 = input(false, ...(ngDevMode ? [{ debugName: "cardTitle" }] : []));
+    /**
+     * 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 = input(false, ...(ngDevMode ? [{ debugName: "cardHidden" }] : []));
+    /**
+     * 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 = input(undefined, ...(ngDevMode ? [{ debugName: "cardLabel" }] : []));
     headerTemplate = contentChild(TnHeaderCellDefDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : {}), read: TemplateRef });
     cellTemplate = contentChild(TnCellDefDirective, { ...(ngDevMode ? { debugName: "cellTemplate" } : {}), read: TemplateRef });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: TnTableColumnDirective, isStandalone: true, selector: "[tnColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "tnColumnDef", isSignal: true, isRequired: true, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TnHeaderCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cellTemplate", first: true, predicate: TnCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["tnColumnDef"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: TnTableColumnDirective, isStandalone: true, selector: "[tnColumnDef]", inputs: { name: { classPropertyName: "name", publicName: "tnColumnDef", isSignal: true, isRequired: true, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, cardPriority: { classPropertyName: "cardPriority", publicName: "cardPriority", isSignal: true, isRequired: false, transformFunction: null }, cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardHidden: { classPropertyName: "cardHidden", publicName: "cardHidden", isSignal: true, isRequired: false, transformFunction: null }, cardLabel: { classPropertyName: "cardLabel", publicName: "cardLabel", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TnHeaderCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cellTemplate", first: true, predicate: TnCellDefDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["tnColumnDef"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableColumnDirective, decorators: [{
             type: Directive,
@@ -11256,7 +11297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     standalone: true,
                     exportAs: 'tnColumnDef',
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnColumnDef", required: true }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnHeaderCellDefDirective), { ...{
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnColumnDef", required: true }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], cardPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPriority", required: false }] }], cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], cardHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHidden", required: false }] }], cardLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardLabel", required: false }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnHeaderCellDefDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCellDefDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 /**
@@ -11285,6 +11326,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     standalone: true,
                 }]
         }] });
+/**
+ * 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>
+ * ```
+ */
+class TnRowActionsDefDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnRowActionsDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnRowActionsDefDirective, isStandalone: true, selector: "[tnRowActionsDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnRowActionsDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnRowActionsDef]',
+                    standalone: true,
+                }]
+        }] });
 
 /**
  * Animation duration for detail row expand/collapse.
@@ -11307,6 +11380,16 @@ function getExpandDuration() {
 }
 class TnTableComponent {
     destroyRef = inject(DestroyRef);
+    elementRef = inject((ElementRef));
+    injector = inject(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.
+     */
+    focusBeforeLoading = null;
     // --- Core inputs ---
     dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
@@ -11374,6 +11457,12 @@ class TnTableComponent {
      * 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 = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     /** Accessible label announced while loading. */
@@ -11382,6 +11471,16 @@ class TnTableComponent {
      * 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 = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
     /**
@@ -11389,6 +11488,12 @@ class TnTableComponent {
      * 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 = input(false, ...(ngDevMode ? [{ debugName: "expandOnRowClick" }] : []));
     /**
@@ -11443,9 +11548,52 @@ class TnTableComponent {
         if (!perColumn || !this.fixedLayout()) {
             return null;
         }
-        return `calc(${perColumn} * ${this.effectiveDisplayedColumns().length})`;
+        // The actions column adds its own fixed width rather than a `minColumnWidth` share, because
+        // that is exactly what it claims under `fixedLayout` — and the cell is `border-box`, so the
+        // value added here is its real outer width. (`--tn-table-select-width` and
+        // `--tn-table-expand-width` are treated as ordinary shares instead: they over-reserve
+        // slightly, which is the behavior this component has always had and has tests for. Unifying
+        // all three belongs in its own change.)
+        //
+        // No `var()` fallback on purpose. A duplicated default here is a second source of truth for a
+        // number the stylesheet owns, and it drifted the moment that default changed — leaving the
+        // exact value whose shortfall clipped the actions column sitting in code labelled "the
+        // default". `:host` always defines the property, so the only way to reach a fallback is to
+        // unset it deliberately, and an invalid calc() (no floor) is a more debuggable outcome than a
+        // floor computed from a stale constant.
+        const columns = `${perColumn} * ${this.effectiveDisplayedColumns().length}`;
+        return this.rowActionsDef()
+            ? `calc(${columns} + var(--tn-table-actions-width))`
+            : `calc(${columns})`;
     }, ...(ngDevMode ? [{ debugName: "resolvedMinWidth" }] : []));
+    // --- Responsive (card) inputs ---
+    /**
+     * 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 = input('scroll', ...(ngDevMode ? [{ debugName: "mobileLayout" }] : []));
+    /**
+     * 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 = input(640, ...(ngDevMode ? [{ debugName: "cardBreakpoint" }] : []));
+    /**
+     * 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 = input(3, ...(ngDevMode ? [{ debugName: "cardPrimaryCount" }] : []));
     // --- Outputs ---
+    /**
+     * 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 = output();
     selectionChange = output();
     /** Emits the row when a clickable row is activated (click or Enter/Space). */
@@ -11460,6 +11608,11 @@ class TnTableComponent {
     // --- Content queries ---
     columnDefs = contentChildren(TnTableColumnDirective, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
     detailRowDef = contentChild(TnDetailRowDefDirective, ...(ngDevMode ? [{ debugName: "detailRowDef" }] : []));
+    rowActionsDef = contentChild(TnRowActionsDefDirective, ...(ngDevMode ? [{ debugName: "rowActionsDef" }] : []));
+    // --- Responsive state ---
+    /** Observed host width in px; drives the switch into card mode. */
+    containerWidth = signal(Infinity, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+    resizeObserver;
     // --- Sort state ---
     /**
      * Sorted column and direction. Two-way bindable (`[(sortColumn)]`), so a consumer that owns the
@@ -11475,6 +11628,9 @@ class TnTableComponent {
      * approach could address this.
      */
     expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    // Per-instance prefix for generated DOM ids, so two tables on a page can't collide.
+    static instanceCount = 0;
+    instanceId = `tn-table-${TnTableComponent.instanceCount++}`;
     // --- Selection state ---
     selection = new SelectionModel(true, []);
     selectionCount = signal(0, ...(ngDevMode ? [{ debugName: "selectionCount" }] : []));
@@ -11535,14 +11691,147 @@ class TnTableComponent {
                 this.expandedRows.set(next);
             }
         });
+        // Save focus on the way into `loading`, restore it on the way out. The restore is
+        // deferred to after the next render because the surfaces only drop `inert` when the
+        // template updates, and focusing an element still inside an inert subtree is a no-op.
+        effect(() => {
+            const host = this.elementRef.nativeElement;
+            if (typeof document === 'undefined') {
+                return;
+            }
+            if (this.loading()) {
+                const active = document.activeElement;
+                // `<body>` is what `inert` leaves behind, not evidence the user moved on. Signals are
+                // glitch-free, so a false -> true flip inside one task (a store that clears loading on
+                // a cache hit and re-sets it for the network request) runs this effect once, seeing
+                // only `true` — and overwriting a still-valid saved element with null there would lose
+                // the focus permanently, which is the symptom this whole effect exists to prevent.
+                if (active && active !== document.body) {
+                    this.focusBeforeLoading = host.contains(active) ? active : null;
+                }
+                return;
+            }
+            const previous = this.focusBeforeLoading;
+            if (!previous) {
+                return;
+            }
+            this.focusBeforeLoading = null;
+            afterNextRender(() => {
+                // Never steal focus back from wherever the user moved on to.
+                if (document.activeElement !== document.body) {
+                    return;
+                }
+                if (previous.isConnected) {
+                    previous.focus();
+                    if (document.activeElement === previous) {
+                        return;
+                    }
+                    // Focus was refused. `loading()` discriminates why: true means a second load
+                    // re-applied `inert` before this hook ran, so keep the element for next time.
+                    // False means it is simply no longer focusable — a `<th>` reused for a
+                    // non-sortable column (the header `@for` tracks `$index`), a projected action
+                    // that came back `disabled` — and re-arming there would retry the same dead
+                    // element on every load, parking the user on `<body>` indefinitely. Reading the
+                    // signal here is untracked, so it costs nothing.
+                    if (this.loading()) {
+                        this.focusBeforeLoading = previous;
+                        return;
+                    }
+                }
+                // The remembered element is gone: a reload dropped the focused row under an
+                // id-based `trackBy`, or the container flipped to cards mid-load. Keep focus in the
+                // region rather than leaving the user at the top of the document.
+                if (!host.hasAttribute('tabindex')) {
+                    host.setAttribute('tabindex', '-1');
+                }
+                host.focus();
+            }, { injector: this.injector });
+        });
+        // Measure the host width to drive card/scroll mode. The initial read is
+        // taken in `afterNextRender` (guaranteed post-layout, so we get the real
+        // width rather than a pre-layout 0), then a `ResizeObserver` keeps it in
+        // sync as the container resizes. Both are browser-only — `afterNextRender`
+        // does not run during SSR and `ResizeObserver` is feature-detected.
+        afterNextRender(() => {
+            const host = this.elementRef.nativeElement;
+            this.measureContainer(host);
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const width = entries[0]?.contentRect.width;
+                    if (typeof width === 'number') {
+                        // `|| Infinity` for the same reason `measureContainer` applies it: a 0 width
+                        // means unmeasurable, not narrow. An element inside a `display: none`
+                        // container reports 0x0, so without this a table in a tab that gets hidden
+                        // flips to card mode and tears down anything keyed off `isCardMode()` — the
+                        // open `<details>` state, for one — for a resize that never happened.
+                        this.containerWidth.set(width || Infinity);
+                    }
+                });
+                this.resizeObserver.observe(host);
+            }
+        });
+    }
+    /**
+     * 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.
+     */
+    measureContainer(host) {
+        // The computed `width` is the *used* content-box width — content box even under
+        // `box-sizing: border-box`, already net of the border and of any vertical scrollbar
+        // gutter, and untransformed. That matches `contentRect.width` down to the fraction,
+        // which is the point: `:host` sets `overflow-x: auto` (which promotes `overflow-y` to
+        // auto), so on a platform with classic scrollbars a border-box width measured ~15px
+        // wider here than the observer did, and `getBoundingClientRect()` reports the
+        // *transformed* size, so a table inside a scaled dialog mis-measured as well.
+        //
+        // `clientWidth` minus horizontal padding gets all of that right too, but it is
+        // integer-rounded, and the rounding is not neutral at the boundary: a 639.6px content
+        // box against the default 640 breakpoint reads as 640 here and 639.6 on the observer's
+        // first callback, so the table renders for a frame and then flips to cards with no
+        // resize having happened — the first-paint flip this measurement exists to remove.
+        //
+        // Only a `px` value is a used width, and the unit check is load-bearing rather than
+        // defensive. `width` resolves to the *used* value only for an element that has a layout
+        // box; without one it resolves to the computed value, and `:host` declares `width: 100%`
+        // — so a table built inside a `display: none` container (an inactive tab body, a
+        // collapsed panel) resolves to the string '100%'. Parsed bare that is the number 100,
+        // which is under every sane `cardBreakpoint`: a container that was never measured would
+        // render as cards. Rejecting the non-px value falls through to `clientWidth`, which is 0
+        // there, and on to the 0 -> Infinity guard below — the same answer the `ResizeObserver`
+        // callback gives a 0x0 contentRect. jsdom takes this path too: with no rule matching the
+        // host it resolves `width` to the empty string rather than filling in an initial value
+        // (checked against jsdom 26.1.0, the version jest-environment-jsdom resolves here).
+        const hostStyle = getComputedStyle(host);
+        const resolvedWidth = hostStyle.width;
+        const usedWidth = resolvedWidth.endsWith('px') ? parseFloat(resolvedWidth) : NaN;
+        let contentWidth;
+        if (Number.isFinite(usedWidth)) {
+            contentWidth = usedWidth;
+        }
+        else {
+            const padding = parseFloat(hostStyle.paddingLeft || '0') + parseFloat(hostStyle.paddingRight || '0');
+            contentWidth = host.clientWidth - (Number.isNaN(padding) ? 0 : padding);
+        }
+        this.containerWidth.set(contentWidth > 0 ? contentWidth : Infinity);
     }
     ngOnInit() {
         this.initialized = true;
-        // Clean up SelectionModel on destroy
         this.destroyRef.onDestroy(() => {
             this.selection.clear();
+            this.resizeObserver?.disconnect();
         });
     }
+    // --- Responsive computeds ---
+    /** True when the layout should collapse rows into cards. */
+    isCardMode = computed(() => this.mobileLayout() === 'cards' && this.containerWidth() < this.cardBreakpoint(), ...(ngDevMode ? [{ debugName: "isCardMode" }] : []));
+    /** True when the layout should keep the table but pin edge columns and scroll. */
+    isScrollMode = computed(() => this.mobileLayout() === 'scroll' && this.containerWidth() < this.cardBreakpoint(), ...(ngDevMode ? [{ debugName: "isScrollMode" }] : []));
     // --- Computed ---
     data = computed(() => {
         const source = this.dataSource();
@@ -11561,6 +11850,13 @@ class TnTableComponent {
         }
         return cols;
     }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedColumns" }] : []));
+    /**
+     * 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 = computed(() => this.effectiveDisplayedColumns().length + (this.rowActionsDef() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : []));
     isAllSelected = computed(() => {
         const numSelected = this.selectionCount();
         const numRows = this.data().length;
@@ -11583,13 +11879,15 @@ class TnTableComponent {
         if (!colDef?.sortable()) {
             return;
         }
-        if (this.sortColumn() === column) {
-            const current = this.sortDirection();
-            if (current === 'asc') {
-                this.sortDirection.set('desc');
-            }
-            else if (current === 'desc') {
-                this.sortDirection.set('');
+        // `&& this.sortDirection()` matters: a column set with an empty direction is *not* sorted, and
+        // that state is reachable through the two-way `[(sortColumn)]` binding — a consumer restoring
+        // only the column lands in it. Without the guard neither inner branch matched, so the click
+        // mutated nothing and still emitted a "cleared" event, leaving a header the user could click
+        // forever with no arrow to explain it. Folding it into the not-sorted branch starts a fresh
+        // ascending sort, which is what clicking an unsorted header does everywhere else.
+        if (this.sortColumn() === column && this.sortDirection()) {
+            this.sortDirection.set(this.sortDirection() === 'asc' ? 'desc' : '');
+            if (!this.sortDirection()) {
                 this.sortColumn.set('');
             }
         }
@@ -11597,8 +11895,12 @@ class TnTableComponent {
             this.sortColumn.set(column);
             this.sortDirection.set('asc');
         }
+        // Emits the *resulting* sort state, so clearing a sort reports `{ column: '', direction: '' }`
+        // rather than naming the column that was just cleared. Card mode's `setSortColumn('')` has
+        // always emitted the empty column, and a consumer keying off `event.column` should not get a
+        // different answer depending on which layout the container width happens to be showing.
         this.sortChange.emit({
-            column: this.sortColumn() || column,
+            column: this.sortColumn(),
             direction: this.sortDirection(),
         });
     }
@@ -11649,6 +11951,21 @@ class TnTableComponent {
     isRowExpandTrigger(row) {
         return this.expandOnRowClick() && this.clickable() && this.canExpandRow(row);
     }
+    /**
+     * 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) {
+        return this.isRowExpandTrigger(row) && !!this.detailRowDef();
+    }
+    /** DOM id for a row's detail panel, so the expand trigger can point `aria-controls` at it. */
+    detailPanelId(rowIndex) {
+        return `${this.instanceId}-detail-${rowIndex}`;
+    }
     // --- Active row ---
     isRowActive(row) {
         if (this.activeWhen()?.(row)) {
@@ -11658,25 +11975,47 @@ class TnTableComponent {
         return active !== null && active === row;
     }
     // --- Row click ---
-    onRowClick(row) {
+    /**
+     * @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, event) {
         if (!this.clickable()) {
             return;
         }
+        // Mirrors `onCardClick`. Only the select, expand and actions cells stop `click`
+        // themselves, so a control projected into an ordinary `tnCellDef` — a checkbox, a
+        // link — used to activate the row as well: `rowClick` fired and, under
+        // `expandOnRowClick`, the detail panel toggled out from under the user. Card mode
+        // never did that, so the same consumer template behaved differently either side of
+        // `cardBreakpoint`.
+        if (event && this.isRowControlTarget(event)) {
+            return;
+        }
         if (this.expandOnRowClick()) {
             this.toggleRowExpansion(row);
         }
         this.rowClick.emit(row);
     }
-    onRowDoubleClick(row) {
+    /** @param event See {@link onRowClick} — same guard, same optionality. */
+    onRowDoubleClick(row, event) {
         if (!this.clickable()) {
             return;
         }
+        if (event && this.isRowControlTarget(event)) {
+            return;
+        }
         this.rowDoubleClick.emit(row);
     }
     onRowKeydown(event, row) {
         if (!this.clickable()) {
             return;
         }
+        if (this.isRowControlTarget(event)) {
+            return;
+        }
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             if (this.expandOnRowClick()) {
@@ -11685,6 +12024,135 @@ class TnTableComponent {
             this.rowClick.emit(row);
         }
     }
+    // --- Card activation ---
+    // Cards reuse `rowClick`, but the card header embeds its own controls
+    // (selection checkbox, row actions, "more"/detail toggles). Activating the
+    // card must ignore clicks/keys that originate from those controls so a tap on
+    // an action button doesn't also fire `rowClick`.
+    onCardClick(event, row) {
+        if (!this.clickable() || this.isCardControlTarget(event)) {
+            return;
+        }
+        if (this.expandOnRowClick()) {
+            this.toggleRowExpansion(row);
+        }
+        this.rowClick.emit(row);
+    }
+    /** Card-mode counterpart of {@link onRowDoubleClick}, with the same guard. */
+    onCardDoubleClick(event, row) {
+        if (!this.clickable() || this.isCardControlTarget(event)) {
+            return;
+        }
+        this.rowDoubleClick.emit(row);
+    }
+    onCardKeydown(event, row) {
+        if (!this.clickable()) {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        if (this.isCardControlTarget(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (this.expandOnRowClick()) {
+            this.toggleRowExpansion(row);
+        }
+        this.rowClick.emit(row);
+    }
+    /** Anything focusable or otherwise interactive, regardless of layout. */
+    static INTERACTIVE_SELECTOR = 'a[href], button, input, select, textarea, summary,'
+        + ' [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+    /**
+     * 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.
+     */
+    isControlTarget(event, containerSelectors) {
+        const target = event.target;
+        const selector = containerSelectors
+            ? `${TnTableComponent.INTERACTIVE_SELECTOR}, ${containerSelectors}`
+            : TnTableComponent.INTERACTIVE_SELECTOR;
+        const match = target?.closest(selector);
+        // The row/card itself is focusable when `clickable`, so it matches the focusable clause.
+        // It is the activation surface, not a control within it.
+        return !!match && match !== event.currentTarget;
+    }
+    /**
+     * 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".
+     */
+    isCardControlTarget(event) {
+        return this.isControlTarget(event, '.tn-table__card-actions, .tn-table__card-select, .tn-table__card-more-summary,'
+            + ' .tn-table__card-detail-toggle, .tn-table__card-detail');
+    }
+    /**
+     * 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.
+     */
+    isRowControlTarget(event) {
+        return this.isControlTarget(event, '.tn-table__select-cell, .tn-table__expand-cell, .tn-table__actions-cell');
+    }
+    /**
+     * 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, event) {
+        if (this.isControlTarget(event, '')) {
+            return;
+        }
+        if (!this.getColumnDef(column)?.sortable()) {
+            return;
+        }
+        this.onSortClick(column);
+    }
+    /**
+     * 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, event) {
+        if (this.isControlTarget(event, '')) {
+            return;
+        }
+        if (!this.getColumnDef(column)?.sortable()) {
+            return;
+        }
+        // Only swallow the key once we know this header owns it, so Space on a projected
+        // control still reaches that control.
+        if (event.key === ' ') {
+            event.preventDefault();
+        }
+        this.onSortClick(column);
+    }
+    /** Handles the card-mode sort `<select>` change. */
+    onSortSelectChange(event) {
+        this.setSortColumn(event.target.value);
+    }
     // --- Selection methods ---
     toggleSelectAll() {
         if (this.isAllSelected()) {
@@ -11704,15 +12172,138 @@ class TnTableComponent {
     isRowSelected(row) {
         return this.selection.isSelected(row);
     }
+    // --- Card-mode computeds ---
+    /**
+     * 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 = computed(() => {
+        const cols = this.displayedColumns();
+        const explicit = cols.find((c) => this.getColumnDef(c)?.cardTitle());
+        const visible = cols.find((c) => !this.getColumnDef(c)?.cardHidden());
+        return explicit ?? visible ?? cols[0] ?? '';
+    }, ...(ngDevMode ? [{ debugName: "cardTitleColumn" }] : []));
+    /**
+     * 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 = computed(() => {
+        const title = this.cardTitleColumn();
+        const fields = this.displayedColumns()
+            .map((name, index) => ({ name, index }))
+            .filter(({ name }) => name !== title && !this.getColumnDef(name)?.cardHidden());
+        fields.sort((a, b) => {
+            const pa = this.getColumnDef(a.name)?.cardPriority() ?? 0;
+            const pb = this.getColumnDef(b.name)?.cardPriority() ?? 0;
+            return pb - pa || a.index - b.index;
+        });
+        return fields.map((f) => f.name);
+    }, ...(ngDevMode ? [{ debugName: "cardFieldColumns" }] : []));
+    /** Fields shown directly on the card (up to `cardPrimaryCount`). */
+    cardPrimaryColumns = computed(() => this.cardFieldColumns().slice(0, this.cardPrimaryCount()), ...(ngDevMode ? [{ debugName: "cardPrimaryColumns" }] : []));
+    /** Fields tucked behind the "More fields" disclosure. */
+    cardSecondaryColumns = computed(() => this.cardFieldColumns().slice(this.cardPrimaryCount()), ...(ngDevMode ? [{ debugName: "cardSecondaryColumns" }] : []));
+    /**
+     * 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 = computed(() => {
+        const listed = this.displayedColumns().filter((c) => {
+            const def = this.getColumnDef(c);
+            return !!def?.sortable() && !def.cardHidden();
+        });
+        // Reconciled against the rendered option set, not against one reason for exclusion.
+        // Whatever the active column is, it must have an `<option>`: with none matching, the
+        // browser resets the picker to "Unsorted" while the direction toggle still renders an
+        // arrow beside it, and picking "Unsorted" fires no `change` — it is already the
+        // selected option — so the sort becomes unclearable from card mode. `cardHidden` was
+        // only one way in; `sortColumn` is a two-way `model()`, and a dynamic
+        // `displayedColumns` (a column-visibility toggle) can drop a sorted column or leave
+        // one that was never `sortable()`.
+        const active = this.sortColumn();
+        return active && !listed.includes(active) ? [...listed, active] : listed;
+    }, ...(ngDevMode ? [{ debugName: "sortableColumns" }] : []));
+    /**
+     * 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.
+     */
+    canSortActiveColumn = computed(() => {
+        const column = this.sortColumn();
+        return !!column && !!this.getColumnDef(column)?.sortable();
+    }, ...(ngDevMode ? [{ debugName: "canSortActiveColumn" }] : []));
+    // --- Card-mode sort ---
+    /**
+     * 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) {
+        if (!column) {
+            this.sortColumn.set('');
+            this.sortDirection.set('');
+        }
+        else {
+            const changed = this.sortColumn() !== column;
+            this.sortColumn.set(column);
+            if (changed || this.sortDirection() === '') {
+                this.sortDirection.set('asc');
+            }
+        }
+        this.sortChange.emit({ column: this.sortColumn(), direction: this.sortDirection() });
+    }
+    /**
+     * 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() {
+        // Guarded, not just hidden: the control is gone from the template for a non-sortable
+        // active column, and the method refuses too, so the API can't reorder by a column the
+        // table header would ignore.
+        if (!this.canSortActiveColumn()) {
+            return;
+        }
+        this.sortDirection.set(this.sortDirection() === 'asc' ? 'desc' : 'asc');
+        this.sortChange.emit({ column: this.sortColumn(), direction: this.sortDirection() });
+    }
     // --- Column helpers ---
     getColumnDef(columnName) {
         return this.columnDefMap().get(columnName);
     }
+    /**
+     * Field label for a column in card mode. Precedence: `cardLabel` override →
+     * shared `label` → the column name.
+     */
+    getCardLabel(column) {
+        const def = this.getColumnDef(column);
+        return def?.cardLabel() ?? def?.label() ?? column;
+    }
     getCellValue(row, column) {
         return row[column];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandOnRowClick: { classPropertyName: "expandOnRowClick", publicName: "expandOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--fixed-layout": "fixedLayout()", "class.tn-table--loading": "loading()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<table class=\"tn-table__table\" [style.min-width]=\"resolvedMinWidth()\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [style.width]=\"getColumnDef(column)?.width()\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              @if (canExpandRow(row)) {\n                <button\n                  type=\"button\"\n                  class=\"tn-table__expand-button\"\n                  [attr.aria-expanded]=\"isRowExpanded(row)\"\n                  [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                  (click)=\"toggleRowExpansion(row)\">\n                  <tn-icon\n                    class=\"tn-table__expand-icon\"\n                    [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\n                @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tmpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n                } @else {\n                  <span>{{ getCellValue(row, column) }}</span>\n                }\n              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandOnRowClick: { classPropertyName: "expandOnRowClick", publicName: "expandOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, cardBreakpoint: { classPropertyName: "cardBreakpoint", publicName: "cardBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, cardPrimaryCount: { classPropertyName: "cardPrimaryCount", publicName: "cardPrimaryCount", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--fixed-layout": "fixedLayout()", "class.tn-table--loading": "loading()", "class.tn-table--cards": "isCardMode()", "class.tn-table--scroll": "isScrollMode()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsDef", first: true, predicate: TnRowActionsDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          The handler goes on THIS wrapper, not on <tn-checkbox>: the checkbox is\n          `pointer-events: none` (see `__checkbox` in the stylesheet), so it and its\n          subtree are outside hit testing and a real click lands here instead. A\n          handler bound on the checkbox is never in the event path \u2014 which is how the\n          label -> div change silently killed mouse and touch selection while keyboard\n          kept working, since Space on the hidden input dispatches its own bubbling\n          click. Table mode binds the same handler on its <td> for this reason.\n\n          The click/key and focusable lint rules are suppressed rather than satisfied:\n          this wrapper is a pointer hit area around a control that is already\n          focusable and already handles Space. Giving it `tabindex` and a key handler\n          would add a second tab stop and a second activation path for the same\n          checkbox, which is worse than the rule it silences.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div\n          class=\"tn-table__cards-selectall\"\n          (click)=\"toggleSelectAll(); $event.preventDefault()\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\" />\n        </div>\n      }\n      @if (sortableColumns().length > 0) {\n        <div class=\"tn-table__cards-sort\">\n          <tn-icon name=\"mat-sort\" size=\"sm\" aria-hidden=\"true\" />\n          <select\n            class=\"tn-table__cards-sort-select\"\n            aria-label=\"Sort by\"\n            [value]=\"sortColumn()\"\n            (change)=\"onSortSelectChange($event)\">\n            <!--\n              `[selected]` on the options, not just `[value]` on the <select>:\n              the select's value is bound before the @for options exist, so the\n              browser discards it and the binding is never dirty again \u2014 a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">Unsorted</option>\n            @for (column of sortableColumns(); track column) {\n              <option [value]=\"column\" [selected]=\"column === sortColumn()\">\n                {{ getCardLabel(column) }}\n              </option>\n            }\n          </select>\n          @if (canSortActiveColumn()) {\n            <!--\n              Gated on the column being genuinely sortable, not merely active:\n              `sortableColumns` keeps a non-sortable active column listed so the sort stays\n              clearable, and this toggle must not ride along \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is \"Sort ascending\" both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? 'Sort descending' : 'Sort ascending'\"\n              [attr.data-sort-direction]=\"sortDirection()\"\n              (click)=\"toggleSortDirection()\">\n              @if (sortDirection() === 'asc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_upward\" aria-hidden=\"true\" />\n              } @else if (sortDirection() === 'desc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_downward\" aria-hidden=\"true\" />\n              } @else {\n                <tn-icon size=\"sm\" name=\"mat-unfold_more\" aria-hidden=\"true\" />\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!--\n    Decorative `tn-icon`s carry `aria-hidden=\"true\"`. tn-icon renders `role=\"img\"` and\n    falls back to its `name` for the accessible name, so without this the raw token\n    leaks: a standalone \"mat-sort\" image beside Select all, and disclosures announced\n    as \"More fields mat-keyboard_arrow_down\". The repo convention is the same \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"toggleRowSelection(row); $event.preventDefault(); $event.stopPropagation()\">\n              <!--\n                Named from the card's title, not \"Select row N\": with `hideLabel` this is the\n                checkbox's entire accessible name, and a card list has no visible row numbers\n                to match it against. Falls back to the index when the title column renders\n                derived data through a `tnCellDef` and `getCellValue` has nothing to return \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </div>\n          }\n          <span class=\"tn-table__card-title\">\n            @if (getColumnDef(cardTitleColumn())?.cellTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: cardTitleColumn() }\" />\n            } @else {\n              {{ getCellValue(row, cardTitleColumn()) }}\n            }\n          </span>\n          @if (rowActionsDef()) {\n            <div class=\"tn-table__card-actions\">\n              <ng-container\n                [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        </div>\n\n        <dl class=\"tn-table__card-fields\">\n          @for (column of cardPrimaryColumns(); track column) {\n            <ng-container\n              [ngTemplateOutlet]=\"cardField\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n          }\n        </dl>\n\n        <!--\n          The disclosure sits outside the primary <dl> and wraps its fields in a\n          <dl> of its own: <details> is not a permitted child of <dl>, so nesting\n          it there detached the folded dt/dd pairs from any description list.\n        -->\n        @if (cardSecondaryColumns().length > 0) {\n          <details class=\"tn-table__card-more\">\n            <summary class=\"tn-table__card-more-summary\">\n              <span>More fields</span>\n              <tn-icon size=\"sm\" name=\"mat-keyboard_arrow_down\" aria-hidden=\"true\" />\n            </summary>\n            <dl class=\"tn-table__card-fields\">\n              @for (column of cardSecondaryColumns(); track column) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardField\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n              }\n            </dl>\n          </details>\n        }\n\n        @if (canExpandRow(row) && detailRowDef()) {\n          <!--\n            The button always carries the state, even when the card is also a trigger.\n            An earlier revision suppressed it here to avoid announcing the same panel\n            twice, but that muted the primary control: this button is what a\n            screen-reader user reaches by tabbing through controls, and it was\n            announced as a bare \"Details, button\" with no expanded state, before or\n            after activation. The state sat on the `role=\"listitem\"` card, heard only\n            if the user happened to focus the card itself.\n\n            Two controls that each toggle the same region and each report its state is\n            the disclosure pattern applied twice \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>Details</span>\n            <tn-icon\n              size=\"sm\"\n              aria-hidden=\"true\"\n              [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n          </button>\n          @if (isRowExpanded(row)) {\n            <div class=\"tn-table__card-detail\" [attr.id]=\"detailPanelId(rowIdx)\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <table\n    class=\"tn-table__table\"\n    [style.min-width]=\"resolvedMinWidth()\"\n    [attr.inert]=\"loading() ? '' : null\">\n    <!-- Header Row -->\n    <thead class=\"tn-table__header\">\n      <tr class=\"tn-table__header-row\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              role=\"checkbox\"\n              tabindex=\"0\"\n              [attr.aria-checked]=\"isAllSelected()\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">Expand</span>\n            </th>\n          } @else {\n            <th\n              class=\"tn-table__header-cell\"\n              [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n              [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.aria-sort]=\"\n                isSorted(column)\n                  ? (sortDirection() === 'asc' ? 'ascending' : 'descending')\n                  : (getColumnDef(column)?.sortable() ? 'none' : null)\n              \"\n              [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n              [attr.data-column]=\"column\"\n              (click)=\"onSortHeaderClick(column, $event)\"\n              (keydown.enter)=\"onSortHeaderKeydown(column, $event)\"\n              (keydown.space)=\"onSortHeaderKeydown(column, $event)\">\n              <span class=\"tn-table__sort-container\">\n                <span class=\"tn-table__header-text\">\n                  @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                    <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                  } @else {\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  }\n                </span>\n                @if (getColumnDef(column)?.sortable()) {\n                  <!--\n                    aria-hidden: the <th> has no aria-label, so its accessible name is\n                    computed from its contents \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\n                    [name]=\"\n                      isSorted(column)\n                        ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                        : 'mat-unfold_more'\n                    \" />\n                }\n              </span>\n            </th>\n          }\n        }\n        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">Actions</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          [attr.data-row-index]=\"rowIdx\"\n          [class.tn-table__row--expandable]=\"canExpandRow(row)\"\n          [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n          [class.tn-table__row--active]=\"isRowActive(row)\"\n          [class.tn-table__row--clickable]=\"clickable()\"\n          [attr.tabindex]=\"clickable() ? 0 : null\"\n          [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n          [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n          (click)=\"onRowClick(row, $event)\"\n          (dblclick)=\"onRowDoubleClick(row, $event)\"\n          (keydown)=\"onRowKeydown($event, row)\">\n          @for (column of effectiveDisplayedColumns(); track $index) {\n            @if (column === '__select') {\n              <td class=\"tn-table__cell tn-table__select-cell\"\n                (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\" />\n              </td>\n            } @else if (column === '__expand') {\n              <td class=\"tn-table__cell tn-table__expand-cell\"\n                (click)=\"$event.stopPropagation()\">\n                @if (canExpandRow(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"tn-table__expand-button\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                    (click)=\"toggleRowExpansion(row)\">\n                    <tn-icon\n                      class=\"tn-table__expand-icon\"\n                      aria-hidden=\"true\"\n                      [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                  </button>\n                }\n              </td>\n            } @else {\n              <td\n                class=\"tn-table__cell\"\n                [style.width]=\"getColumnDef(column)?.width()\"\n                [attr.data-column]=\"column\">\n                <div class=\"tn-table__cell-content\">\n                  @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tmpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n                  } @else {\n                    <span>{{ getCellValue(row, column) }}</span>\n                  }\n                </div>\n              </td>\n            }\n          }\n          @if (rowActionsDef()) {\n            <td class=\"tn-table__cell tn-table__actions-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tn-table__actions-content\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n              </div>\n            </td>\n          }\n        </tr>\n\n        <!-- Detail / Expanded Row -->\n        @if (detailRowDef() && canExpandRow(row) && isRowExpanded(row)) {\n          <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n            <td\n              class=\"tn-table__detail-cell\"\n              [attr.colspan]=\"totalColumnCount()\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n}\n\n@if (data().length === 0 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto;border-radius:4px}:host{--tn-table-select-width: 72px;--tn-table-actions-width: 128px;--tn-table-expand-width: 56px}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--fixed-layout) .tn-table__actions-cell{box-sizing:border-box;width:var(--tn-table-actions-width)}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}:host(.tn-table--loading) .tn-table__table,:host(.tn-table--loading) .tn-table__cards,:host(.tn-table--loading) .tn-table__cards-toolbar{pointer-events:none;-webkit-user-select:none;user-select:none}:host(.tn-table--scroll) .tn-table__select-cell{position:sticky;left:0}:host(.tn-table--scroll) .tn-table__header-cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{position:sticky;left:0;z-index:1}:host(.tn-table--scroll) .tn-table__actions-cell{position:sticky;right:0;z-index:3}:host(.tn-table--scroll) .tn-table__header-row>.tn-table__header-cell.tn-table__select-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell.tn-table__select-cell{z-index:2}:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{left:var(--tn-table-select-width)}:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{background-color:inherit}:host(.tn-table--scroll) .tn-table__header-row .tn-table__header-cell:first-child:not(.tn-table__header-cell--sortable:hover),:host(.tn-table--scroll) .tn-table__header-row .tn-table__select-cell+.tn-table__header-cell:not(.tn-table__header-cell--sortable:hover){background-color:var(--tn-topbar)}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2)}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon,.tn-table__header-cell--sortable:focus-visible .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease;background-color:var(--tn-bg2)}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.tn-table__select-cell{box-sizing:border-box;width:var(--tn-table-select-width);padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{box-sizing:border-box;width:var(--tn-table-expand-width);padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table__actions-cell{width:1%;white-space:nowrap;text-align:right;background-color:inherit;border-left:1px solid var(--tn-lines)}.tn-table__header .tn-table__actions-cell{background-color:var(--tn-topbar)}.tn-table__actions-content{display:inline-flex;align-items:center;gap:4px}.tn-table__loading-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;border-radius:4px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}.tn-table__cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 12px}.tn-table__cards-selectall{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tn-fg1);cursor:pointer}.tn-table__cards-sort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--tn-fg2)}.tn-table__cards-sort-select{height:32px;padding:0 8px;border:1px solid var(--tn-lines);border-radius:4px;background-color:var(--tn-bg2);color:var(--tn-fg1);font-size:14px}.tn-table__cards-sort-select:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--tn-lines);border-radius:4px;background:none;color:var(--tn-fg2);cursor:pointer}.tn-table__cards-sort-dir:hover{background-color:var(--tn-alt-bg1)}.tn-table__cards-sort-dir:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards{display:flex;flex-direction:column;gap:8px}.tn-table__card{background-color:var(--tn-bg2);border:1px solid var(--tn-lines);border-radius:6px;padding:12px}.tn-table__card--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333));box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__card--clickable{cursor:pointer}.tn-table__card--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tn-primary)}.tn-table__card--active.tn-table__card--clickable:focus-visible{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__card-header{display:flex;align-items:center;gap:10px}.tn-table__card-select{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.tn-table__card-title{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--tn-fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-table__card-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.tn-table__card-fields{margin:0;padding:10px 0 0}.tn-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}.tn-table__card-field-label{flex-shrink:0;color:var(--tn-fg2)}.tn-table__card-field-value{margin:0;min-width:0;text-align:right;color:var(--tn-fg1);overflow-wrap:anywhere}.tn-table__card-more[open]>.tn-table__card-more-summary tn-icon{transform:rotate(180deg)}.tn-table__card-more{margin-top:2px}.tn-table__card-more-summary{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:13px;color:var(--tn-fg1);cursor:pointer;list-style:none}.tn-table__card-more-summary::-webkit-details-marker{display:none}.tn-table__card-more-summary tn-icon{transition:transform .2s ease}.tn-table__card-more-summary:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 0;background:none;border:none;color:var(--tn-fg1);font-size:13px;cursor:pointer}.tn-table__card-detail-toggle:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--tn-lines)}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__card-more-summary tn-icon,.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                 state('expanded', style({ height: '*' })),
@@ -11733,10 +12324,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[class.tn-table--bordered]': 'bordered()',
                         '[class.tn-table--fixed-layout]': 'fixedLayout()',
                         '[class.tn-table--loading]': 'loading()',
+                        // `--cards` is a state hook only: card mode is styled through the
+                        // `__cards*` element classes, not from the host. It is kept as the
+                        // documented way for consumers and tests to detect the active layout
+                        // without reaching for internal element classes. `--scroll` is both a
+                        // hook and the selector the pinned-column rules key off.
+                        '[class.tn-table--cards]': 'isCardMode()',
+                        '[class.tn-table--scroll]': 'isScrollMode()',
                         '[style.--tn-table-active-bg]': 'activeBg()',
                         '[style.--tn-table-active-indicator]': 'activeIndicator()',
-                    }, template: "<table class=\"tn-table__table\" [style.min-width]=\"resolvedMinWidth()\">\n  <!-- Header Row -->\n  <thead class=\"tn-table__header\">\n    <tr class=\"tn-table__header-row\">\n      @for (column of effectiveDisplayedColumns(); track $index) {\n        @if (column === '__select') {\n          <th class=\"tn-table__header-cell tn-table__select-cell\"\n            role=\"checkbox\"\n            tabindex=\"0\"\n            [attr.aria-checked]=\"isAllSelected()\"\n            (click)=\"toggleSelectAll()\"\n            (keydown.enter)=\"toggleSelectAll()\"\n            (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n            <tn-checkbox\n              class=\"tn-table__checkbox\"\n              label=\"Select all rows\"\n              [hideLabel]=\"true\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\" />\n          </th>\n        } @else if (column === '__expand') {\n          <th class=\"tn-table__header-cell tn-table__expand-cell\">\n            <span class=\"cdk-visually-hidden\">Expand</span>\n          </th>\n        } @else {\n          <th\n            class=\"tn-table__header-cell\"\n            [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n            [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n            [style.width]=\"getColumnDef(column)?.width()\"\n            [attr.aria-sort]=\"\n              isSorted(column)\n                ? sortDirection() === 'asc' ? 'ascending' : 'descending'\n                : null\n            \"\n            [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n            [attr.data-column]=\"column\"\n            (click)=\"getColumnDef(column)?.sortable() && onSortClick(column)\"\n            (keydown.enter)=\"onSortClick(column)\"\n            (keydown.space)=\"onSortClick(column); $event.preventDefault()\">\n            <span class=\"tn-table__sort-container\">\n              <span class=\"tn-table__header-text\">\n                @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                  <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                } @else {\n                  {{ column }}\n                }\n              </span>\n              @if (getColumnDef(column)?.sortable()) {\n                <tn-icon\n                  class=\"tn-table__sort-icon\"\n                  size=\"sm\"\n                  [name]=\"\n                    isSorted(column)\n                      ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                      : 'mat-unfold_more'\n                  \" />\n              }\n            </span>\n          </th>\n        }\n      }\n    </tr>\n  </thead>\n\n  <!-- Data Rows -->\n  <tbody class=\"tn-table__body\">\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <tr\n        class=\"tn-table__row\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__row--expandable]=\"canExpandRow(row)\"\n        [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n        [class.tn-table__row--active]=\"isRowActive(row)\"\n        [class.tn-table__row--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n        [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n        (click)=\"onRowClick(row)\"\n        (dblclick)=\"onRowDoubleClick(row)\"\n        (keydown)=\"onRowKeydown($event, row)\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <td class=\"tn-table__cell tn-table__select-cell\"\n              (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"'Select row ' + (rowIdx + 1)\"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </td>\n          } @else if (column === '__expand') {\n            <td class=\"tn-table__cell tn-table__expand-cell\"\n              (click)=\"$event.stopPropagation()\">\n              @if (canExpandRow(row)) {\n                <button\n                  type=\"button\"\n                  class=\"tn-table__expand-button\"\n                  [attr.aria-expanded]=\"isRowExpanded(row)\"\n                  [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                  (click)=\"toggleRowExpansion(row)\">\n                  <tn-icon\n                    class=\"tn-table__expand-icon\"\n                    [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                </button>\n              }\n            </td>\n          } @else {\n            <td\n              class=\"tn-table__cell\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.data-column]=\"column\">\n              <div class=\"tn-table__cell-content\">\n                @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tmpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n                } @else {\n                  <span>{{ getCellValue(row, column) }}</span>\n                }\n              </div>\n            </td>\n          }\n        }\n      </tr>\n\n      <!-- Detail / Expanded Row -->\n      @if (detailRowDef() && canExpandRow(row) && isRowExpanded(row)) {\n        <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n          <td\n            class=\"tn-table__detail-cell\"\n            [attr.colspan]=\"effectiveDisplayedColumns().length\">\n            <ng-container\n              [ngTemplateOutlet]=\"detailRowDef()!.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n\n@if (data().length === 0 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2);border-radius:4px;overflow:hidden}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.tn-table__select-cell{width:48px;padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{width:48px;padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;z-index:1;border-radius:4px}.tn-table--loading .tn-table__table{pointer-events:none;-webkit-user-select:none;user-select:none}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnRowClick", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }] } });
+                    }, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          The handler goes on THIS wrapper, not on <tn-checkbox>: the checkbox is\n          `pointer-events: none` (see `__checkbox` in the stylesheet), so it and its\n          subtree are outside hit testing and a real click lands here instead. A\n          handler bound on the checkbox is never in the event path \u2014 which is how the\n          label -> div change silently killed mouse and touch selection while keyboard\n          kept working, since Space on the hidden input dispatches its own bubbling\n          click. Table mode binds the same handler on its <td> for this reason.\n\n          The click/key and focusable lint rules are suppressed rather than satisfied:\n          this wrapper is a pointer hit area around a control that is already\n          focusable and already handles Space. Giving it `tabindex` and a key handler\n          would add a second tab stop and a second activation path for the same\n          checkbox, which is worse than the rule it silences.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div\n          class=\"tn-table__cards-selectall\"\n          (click)=\"toggleSelectAll(); $event.preventDefault()\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\" />\n        </div>\n      }\n      @if (sortableColumns().length > 0) {\n        <div class=\"tn-table__cards-sort\">\n          <tn-icon name=\"mat-sort\" size=\"sm\" aria-hidden=\"true\" />\n          <select\n            class=\"tn-table__cards-sort-select\"\n            aria-label=\"Sort by\"\n            [value]=\"sortColumn()\"\n            (change)=\"onSortSelectChange($event)\">\n            <!--\n              `[selected]` on the options, not just `[value]` on the <select>:\n              the select's value is bound before the @for options exist, so the\n              browser discards it and the binding is never dirty again \u2014 a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">Unsorted</option>\n            @for (column of sortableColumns(); track column) {\n              <option [value]=\"column\" [selected]=\"column === sortColumn()\">\n                {{ getCardLabel(column) }}\n              </option>\n            }\n          </select>\n          @if (canSortActiveColumn()) {\n            <!--\n              Gated on the column being genuinely sortable, not merely active:\n              `sortableColumns` keeps a non-sortable active column listed so the sort stays\n              clearable, and this toggle must not ride along \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is \"Sort ascending\" both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? 'Sort descending' : 'Sort ascending'\"\n              [attr.data-sort-direction]=\"sortDirection()\"\n              (click)=\"toggleSortDirection()\">\n              @if (sortDirection() === 'asc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_upward\" aria-hidden=\"true\" />\n              } @else if (sortDirection() === 'desc') {\n                <tn-icon size=\"sm\" name=\"mat-arrow_downward\" aria-hidden=\"true\" />\n              } @else {\n                <tn-icon size=\"sm\" name=\"mat-unfold_more\" aria-hidden=\"true\" />\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!--\n    Decorative `tn-icon`s carry `aria-hidden=\"true\"`. tn-icon renders `role=\"img\"` and\n    falls back to its `name` for the accessible name, so without this the raw token\n    leaks: a standalone \"mat-sort\" image beside Select all, and disclosures announced\n    as \"More fields mat-keyboard_arrow_down\". The repo convention is the same \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"toggleRowSelection(row); $event.preventDefault(); $event.stopPropagation()\">\n              <!--\n                Named from the card's title, not \"Select row N\": with `hideLabel` this is the\n                checkbox's entire accessible name, and a card list has no visible row numbers\n                to match it against. Falls back to the index when the title column renders\n                derived data through a `tnCellDef` and `getCellValue` has nothing to return \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\" />\n            </div>\n          }\n          <span class=\"tn-table__card-title\">\n            @if (getColumnDef(cardTitleColumn())?.cellTemplate(); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: cardTitleColumn() }\" />\n            } @else {\n              {{ getCellValue(row, cardTitleColumn()) }}\n            }\n          </span>\n          @if (rowActionsDef()) {\n            <div class=\"tn-table__card-actions\">\n              <ng-container\n                [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        </div>\n\n        <dl class=\"tn-table__card-fields\">\n          @for (column of cardPrimaryColumns(); track column) {\n            <ng-container\n              [ngTemplateOutlet]=\"cardField\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n          }\n        </dl>\n\n        <!--\n          The disclosure sits outside the primary <dl> and wraps its fields in a\n          <dl> of its own: <details> is not a permitted child of <dl>, so nesting\n          it there detached the folded dt/dd pairs from any description list.\n        -->\n        @if (cardSecondaryColumns().length > 0) {\n          <details class=\"tn-table__card-more\">\n            <summary class=\"tn-table__card-more-summary\">\n              <span>More fields</span>\n              <tn-icon size=\"sm\" name=\"mat-keyboard_arrow_down\" aria-hidden=\"true\" />\n            </summary>\n            <dl class=\"tn-table__card-fields\">\n              @for (column of cardSecondaryColumns(); track column) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardField\"\n                  [ngTemplateOutletContext]=\"{ $implicit: column, row: row }\" />\n              }\n            </dl>\n          </details>\n        }\n\n        @if (canExpandRow(row) && detailRowDef()) {\n          <!--\n            The button always carries the state, even when the card is also a trigger.\n            An earlier revision suppressed it here to avoid announcing the same panel\n            twice, but that muted the primary control: this button is what a\n            screen-reader user reaches by tabbing through controls, and it was\n            announced as a bare \"Details, button\" with no expanded state, before or\n            after activation. The state sat on the `role=\"listitem\"` card, heard only\n            if the user happened to focus the card itself.\n\n            Two controls that each toggle the same region and each report its state is\n            the disclosure pattern applied twice \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>Details</span>\n            <tn-icon\n              size=\"sm\"\n              aria-hidden=\"true\"\n              [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n          </button>\n          @if (isRowExpanded(row)) {\n            <div class=\"tn-table__card-detail\" [attr.id]=\"detailPanelId(rowIdx)\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <table\n    class=\"tn-table__table\"\n    [style.min-width]=\"resolvedMinWidth()\"\n    [attr.inert]=\"loading() ? '' : null\">\n    <!-- Header Row -->\n    <thead class=\"tn-table__header\">\n      <tr class=\"tn-table__header-row\">\n        @for (column of effectiveDisplayedColumns(); track $index) {\n          @if (column === '__select') {\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              role=\"checkbox\"\n              tabindex=\"0\"\n              [attr.aria-checked]=\"isAllSelected()\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">Expand</span>\n            </th>\n          } @else {\n            <th\n              class=\"tn-table__header-cell\"\n              [class.tn-table__header-cell--sortable]=\"getColumnDef(column)?.sortable()\"\n              [class.tn-table__header-cell--sorted]=\"isSorted(column)\"\n              [style.width]=\"getColumnDef(column)?.width()\"\n              [attr.aria-sort]=\"\n                isSorted(column)\n                  ? (sortDirection() === 'asc' ? 'ascending' : 'descending')\n                  : (getColumnDef(column)?.sortable() ? 'none' : null)\n              \"\n              [attr.tabindex]=\"getColumnDef(column)?.sortable() ? 0 : null\"\n              [attr.data-column]=\"column\"\n              (click)=\"onSortHeaderClick(column, $event)\"\n              (keydown.enter)=\"onSortHeaderKeydown(column, $event)\"\n              (keydown.space)=\"onSortHeaderKeydown(column, $event)\">\n              <span class=\"tn-table__sort-container\">\n                <span class=\"tn-table__header-text\">\n                  @if (getColumnDef(column)?.headerTemplate(); as tmpl) {\n                    <ng-container [ngTemplateOutlet]=\"tmpl\" />\n                  } @else {\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  }\n                </span>\n                @if (getColumnDef(column)?.sortable()) {\n                  <!--\n                    aria-hidden: the <th> has no aria-label, so its accessible name is\n                    computed from its contents \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\n                    [name]=\"\n                      isSorted(column)\n                        ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                        : 'mat-unfold_more'\n                    \" />\n                }\n              </span>\n            </th>\n          }\n        }\n        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">Actions</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          [attr.data-row-index]=\"rowIdx\"\n          [class.tn-table__row--expandable]=\"canExpandRow(row)\"\n          [class.tn-table__row--expanded]=\"canExpandRow(row) && isRowExpanded(row)\"\n          [class.tn-table__row--active]=\"isRowActive(row)\"\n          [class.tn-table__row--clickable]=\"clickable()\"\n          [attr.tabindex]=\"clickable() ? 0 : null\"\n          [attr.aria-selected]=\"clickable() ? isRowActive(row) : null\"\n          [attr.aria-expanded]=\"isRowExpandTrigger(row) ? isRowExpanded(row) : null\"\n          (click)=\"onRowClick(row, $event)\"\n          (dblclick)=\"onRowDoubleClick(row, $event)\"\n          (keydown)=\"onRowKeydown($event, row)\">\n          @for (column of effectiveDisplayedColumns(); track $index) {\n            @if (column === '__select') {\n              <td class=\"tn-table__cell tn-table__select-cell\"\n                (click)=\"toggleRowSelection(row); $event.stopPropagation()\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\" />\n              </td>\n            } @else if (column === '__expand') {\n              <td class=\"tn-table__cell tn-table__expand-cell\"\n                (click)=\"$event.stopPropagation()\">\n                @if (canExpandRow(row)) {\n                  <button\n                    type=\"button\"\n                    class=\"tn-table__expand-button\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n                    (click)=\"toggleRowExpansion(row)\">\n                    <tn-icon\n                      class=\"tn-table__expand-icon\"\n                      aria-hidden=\"true\"\n                      [name]=\"isRowExpanded(row) ? 'mat-keyboard_arrow_up' : 'mat-keyboard_arrow_down'\" />\n                  </button>\n                }\n              </td>\n            } @else {\n              <td\n                class=\"tn-table__cell\"\n                [style.width]=\"getColumnDef(column)?.width()\"\n                [attr.data-column]=\"column\">\n                <div class=\"tn-table__cell-content\">\n                  @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tmpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n                  } @else {\n                    <span>{{ getCellValue(row, column) }}</span>\n                  }\n                </div>\n              </td>\n            }\n          }\n          @if (rowActionsDef()) {\n            <td class=\"tn-table__cell tn-table__actions-cell\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tn-table__actions-content\">\n                <ng-container\n                  [ngTemplateOutlet]=\"rowActionsDef()!.template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n              </div>\n            </td>\n          }\n        </tr>\n\n        <!-- Detail / Expanded Row -->\n        @if (detailRowDef() && canExpandRow(row) && isRowExpanded(row)) {\n          <tr class=\"tn-table__detail-row\" [@detailExpand]=\"'expanded'\">\n            <td\n              class=\"tn-table__detail-cell\"\n              [attr.colspan]=\"totalColumnCount()\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailRowDef()!.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n}\n\n@if (data().length === 0 && !loading()) {\n  <tn-empty\n    size=\"compact\"\n    [title]=\"emptyMessage()\"\n    [description]=\"emptyDescription()\"\n    [icon]=\"emptyIcon()\" />\n}\n\n@if (loading()) {\n  <div\n    class=\"tn-table__loading-overlay\"\n    role=\"status\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"loadingMessage()\">\n    <tn-spinner [ariaLabel]=\"loadingMessage()\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative;width:100%;overflow-x:auto;border-radius:4px}:host{--tn-table-select-width: 72px;--tn-table-actions-width: 128px;--tn-table-expand-width: 56px}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host(.tn-table--fixed-layout) table{table-layout:fixed;width:100%}:host(.tn-table--fixed-layout) .tn-table__actions-cell{box-sizing:border-box;width:var(--tn-table-actions-width)}:host(.tn-table--bordered){border:1px solid var(--tn-lines);border-radius:4px}:host(.tn-table--loading) .tn-table__table,:host(.tn-table--loading) .tn-table__cards,:host(.tn-table--loading) .tn-table__cards-toolbar{pointer-events:none;-webkit-user-select:none;user-select:none}:host(.tn-table--scroll) .tn-table__select-cell{position:sticky;left:0}:host(.tn-table--scroll) .tn-table__header-cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{position:sticky;left:0;z-index:1}:host(.tn-table--scroll) .tn-table__actions-cell{position:sticky;right:0;z-index:3}:host(.tn-table--scroll) .tn-table__header-row>.tn-table__header-cell.tn-table__select-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__cell.tn-table__select-cell{z-index:2}:host(.tn-table--scroll) .tn-table__select-cell+.tn-table__header-cell,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{left:var(--tn-table-select-width)}:host(.tn-table--scroll) .tn-table__row>.tn-table__cell:first-child,:host(.tn-table--scroll) .tn-table__row>.tn-table__select-cell+.tn-table__cell{background-color:inherit}:host(.tn-table--scroll) .tn-table__header-row .tn-table__header-cell:first-child:not(.tn-table__header-cell--sortable:hover),:host(.tn-table--scroll) .tn-table__header-row .tn-table__select-cell+.tn-table__header-cell:not(.tn-table__header-cell--sortable:hover){background-color:var(--tn-topbar)}.tn-table__table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--tn-bg2)}.tn-table__header{background-color:var(--tn-topbar);color:var(--tn-topbar-txt)}.tn-table__header-row{height:56px}.tn-table__header-cell{padding:0 16px;text-align:left;font-weight:600;font-size:14px;border-bottom:1px solid var(--tn-lines);white-space:nowrap;vertical-align:middle}.tn-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tn-table__header-cell--sortable:hover{background-color:color-mix(in srgb,var(--tn-topbar) 85%,var(--tn-topbar-txt))}.tn-table__sort-container{display:inline-flex;align-items:center;gap:4px}.tn-table__sort-icon{opacity:0;transition:opacity .2s ease}.tn-table__header-cell--sortable:hover .tn-table__sort-icon,.tn-table__header-cell--sortable:focus-visible .tn-table__sort-icon{opacity:.5}.tn-table__header-cell--sorted .tn-table__sort-icon{opacity:1}.tn-table__body{background-color:var(--tn-bg2)}.tn-table__row{height:48px;transition:background-color .2s ease;background-color:var(--tn-bg2)}.tn-table__row:hover{background-color:var(--tn-alt-bg1)}.tn-table__row:not(:last-child){border-bottom:1px solid var(--tn-lines)}.tn-table__row--expanded{background-color:var(--tn-alt-bg1)}.tn-table__row--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333))}.tn-table__row--active>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__row--clickable{cursor:pointer}.tn-table__row--clickable:focus-visible{outline:none}.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-primary),inset 0 0 0 2px var(--tn-primary)}.tn-table__row--active.tn-table__row--clickable:focus-visible>.tn-table__cell:first-child{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__cell{padding:0 16px;font-size:14px;color:var(--tn-fg1);vertical-align:middle;overflow:hidden}.tn-table__cell-content{display:flex;align-items:center;min-height:24px;white-space:normal;overflow-wrap:anywhere;overflow:hidden;padding:4px;margin:-4px}.tn-table__cell-content>*{min-width:0}.tn-table__select-cell{box-sizing:border-box;width:var(--tn-table-select-width);padding:0 8px 0 16px;cursor:pointer}.tn-table__checkbox{pointer-events:none}.tn-table__expand-cell{box-sizing:border-box;width:var(--tn-table-expand-width);padding:0 16px 0 8px;text-align:center}.tn-table__expand-button{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;color:var(--tn-fg2)}.tn-table__expand-button:hover{background-color:var(--tn-alt-bg1)}.tn-table__expand-button:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__expand-icon{transition:transform .2s ease}.tn-table__detail-row{background-color:var(--tn-alt-bg1);border-bottom:1px solid var(--tn-lines)}.tn-table__detail-cell{padding:16px}.tn-table__actions-cell{width:1%;white-space:nowrap;text-align:right;background-color:inherit;border-left:1px solid var(--tn-lines)}.tn-table__header .tn-table__actions-cell{background-color:var(--tn-topbar)}.tn-table__actions-content{display:inline-flex;align-items:center;gap:4px}.tn-table__loading-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--tn-bg2, #282828) 65%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all;border-radius:4px}.tn-table--dense .tn-table__header-row{height:40px}.tn-table--dense .tn-table__row{height:32px}.tn-table--dense .tn-table__header-cell,.tn-table--dense .tn-table__cell{padding:0 12px;font-size:13px}.tn-table__cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 12px}.tn-table__cards-selectall{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tn-fg1);cursor:pointer}.tn-table__cards-sort{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--tn-fg2)}.tn-table__cards-sort-select{height:32px;padding:0 8px;border:1px solid var(--tn-lines);border-radius:4px;background-color:var(--tn-bg2);color:var(--tn-fg1);font-size:14px}.tn-table__cards-sort-select:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--tn-lines);border-radius:4px;background:none;color:var(--tn-fg2);cursor:pointer}.tn-table__cards-sort-dir:hover{background-color:var(--tn-alt-bg1)}.tn-table__cards-sort-dir:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__cards{display:flex;flex-direction:column;gap:8px}.tn-table__card{background-color:var(--tn-bg2);border:1px solid var(--tn-lines);border-radius:6px;padding:12px}.tn-table__card--active{background-color:var(--tn-table-active-bg, var(--tn-bg3, #333333));box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3))}.tn-table__card--clickable{cursor:pointer}.tn-table__card--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tn-primary)}.tn-table__card--active.tn-table__card--clickable:focus-visible{box-shadow:inset 3px 0 0 0 var(--tn-table-active-indicator, var(--tn-primary, #007db3)),inset 0 0 0 2px var(--tn-primary)}.tn-table__card-header{display:flex;align-items:center;gap:10px}.tn-table__card-select{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.tn-table__card-title{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--tn-fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-table__card-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.tn-table__card-fields{margin:0;padding:10px 0 0}.tn-table__card-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}.tn-table__card-field-label{flex-shrink:0;color:var(--tn-fg2)}.tn-table__card-field-value{margin:0;min-width:0;text-align:right;color:var(--tn-fg1);overflow-wrap:anywhere}.tn-table__card-more[open]>.tn-table__card-more-summary tn-icon{transform:rotate(180deg)}.tn-table__card-more{margin-top:2px}.tn-table__card-more-summary{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:13px;color:var(--tn-fg1);cursor:pointer;list-style:none}.tn-table__card-more-summary::-webkit-details-marker{display:none}.tn-table__card-more-summary tn-icon{transition:transform .2s ease}.tn-table__card-more-summary:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 0;background:none;border:none;color:var(--tn-fg1);font-size:13px;cursor:pointer}.tn-table__card-detail-toggle:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-table__card-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--tn-lines)}@media(max-width:768px){.tn-table__table{font-size:12px}.tn-table__header-cell,.tn-table__cell{padding:0 8px}}@media(prefers-reduced-motion:reduce){.tn-table__card-more-summary tn-icon,.tn-table__sort-icon,.tn-table__expand-icon,.tn-table__row{transition:none}.tn-table__detail-row{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnRowClick", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], cardBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBreakpoint", required: false }] }], cardPrimaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPrimaryCount", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }], rowActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnRowActionsDefDirective), { isSignal: true }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }] } });
 
 /**
  * Harness for interacting with `tn-table` in tests.
@@ -11770,18 +12368,59 @@ 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.
      */
     async getRowCount() {
-        const rows = await this.locatorForAll('.tn-table__row')();
+        // Counts cards in card mode. Answering 0 there was the silent-wrong-answer shape the
+        // selection block rejects, and this is the harness's own headline example — a consumer
+        // that narrows the container and asserts emptiness would pass vacuously.
+        const selector = (await this.isCards()) ? '.tn-table__card' : '.tn-table__row';
+        const rows = await this.locatorForAll(selector)();
         return rows.length;
     }
+    /**
+     * 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.
+     */
+    async assertTableLayout(method) {
+        if (await this.isCards()) {
+            throw new Error(`TnTableHarness.${method}() has no meaning in the card layout. `
+                + 'Use the card API instead — getCardCount(), getCardTitle(), getCardFieldValue(), '
+                + 'toggleCardDetail(), expandCardMoreFields(), getCardSortColumn(), '
+                + 'getCardSortDirection(), toggleCardSortDirection(), clickCard(), '
+                + 'doubleClickCard(), pressKeyOnCard(), isCardFocusable() — or widen the container '
+                + 'above cardBreakpoint.');
+        }
+    }
+    /**
+     * 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.
+     */
+    async assertCardLayout(method) {
+        if (!(await this.isCards())) {
+            throw new Error(`TnTableHarness.${method}() has no meaning in the table layout. `
+                + 'Use the row API instead — getRowCount(), getCellText(), getRowTexts(), '
+                + 'toggleRowExpansion(), clickSortHeader(), clickRow(), doubleClickRow(), '
+                + 'pressKeyOnRow(), isRowFocusable() — or narrow the container below '
+                + 'cardBreakpoint.');
+        }
+    }
     /**
      * 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.
      */
     async getHeaderTexts() {
+        await this.assertTableLayout('getHeaderTexts');
         const textEls = await this.locatorForAll('.tn-table__header-text')();
         const texts = [];
         for (const el of textEls) {
@@ -11794,8 +12433,10 @@ 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.
      */
     async getRowTexts(rowIndex) {
+        await this.assertTableLayout('getRowTexts');
         await this.assertRowExists(rowIndex);
         const cells = await this.locatorForAll(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__cell[data-column]`)();
         const texts = [];
@@ -11810,8 +12451,11 @@ 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.
      */
     async getCellText(rowIndex, columnName) {
+        await this.assertTableLayout('getCellText');
         await this.assertRowExists(rowIndex);
         const cell = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] [data-column="${columnName}"]`)();
         return (await cell.text()).trim();
@@ -11820,8 +12464,10 @@ class TnTableHarness extends ComponentHarness {
      * 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.
      */
     async getAllRowTexts() {
+        await this.assertTableLayout('getAllRowTexts');
         const count = await this.getRowCount();
         const result = [];
         for (let i = 0; i < count; i++) {
@@ -11834,8 +12480,11 @@ class TnTableHarness extends ComponentHarness {
      * 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.
      */
     async clickSortHeader(columnName) {
+        await this.assertTableLayout('clickSortHeader');
         const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
         await header.click();
     }
@@ -11844,59 +12493,105 @@ 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.
      */
     async isSortable(columnName) {
+        await this.assertTableLayout('isSortable');
         const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
         return header.hasClass('tn-table__header-cell--sortable');
     }
     /**
      * 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.
      */
     async getSortDirection(columnName) {
+        await this.assertTableLayout('getSortDirection');
         const header = await this.locatorFor(`th[data-column="${columnName}"]`)();
-        return header.getAttribute('aria-sort');
+        const sort = await header.getAttribute('aria-sort');
+        return sort === 'none' ? null : sort;
     }
     // --- Selection ---
+    //
+    // Layout-aware, all four of them. Card mode renders no `.tn-table__row` at all —
+    // selection lives in `.tn-table__card .tn-table__card-select` — so a row-based
+    // locator either throws or, worse, answers 0 for a table with rows selected.
+    // Consumers shouldn't have to branch on the rendered layout to ask "is this row
+    // selected", so these resolve the right selectors themselves.
+    //
+    // The click target is the WRAPPER in both layouts (the `<td>`, or the card's
+    // `<div>`): `.tn-table__checkbox` is `pointer-events: none`, so clicking the
+    // checkbox itself exercises a path no user can take.
+    /** True when the container is narrow enough that card mode is rendered. */
+    async isCards() {
+        return (await this.getLayoutMode()) === 'cards';
+    }
     /**
-     * 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.
      */
     async toggleSelectAll() {
-        const cell = await this.locatorFor('.tn-table__header-row .tn-table__select-cell')();
-        await cell.click();
+        const selector = (await this.isCards())
+            ? '.tn-table__cards-selectall'
+            : '.tn-table__header-row .tn-table__select-cell';
+        const target = await this.locatorFor(selector)();
+        await target.click();
     }
     /**
-     * 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.
      */
     async toggleRowSelection(rowIndex) {
-        await this.assertRowExists(rowIndex);
-        const cell = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__select-cell`)();
-        await cell.click();
+        await this.assertIndexExists(rowIndex);
+        const selector = (await this.isCards())
+            ? `.tn-table__card[data-row-index="${rowIndex}"] .tn-table__card-select`
+            : `.tn-table__row[data-row-index="${rowIndex}"] .tn-table__select-cell`;
+        const target = await this.locatorFor(selector)();
+        await target.click();
     }
     /**
-     * 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.
      */
     async isRowSelected(rowIndex) {
-        await this.assertRowExists(rowIndex);
-        const checkbox = await this.locatorFor(TnCheckboxHarness.with({
-            ancestor: `.tn-table__row[data-row-index="${rowIndex}"]`,
-        }))();
+        await this.assertIndexExists(rowIndex);
+        // Scoped to the select cell, matching `toggleRowSelection` and `getSelectedRowCount`.
+        // Resolving against the whole row/card takes the first checkbox in document order, which
+        // is the selection one only while `selectable` is on — with it off and a `tn-checkbox`
+        // projected through `[tnRowActionsDef]`, this reported that checkbox's state instead of
+        // failing to find a selection control.
+        const ancestor = (await this.isCards())
+            ? `.tn-table__card[data-row-index="${rowIndex}"] .tn-table__card-select`
+            : `.tn-table__row[data-row-index="${rowIndex}"] .tn-table__select-cell`;
+        const checkbox = await this.locatorFor(TnCheckboxHarness.with({ ancestor }))();
         return checkbox.isChecked();
     }
     /**
-     * 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.
      */
     async getSelectedRowCount() {
-        const checkboxes = await this.locatorForAll(TnCheckboxHarness.with({ ancestor: '.tn-table__row' }))();
+        // Scoped to the select cell, not the whole row/card: a checkbox projected through
+        // `[tnRowActionsDef]` sits inside the row, and in card mode the detail panel is a
+        // descendant of the card, so a checkbox in a detail template would inflate the count.
+        // (Table mode escaped the second case only because its detail row is a sibling `<tr>`.)
+        const ancestor = (await this.isCards())
+            ? '.tn-table__card-select'
+            : '.tn-table__row .tn-table__select-cell';
+        const checkboxes = await this.locatorForAll(TnCheckboxHarness.with({ ancestor }))();
         let count = 0;
         for (const cb of checkboxes) {
             if (await cb.isChecked()) {
@@ -11910,8 +12605,11 @@ 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.
      */
     async toggleRowExpansion(rowIndex) {
+        await this.assertTableLayout('toggleRowExpansion');
         await this.assertRowExists(rowIndex);
         const button = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__expand-button`)();
         await button.click();
@@ -11921,8 +12619,10 @@ 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.
      */
     async isRowExpanded(rowIndex) {
+        await this.assertTableLayout('isRowExpanded');
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         return row.hasClass('tn-table__row--expanded');
@@ -11933,8 +12633,11 @@ 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.
      */
     async hasExpandControl(rowIndex) {
+        await this.assertTableLayout('hasExpandControl');
         await this.assertRowExists(rowIndex);
         const button = await this.locatorForOptional(`.tn-table__row[data-row-index="${rowIndex}"] .tn-table__expand-button`)();
         return button !== null;
@@ -11944,8 +12647,10 @@ class TnTableHarness extends ComponentHarness {
      * 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.
      */
     async clickRow(rowIndex) {
+        await this.assertTableLayout('clickRow');
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         await row.click();
@@ -11956,8 +12661,10 @@ 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.
      */
     async doubleClickRow(rowIndex) {
+        await this.assertTableLayout('doubleClickRow');
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         await row.dispatchEvent('dblclick');
@@ -11967,8 +12674,10 @@ 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.
      */
     async pressKeyOnRow(rowIndex, key) {
+        await this.assertTableLayout('pressKeyOnRow');
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         await row.focus();
@@ -11983,8 +12692,10 @@ class TnTableHarness extends ComponentHarness {
      * 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.
      */
     async isRowFocusable(rowIndex) {
+        await this.assertTableLayout('isRowFocusable');
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         return (await row.getAttribute('tabindex')) === '0';
@@ -12003,10 +12714,17 @@ 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.
      */
     async isRowActive(rowIndex) {
+        if (await this.isCards()) {
+            const card = await this.locatorFor(`.tn-table__card[data-row-index="${rowIndex}"]`)();
+            return card.hasClass('tn-table__card--active');
+        }
         await this.assertRowExists(rowIndex);
         const row = await this.locatorFor(`.tn-table__row[data-row-index="${rowIndex}"]`)();
         return row.hasClass('tn-table__row--active');
@@ -12017,11 +12735,19 @@ class TnTableHarness extends ComponentHarness {
      * @returns Promise resolving to the active row index or null.
      */
     async getActiveRowIndex() {
-        const row = await this.locatorForOptional('.tn-table__row--active')();
-        if (!row) {
+        // Layout-aware for the same reason as the selection block: card mode marks the active
+        // row as `.tn-table__card--active` and renders no `.tn-table__row` at all, so a
+        // row-only locator answered null — "nothing is active" — over a visibly active card.
+        // Silent wrong answers are worse than a throw; this one could green a test after a
+        // resize.
+        const selector = (await this.isCards())
+            ? '.tn-table__card--active'
+            : '.tn-table__row--active';
+        const active = await this.locatorForOptional(selector)();
+        if (!active) {
             return null;
         }
-        const attr = await row.getAttribute('data-row-index');
+        const attr = await active.getAttribute('data-row-index');
         return attr === null ? null : Number(attr);
     }
     /**
@@ -12029,8 +12755,11 @@ 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.
      */
     async getDetailRowContent(detailIndex) {
+        await this.assertTableLayout('getDetailRowContent');
         const detailRows = await this.locatorForAll('.tn-table__detail-row')();
         if (detailIndex >= detailRows.length) {
             throw new Error(`Detail row index ${detailIndex} out of bounds (${detailRows.length} detail rows)`);
@@ -12040,21 +12769,355 @@ class TnTableHarness extends ComponentHarness {
     /**
      * 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.
      */
     async getExpandedRowCount() {
+        if (await this.isCards()) {
+            const panels = await this.locatorForAll('.tn-table__card-detail')();
+            return panels.length;
+        }
         const detailRows = await this.locatorForAll('.tn-table__detail-row')();
         return detailRows.length;
     }
+    // --- Card layout (responsive) ---
+    /**
+     * 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'.
+     */
+    async getLayoutMode() {
+        const cards = await this.locatorForOptional('.tn-table__cards')();
+        return cards ? 'cards' : 'table';
+    }
+    /**
+     * Gets the number of rendered cards (card layout only).
+     *
+     * @returns Promise resolving to the card count.
+     */
+    async getCardCount() {
+        await this.assertCardLayout('getCardCount');
+        const cards = await this.locatorForAll('.tn-table__card')();
+        return cards.length;
+    }
+    /**
+     * Gets the title text of a card.
+     *
+     * @param cardIndex Zero-based index of the card.
+     * @returns Promise resolving to the card title text.
+     */
+    async getCardTitle(cardIndex) {
+        await this.assertCardLayout('getCardTitle');
+        const title = await this.locatorFor(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-title`)();
+        return (await title.text()).trim();
+    }
+    /**
+     * 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.
+     */
+    async getCardFieldValue(cardIndex, columnName) {
+        await this.assertCardLayout('getCardFieldValue');
+        const value = await this.locatorFor(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-field[data-column="${columnName}"] .tn-table__card-field-value`)();
+        return (await value.text()).trim();
+    }
+    /**
+     * 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.
+     */
+    async getCardPrimaryFieldColumns(cardIndex) {
+        await this.assertCardLayout('getCardPrimaryFieldColumns');
+        const fields = await this.locatorForAll(`.tn-table__card[data-row-index="${cardIndex}"] > .tn-table__card-fields > .tn-table__card-field[data-column]`)();
+        const columns = [];
+        for (const field of fields) {
+            const col = await field.getAttribute('data-column');
+            if (col !== null) {
+                columns.push(col);
+            }
+        }
+        return columns;
+    }
+    /**
+     * 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.
+     */
+    async expandCardMoreFields(cardIndex) {
+        await this.assertCardLayout('expandCardMoreFields');
+        const disclosure = await this.locatorForOptional(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-more`)();
+        if (!disclosure) {
+            return;
+        }
+        // Idempotent, because the name and the doc promise an expand while `<summary>` toggles.
+        // A second call used to collapse it — and under a real WebDriver, where `text()` returns
+        // only visible text, `getCardFieldValue()` on a folded field would then come back empty.
+        if (await disclosure.getProperty('open')) {
+            return;
+        }
+        const summary = await this.locatorFor(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-more-summary`)();
+        await summary.click();
+    }
+    /**
+     * Toggles a card's detail section (card layout equivalent of row expansion).
+     *
+     * @param cardIndex Zero-based index of the card.
+     */
+    async toggleCardDetail(cardIndex) {
+        await this.assertCardLayout('toggleCardDetail');
+        const toggle = await this.locatorFor(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-detail-toggle`)();
+        await toggle.click();
+    }
+    /**
+     * 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.
+     */
+    async getCardSortColumn() {
+        const select = await this.locatorForOptional('.tn-table__cards-sort-select')();
+        if (!select) {
+            return null;
+        }
+        return select.getProperty('value');
+    }
+    /**
+     * 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.
+     */
+    async getCardSortDirection() {
+        const menu = await this.locatorForOptional('.tn-table__cards-sort')();
+        if (!menu) {
+            return null;
+        }
+        const button = await this.locatorForOptional('.tn-table__cards-sort-dir')();
+        if (!button) {
+            return '';
+        }
+        const direction = await button.getAttribute('data-sort-direction');
+        // Report the empty direction rather than rounding it up to 'asc'. A column set with
+        // no direction is not sorted, and claiming otherwise made this getter contradict its
+        // own contract — and hid the fact that the button rendered a direction for it.
+        if (direction === 'asc' || direction === 'desc') {
+            return direction;
+        }
+        return '';
+    }
+    /**
+     * 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.
+     */
+    async toggleCardSortDirection() {
+        const button = await this.locatorForOptional('.tn-table__cards-sort-dir')();
+        if (button) {
+            await button.click();
+        }
+    }
+    // --- Card activation ---
+    //
+    // Mirrors of the four clickable-row methods. Without them the row methods' `@throws` sent a
+    // card-mode spec to a card API that could not activate anything, and the only way through
+    // was raw DOM — which is what the harness exists to spare a consumer.
+    /**
+     * 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.
+     */
+    async clickCard(cardIndex) {
+        await this.assertCardLayout('clickCard');
+        await this.assertIndexExists(cardIndex);
+        const target = await this.cardActivationTarget(cardIndex);
+        await target.click();
+    }
+    /**
+     * 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.
+     */
+    async doubleClickCard(cardIndex) {
+        await this.assertCardLayout('doubleClickCard');
+        await this.assertIndexExists(cardIndex);
+        const card = await this.cardAt(cardIndex);
+        await card.dispatchEvent('dblclick');
+    }
+    /**
+     * 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.
+     */
+    async pressKeyOnCard(cardIndex, key) {
+        await this.assertCardLayout('pressKeyOnCard');
+        await this.assertIndexExists(cardIndex);
+        const card = await this.cardAt(cardIndex);
+        await card.focus();
+        if (key === 'enter') {
+            await card.sendKeys(TestKey.ENTER);
+        }
+        else {
+            await card.sendKeys(' ');
+        }
+    }
+    /**
+     * 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.
+     */
+    async isCardFocusable(cardIndex) {
+        await this.assertCardLayout('isCardFocusable');
+        await this.assertIndexExists(cardIndex);
+        const card = await this.cardAt(cardIndex);
+        return (await card.getAttribute('tabindex')) === '0';
+    }
     // --- Internal helpers ---
-    async assertRowExists(rowIndex) {
+    /** The card box itself — the element carrying `tabindex`, the handlers and the ARIA state. */
+    async cardAt(cardIndex) {
+        return this.locatorFor(`.tn-table__card[data-row-index="${cardIndex}"]`)();
+    }
+    /** The surface pointer activation is aimed at — see {@link clickCard} for why not the card. */
+    async cardActivationTarget(cardIndex) {
+        const title = await this.locatorForOptional(`.tn-table__card[data-row-index="${cardIndex}"] .tn-table__card-title`)();
+        return title ?? (await this.cardAt(cardIndex));
+    }
+    /**
+     * 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.
+     */
+    async assertIndexExists(index) {
         const count = await this.getRowCount();
-        if (rowIndex >= count) {
-            throw new Error(`Row index ${rowIndex} out of bounds (${count} rows)`);
+        if (index >= count) {
+            const noun = (await this.isCards()) ? 'cards' : 'rows';
+            throw new Error(`Row index ${index} out of bounds (${count} ${noun})`);
+        }
+    }
+    async assertRowExists(rowIndex) {
+        // Counts `.tn-table__row` directly rather than calling `getRowCount()`, which is
+        // layout-aware: in card mode that counts cards, so this guard passed for every valid
+        // index and stopped catching the very mismatch it exists for. Row-only methods pair it
+        // with `assertTableLayout()`, which reports the layout mismatch first.
+        const rows = await this.locatorForAll('.tn-table__row')();
+        if (rowIndex >= rows.length) {
+            throw new Error(`Row index ${rowIndex} out of bounds (${rows.length} rows)`);
         }
     }
 }
 
+/**
+ * Stand-in for `ResizeObserver`, which jsdom does not implement — so a `tn-table` under
+ * test can never measure its own container and never leaves the table layout on its own.
+ * Installing this lets a spec push a width through the component's real callback path
+ * rather than reaching for its private state.
+ *
+ * Module-private on purpose. `MockResizeObserver` is a name a consumer's own test helpers
+ * plausibly already define — this repo's own `tree-virtual-scroll-view.component.spec.ts`
+ * declares one — and a wildcard import of the library would collide with it. Everything a
+ * caller needs is reachable through {@link TnTableTesting}.
+ */
+class MockResizeObserver {
+    cb;
+    static instances = [];
+    constructor(cb) {
+        this.cb = cb;
+        MockResizeObserver.instances.push(this);
+    }
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+    /** Fires the observed callback with `width` as the element's content-box width. */
+    emitWidth(width) {
+        this.cb([{ contentRect: { width } }], this);
+    }
+}
+/**
+ * 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();
+ * ```
+ */
+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() {
+        const original = globalThis.ResizeObserver;
+        MockResizeObserver.instances = [];
+        globalThis.ResizeObserver = MockResizeObserver;
+        return () => {
+            globalThis.ResizeObserver = original;
+        };
+    },
+    /**
+     * 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) {
+        MockResizeObserver.instances.forEach((observer) => observer.emitWidth(width));
+    },
+};
+
 /** English defaults used when no `TN_TABLE_PAGER_LABELS` provider is registered. */
 const TN_TABLE_PAGER_DEFAULT_LABELS = {
     itemsPerPage: 'Items per page',
@@ -19458,7 +20521,7 @@ class TnFilePickerPopupComponent {
         return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()} ${timePart}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, #d32f2f)}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, #d32f2f) 10%,transparent);border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:1rem;color:var(--tn-error, #d32f2f)}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyDescription", "emptyIcon", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary);cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, #d32f2f)}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, #d32f2f) 10%,transparent);border-left:3px solid var(--tn-error, #d32f2f);border-radius:3px;font-size:1rem;color:var(--tn-error, #d32f2f)}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;color:var(--tn-fg1);padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyDescription", "emptyIcon", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "mobileLayout", "cardBreakpoint", "cardPrimaryCount", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width", "label", "cardPriority", "cardTitle", "cardHidden", "cardLabel"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, decorators: [{
             type: Component,
@@ -21314,5 +22377,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map