@truenas/ui-components 0.8.12 → 0.8.14

package/fesm2022/truenas-ui-components.mjs

@@ -16828,6 +16828,11 @@ var TnTableComponent = class TnTableComponent {
 		const resolve = this.rowTestId();
 		return resolve ? this.data().map((row, index) => resolve(row, index)) : [];
 	}, ...ngDevMode ? [{ debugName: "rowTestIds" }] : /* istanbul ignore next */ []);
+	rowSelectTestIds = computed(() => this.rowControlTestIds("select"), ...ngDevMode ? [{ debugName: "rowSelectTestIds" }] : /* istanbul ignore next */ []);
+	rowExpandTestIds = computed(() => this.rowControlTestIds("expand"), ...ngDevMode ? [{ debugName: "rowExpandTestIds" }] : /* istanbul ignore next */ []);
+	rowControlTestIds(role) {
+		return this.rowTestIds().map((base) => composeTestId(void 0, base) === "" ? void 0 : [role, ...Array.isArray(base) ? base : [base]]);
+	}
 	effectiveDisplayedColumns = computed(() => {
 		const cols = [...this.displayedColumns()];
 		if (this.selectable()) cols.unshift("__select");
@@ -17404,7 +17409,7 @@ var TnTableComponent = class TnTableComponent {
 			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          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox — see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action — which is how the label\n          activates the input.\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)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\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            [attr.aria-label]=\"labels().sortBy\"\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 — a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().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 — 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 —\n              reachable through the two-way binding — 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 `sortAscending` both when unsorted\n              and when descending — `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\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 — 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 — `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 — 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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 — 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)=\"onRowSelectHitAreaClick($event, row)\">\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 —\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                (change)=\"toggleRowSelection(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>{{ labels().moreFields }}</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 — 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>{{ labels().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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area — the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration — see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet — projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\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                }\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 — 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\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it — a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : 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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\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.id]=\"detailPanelId(rowIdx)\"\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",
+		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          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox — see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action — which is how the label\n          activates the input.\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)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            testId=\"all-rows\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\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            [attr.aria-label]=\"labels().sortBy\"\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 — a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().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 — 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 —\n              reachable through the two-way binding — 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 `sortAscending` both when unsorted\n              and when descending — `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\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 — 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 — `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 — 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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 — 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)=\"onRowSelectHitAreaClick($event, row)\">\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 —\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                [testId]=\"rowSelectTestIds()[rowIdx]\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRowSelection(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>{{ labels().moreFields }}</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 — redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            tnTestIdType=\"button\"\n            [tnTestId]=\"rowExpandTestIds()[rowIdx]\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ labels().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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area — the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration — see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                testId=\"all-rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet — projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\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                }\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 — 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\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it — a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : 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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [testId]=\"rowSelectTestIds()[rowIdx]\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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                    tnTestIdType=\"button\"\n                    [tnTestId]=\"rowExpandTestIds()[rowIdx]\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\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.id]=\"detailPanelId(rowIdx)\"\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:var(--tn-topbar-hover)}.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__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: [
 			{
@@ -17546,7 +17551,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.role]": "scrollKeyboardReachable() ? \"group\" : null",
 				"[attr.aria-label]": "scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null"
 			},
-			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          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox — see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action — which is how the label\n          activates the input.\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)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\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            [attr.aria-label]=\"labels().sortBy\"\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 — a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().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 — 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 —\n              reachable through the two-way binding — 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 `sortAscending` both when unsorted\n              and when descending — `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\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 — 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 — `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 — 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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 — 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)=\"onRowSelectHitAreaClick($event, row)\">\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 —\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                (change)=\"toggleRowSelection(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>{{ labels().moreFields }}</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 — 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>{{ labels().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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area — the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration — see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet — projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\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                }\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 — 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\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it — a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : 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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\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.id]=\"detailPanelId(rowIdx)\"\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",
+			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          Two activation paths, deliberately, and they are mutually exclusive. The\n          checkbox activates itself and reports through `(change)`; this wrapper is\n          only the hit area around it, so its handler stands down for anything that\n          started inside the checkbox — see `onSelectAllHitAreaClick`. Until #236 the\n          wrapper was the only path, because `.tn-table__checkbox` was\n          `pointer-events: none` and no real click could reach the control; that\n          shape is what forced a focusable `role=\"checkbox\"` onto the table header's\n          <th>, nesting one widget inside another.\n\n          No `preventDefault()` here any more, and that is load-bearing rather than\n          tidiness: a click on the checkbox's own <label> bubbles to this wrapper, and\n          cancelling it cancels the label's default action — which is how the label\n          activates the input.\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)=\"onSelectAllHitAreaClick($event)\">\n          <tn-checkbox\n            class=\"tn-table__checkbox\"\n            label=\"Select all\"\n            testId=\"all-rows\"\n            [disabled]=\"!canSelectAll()\"\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll()\" />\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            [attr.aria-label]=\"labels().sortBy\"\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 — a table\n              sorted before card mode engaged would render as \"Unsorted\".\n            -->\n            <option value=\"\" [selected]=\"!sortColumn()\">{{ labels().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 — 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 —\n              reachable through the two-way binding — 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 `sortAscending` both when unsorted\n              and when descending — `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? labels().sortDescending : labels().sortAscending\"\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 — 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 — `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 — 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        tnTestIdType=\"row\"\n        [tnTestId]=\"rowTestIds()[rowIdx]\"\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 — 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)=\"onRowSelectHitAreaClick($event, row)\">\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 —\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                [testId]=\"rowSelectTestIds()[rowIdx]\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRowSelection(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>{{ labels().moreFields }}</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 — redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            tnTestIdType=\"button\"\n            [tnTestId]=\"rowExpandTestIds()[rowIdx]\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ labels().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            <!--\n              A plain <th>, so it keeps its implicit `columnheader` role. It used to\n              carry `role=\"checkbox\"` and `tabindex=\"0\"` of its own, with the real\n              checkbox inside it: two tab stops for one action, a widget nested in a\n              widget (axe `nested-interactive`), and a selection column that was no\n              longer a header at all (#236).\n\n              The cell is now only the hit area — the same arrangement card mode has\n              always used, and the same `(change)` + hit-area pair as the row cells\n              below. `onSelectAllHitAreaClick` stands down when the click started\n              inside the checkbox, which activates itself.\n\n              Enter is bound because the removed <th> handled it and a native checkbox\n              does not; Space needs no binding, being the checkbox's own key.\n\n              `disabled` on an empty table is not decoration — see `canSelectAll`.\n            -->\n            <th class=\"tn-table__header-cell tn-table__select-cell\"\n              (click)=\"onSelectAllHitAreaClick($event)\">\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                label=\"Select all rows\"\n                testId=\"all-rows\"\n                [hideLabel]=\"true\"\n                [disabled]=\"!canSelectAll()\"\n                [checked]=\"isAllSelected()\"\n                [indeterminate]=\"isIndeterminate()\"\n                (change)=\"toggleSelectAll()\"\n                (keydown.enter)=\"onSelectAllEnter($event)\" />\n            </th>\n          } @else if (column === '__expand') {\n            <th class=\"tn-table__header-cell tn-table__expand-cell\">\n              <span class=\"cdk-visually-hidden\">{{ labels().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                @if (getColumnDef(column)?.hideLabel()) {\n                  <!--\n                    A deliberately blank header still has to be announced: a <th>\n                    with no text fails axe `empty-table-header`, and the column\n                    goes unnamed for anyone reading the header row (#246). The\n                    hidden span is the same pattern the built-in `__expand` and\n                    row-actions headers use, and it lives here rather than in a\n                    consumer's `tnHeaderCellDef` because `.cdk-visually-hidden`\n                    is defined in this component's own stylesheet — projected\n                    markup carries the host's encapsulation attribute and would\n                    render the label visibly.\n                  -->\n                  <span class=\"cdk-visually-hidden\">\n                    {{ getColumnDef(column)?.label() ?? column }}\n                  </span>\n                } @else {\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                }\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 — 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\">{{ labels().actions }}</span>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <!-- Data Rows -->\n    <tbody class=\"tn-table__body\">\n      <!--\n        No `aria-expanded` here, unlike the card. `row` supports it only inside a\n        `treegrid`; on a plain `table` it is ignored, so the state it appeared to\n        publish reached nobody, while reading as though the work were done (axe\n        `aria-conditional-attr`, #246). The chevron in the `__expand` cell is the\n        control that carries it — a `button`, where the attribute is valid and\n        where a screen-reader user lands by tabbing. `aria-controls` is global\n        rather than role-conditional, so the row keeps pointing at the panel it\n        opens; that is the half of the association a row CAN hold.\n      -->\n      @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n        <tr\n          class=\"tn-table__row\"\n          tnTestIdType=\"row\"\n          [tnTestId]=\"rowTestIds()[rowIdx]\"\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-controls]=\"isRowExpandTrigger(row) && isRowExpanded(row) && detailRowDef()\n            ? detailPanelId(rowIdx)\n            : 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)=\"onRowSelectHitAreaClick($event, row)\">\n                <tn-checkbox\n                  class=\"tn-table__checkbox\"\n                  [label]=\"'Select row ' + (rowIdx + 1)\"\n                  [hideLabel]=\"true\"\n                  [testId]=\"rowSelectTestIds()[rowIdx]\"\n                  [checked]=\"isRowSelected(row)\"\n                  (change)=\"toggleRowSelection(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                    tnTestIdType=\"button\"\n                    [tnTestId]=\"rowExpandTestIds()[rowIdx]\"\n                    [attr.aria-expanded]=\"isRowExpanded(row)\"\n                    [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n                    [attr.aria-label]=\"isRowExpanded(row) ? labels().collapseRow : labels().expandRow\"\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.id]=\"detailPanelId(rowIdx)\"\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:var(--tn-topbar-hover)}.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__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"]
 		}]
 	}],
@@ -27486,6 +27491,8 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	multiSelect = input(false, ...ngDevMode ? [{ debugName: "multiSelect" }] : /* istanbul ignore next */ []);
 	createActions = input([], ...ngDevMode ? [{ debugName: "createActions" }] : /* istanbul ignore next */ []);
 	allowManualInput = input(true, ...ngDevMode ? [{ debugName: "allowManualInput" }] : /* istanbul ignore next */ []);
+	allowFreeText = input(false, ...ngDevMode ? [{ debugName: "allowFreeText" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	openOnClick = input(false, ...ngDevMode ? [{ debugName: "openOnClick" }] : /* istanbul ignore next */ []);
 	placeholder = input("Select file or folder", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
@@ -27496,6 +27503,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	fileExtensions = input(void 0, ...ngDevMode ? [{ debugName: "fileExtensions" }] : /* istanbul ignore next */ []);
 	callbacks = input(void 0, ...ngDevMode ? [{ debugName: "callbacks" }] : /* istanbul ignore next */ []);
 	selectionChange = output();
+	itemSelectionChange = output();
 	pathChange = output();
 	createAction = output();
 	error = output();
@@ -27512,6 +27520,8 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	hasError = signal(false, ...ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	fieldAria = injectTnFormFieldAria(this.ariaLabel);
+	listedItems = /* @__PURE__ */ new Map();
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	resolvedTestId = controlTestId(this.testId);
 	toggleTestId = computed(() => {
@@ -27556,6 +27566,11 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 	}
 	onPathCommit(event) {
 		const target = event.target;
+		if (this.allowManualInput() && this.allowFreeText()) {
+			this.commitFreeText(target.value);
+			this.onTouched();
+			return;
+		}
 		const path = this.fromValueSpace(target.value);
 		if (this.allowManualInput()) {
 			if (!path) {
@@ -27579,6 +27594,18 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		}
 		this.onTouched();
 	}
+	commitFreeText(text) {
+		let value;
+		if (this.multiSelect()) value = text.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+		else value = text.trim() ? text : "";
+		const entries = Array.isArray(value) ? value : value ? [value] : [];
+		this.hasError.set(false);
+		this.selectedItems.set(entries.map((entry) => this.fromValueSpace(entry.trim())));
+		this.selectedPath.set(entries.join(", "));
+		this.onChange(value);
+		this.emitSelection(value);
+		this.close();
+	}
 	onInputClick() {
 		if (this.openOnClick() && !this.selectedPath()) this.openFilePicker();
 	}
@@ -27631,12 +27658,12 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 			const values = selected.map((path) => this.toValueSpace(path));
 			this.selectedPath.set(values.join(", "));
 			this.onChange(values);
-			this.selectionChange.emit(values);
+			this.emitSelection(values);
 		} else {
 			const value = this.toValueSpace(selected[0]);
 			this.selectedPath.set(value);
 			this.onChange(value);
-			this.selectionChange.emit(value);
+			this.emitSelection(value);
 		}
 		this.close();
 	}
@@ -27672,13 +27699,15 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		this.selectedItems.set([]);
 		this.selectedPath.set("");
 		this.onChange(this.multiSelect() ? [] : "");
-		this.selectionChange.emit(this.multiSelect() ? [] : "");
+		this.emitSelection(this.multiSelect() ? [] : "");
 	}
 	async loadDirectory(path) {
 		const directoryChanged = path !== this.currentPath();
 		const cb = this.callbacks();
 		if (!cb?.getChildren) {
-			this.fileItems.set(this.getMockFileItems(path));
+			const mockItems = this.getMockFileItems(path);
+			this.indexListedItems(mockItems);
+			this.fileItems.set(mockItems);
 			this.currentPath.set(path);
 			this.clearStalePendingSelection(directoryChanged);
 			this.pathChange.emit(path);
@@ -27686,8 +27715,9 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		}
 		this.loading.set(true);
 		try {
-			const items = await cb.getChildren(path);
-			this.fileItems.set(items || []);
+			const items = await cb.getChildren(path) || [];
+			this.indexListedItems(items);
+			this.fileItems.set(items);
 			this.currentPath.set(path);
 			this.clearStalePendingSelection(directoryChanged);
 			this.pathChange.emit(path);
@@ -27738,7 +27768,18 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 			this.selectedItems.set([path]);
 			this.onChange(value);
 		}
-		this.selectionChange.emit(this.multiSelect() ? [value] : value);
+		this.emitSelection(this.multiSelect() ? [value] : value);
+	}
+	emitSelection(value) {
+		this.selectionChange.emit(value);
+		const entries = Array.isArray(value) ? value : value ? [value] : [];
+		this.itemSelectionChange.emit({
+			value,
+			items: entries.map((entry) => this.listedItems.get(this.fromValueSpace(entry.trim())) ?? null)
+		});
+	}
+	indexListedItems(items) {
+		for (const item of items) this.listedItems.set(item.path, item);
 	}
 	normalizedValueRoot = computed(() => {
 		const valueRoot = this.valueRoot();
@@ -27858,6 +27899,20 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			allowFreeText: {
+				classPropertyName: "allowFreeText",
+				publicName: "allowFreeText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			openOnClick: {
 				classPropertyName: "openOnClick",
 				publicName: "openOnClick",
@@ -27924,6 +27979,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 		},
 		outputs: {
 			selectionChange: "selectionChange",
+			itemSelectionChange: "itemSelectionChange",
 			pathChange: "pathChange",
 			createAction: "createAction",
 			error: "error"
@@ -27952,7 +28008,7 @@ var TnFilePickerComponent = class TnFilePickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
+		template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
 		styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{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 ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{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: [
 			{
@@ -28051,7 +28107,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.error]": "hasError()",
 				"(keydown)": "onHostKeydown($event)"
 			},
-			template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
+			template: "<div class=\"tn-file-picker-container\" tnTestIdType=\"file-picker\" [tnTestId]=\"resolvedTestId()\">\n  <div #wrapper ixInput class=\"tn-file-picker-wrapper\" style=\"padding-right: 40px;\">\n    <input\n      type=\"text\"\n      class=\"tn-file-picker-input\"\n      tnTestIdType=\"input\"\n      [tnTestId]=\"resolvedTestId()\"\n      [class.error]=\"hasError()\"\n      [value]=\"selectedPath()\"\n      [placeholder]=\"placeholder()\"\n      [readonly]=\"!allowManualInput()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"fieldAria.labelledby()\"\n      [attr.aria-describedby]=\"fieldAria.describedby()\"\n      [attr.aria-invalid]=\"fieldAria.invalid()\"\n      [attr.aria-required]=\"fieldAria.required()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onInputClick()\"\n      (change)=\"onPathCommit($event)\">\n\n    <button\n      type=\"button\"\n      class=\"tn-file-picker-toggle\"\n      aria-label=\"Open file picker\"\n      tnTestIdType=\"button\"\n      [tnTestId]=\"toggleTestId()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\">\n      <tn-icon name=\"folder\" library=\"mdi\" />\n    </button>\n  </div>\n  \n  <ng-template #filePickerTemplate>\n    <tn-file-picker-popup\n      class=\"tn-file-picker-popup\"\n      tnTestIdType=\"file-picker-popup\"\n      [tnTestId]=\"resolvedTestId()\"\n      [testIdBase]=\"resolvedTestId()\"\n      [mode]=\"mode()\"\n      [multiSelect]=\"multiSelect()\"\n      [createActions]=\"createActions()\"\n      [currentPath]=\"currentPath()\"\n      [rootPath]=\"effectiveRootPath()\"\n      [fileItems]=\"fileItems()\"\n      [selectedItems]=\"selectedItems()\"\n      [loading]=\"loading()\"\n      [fileExtensions]=\"fileExtensions()\"\n      (itemClick)=\"onItemClick($event)\"\n      (itemDoubleClick)=\"onItemDoubleClick($event)\"\n      (pathNavigate)=\"navigateToPath($event)\"\n      (createAction)=\"createAction.emit($event)\"\n      (created)=\"onCreated($event)\"\n      (clearSelection)=\"onClearSelection()\"\n      (submit)=\"onSubmit()\"\n      (cancel)=\"onCancel()\"\n      (close)=\"close()\" />\n  </ng-template>\n</div>",
 			styles: [":host{display:block;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-file-picker-container{position:relative;display:flex;align-items:center;width:100%}.tn-file-picker-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-file-picker-input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;outline:none;box-sizing:border-box;font-family:inherit}.tn-file-picker-input::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-file-picker-input:focus{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-file-picker-input:disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-file-picker-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.tn-file-picker-input.error:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}.tn-file-picker-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;color:var(--tn-fg1);border-radius:4px}.tn-file-picker-toggle:hover{background:var(--tn-bg2, #f0f0f0)}.tn-file-picker-toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-file-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-file-picker-toggle tn-icon{font-size:var(--tn-icon-md, 20px)}:host:focus-within .tn-file-picker-input{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}:host.error .tn-file-picker-input{border-color:var(--tn-error, var(--tn-red, #bd2626))}:host.error .tn-file-picker-input:focus{border-color:var(--tn-error, var(--tn-red, #bd2626));box-shadow:0 0 0 2px #dc354540}@media(prefers-reduced-motion:reduce){.tn-file-picker-input,.tn-file-picker-toggle,.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){.tn-file-picker-input{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 ::ng-deep .tn-file-picker-overlay .tn-file-picker-dialog{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"]
 		}]
 	}],
@@ -28088,6 +28144,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		allowFreeText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowFreeText",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
 		openOnClick: [{
 			type: i0.Input,
 			args: [{
@@ -28164,6 +28236,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["selectionChange"]
 		}],
+		itemSelectionChange: [{
+			type: i0.Output,
+			args: ["itemSelectionChange"]
+		}],
 		pathChange: [{
 			type: i0.Output,
 			args: ["pathChange"]
@@ -28199,9 +28275,10 @@ var TnFilePickerHarness = class TnFilePickerHarness extends ComponentHarness {
 		return await (await this._input()).getProperty("value") ?? "";
 	}
 	async setValue(value) {
+		const text = Array.isArray(value) ? value.join(", ") : value;
 		const input = await this._input();
 		await input.clear();
-		if (value) await input.sendKeys(value);
+		if (text) await input.sendKeys(text);
 		return input.dispatchEvent("change");
 	}
 	async getPlaceholder() {