@truenas/ui-components 0.7.3 → 0.7.5

package/fesm2022/truenas-ui-components.mjs

@@ -1,9 +1,12 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, isSignal, isDevMode, effect, signal, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, Directive, ViewContainerRef, output, viewChild, untracked, forwardRef, DestroyRef, NgZone, afterNextRender, model, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, viewChildren, ChangeDetectorRef, afterEveryRender, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, computed, isSignal, isDevMode, effect, signal, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, Directive, DestroyRef, untracked, ViewContainerRef, output, viewChild, forwardRef, NgZone, afterNextRender, model, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, viewChildren, ChangeDetectorRef, afterEveryRender, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, of, timer, firstValueFrom, merge, BehaviorSubject, animationFrameScheduler, asapScheduler, take as take$1 } from 'rxjs';
+import { take, defaultIfEmpty, filter, debounce, distinctUntilChanged, tap, switchMap, map, catchError, debounceTime, auditTime } from 'rxjs/operators';
 import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, AriaDescriber, FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
@@ -13,20 +16,17 @@ import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew,
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, merge, BehaviorSubject, animationFrameScheduler, asapScheduler, take, Subject } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { ScrollDispatcher, ViewportRuler, CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode, CdkTreeNodeOutlet, FlatTreeControl, NestedTreeControl, CdkTreeNodeOutletContext } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import { map, filter, debounceTime, distinctUntilChanged, auditTime } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 
 /** DI token under which `tn-form-field` exposes its {@link TnFormFieldContext}. */
@@ -652,6 +652,354 @@ function injectTnLabels(token) {
     return isSignal(provided) ? provided : signal(provided).asReadonly();
 }
 
+/**
+ * The stateful half of a server-driven dropdown: debounce, cancellation,
+ * paging, exhaustion, and error recovery, so a host component only has to
+ * render {@link TnOptionsDataSource.options} and forward its own events.
+ *
+ * Must be called in an injection context — it ties its subscription to the
+ * caller's {@link DestroyRef}.
+ *
+ * Notable behaviours, each of which was a bug in a hand-rolled copy of this:
+ *
+ * - **Errors never kill the stream.** `catchError` sits inside the `switchMap`,
+ *   so a failed request reports and yields an empty page while the outer
+ *   subscription survives; without that, one transient failure freezes the
+ *   field for the life of the panel.
+ * - **A failed term is retryable.** `distinctUntilChanged` treats a repeat of a
+ *   failed query as a change, so reopening a picker after an error refetches
+ *   instead of being suppressed as a duplicate.
+ * - **A failed page does not advance the cursor**, so the next scroll re-requests
+ *   the page that errored rather than stepping over those rows. The cursor
+ *   tracks the *next* page to ask for rather than the last one loaded, so page 0
+ *   rolls back like every other page instead of being silently skipped.
+ * - **A late page cannot contaminate a newer search.** Every response carries
+ *   the generation it was requested in and is dropped if a search — or a
+ *   {@link TnOptionsDataSource.refresh} — has since started. Cancellation is
+ *   not enough on its own: `refresh` invalidates without issuing a request, so
+ *   there is nothing for `switchMap` to unsubscribe the old one in favour of.
+ */
+function createTnOptionsDataSource(config) {
+    const destroyRef = inject(DestroyRef);
+    const options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    const loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    const exhausted = signal(false, ...(ngDevMode ? [{ debugName: "exhausted" }] : []));
+    /** Current query, replayed by `loadMore` so a page matches what is on screen. */
+    let query = '';
+    /**
+     * Latest term handed to {@link search}, whether or not its request has been
+     * dispatched yet — what {@link prime} re-asks with.
+     *
+     * `query` is only assigned once a request survives the debounce, so it lags
+     * the field by up to `debounceMs`. That gap matters because `prime` emits
+     * `immediate: true`: a prime landing inside a pending search's debounce
+     * window cancels that search outright, and priming with `query` would then
+     * fetch the *previous* term while the input holds the newer one — rows that
+     * do not match what is typed, with nothing left to re-query them. Priming
+     * with the pending term promotes the cancelled search instead of losing it.
+     */
+    let pendingQuery = '';
+    /**
+     * Index of the next page to request for `query`.
+     *
+     * Deliberately "next to request" rather than "last loaded": those two only
+     * differ on page 0, which is exactly where the difference bites. A fresh
+     * search resets the cursor *before* anything has landed, so a "last loaded"
+     * counter reads 0 both for "page 0 is on screen" and for "page 0 failed" —
+     * and the next `loadMore` would step over the first page of matches instead
+     * of retrying it.
+     */
+    let nextPage = 0;
+    /** Whether a query has run successfully — gates {@link prime}. */
+    let primed = false;
+    /**
+     * Whether the host has ever asked for a first page, i.e. whether its panel
+     * has been opened. Set by `prime` even on the calls it declines to issue,
+     * which is what tells the late-source effect below that a page is owed.
+     */
+    let primeRequested = false;
+    /**
+     * Set when a request fails, cleared when the next one starts. Read by the
+     * `distinctUntilChanged` comparator so the same term can be retried.
+     */
+    let lastRequestFailed = false;
+    /**
+     * Bumped by every fresh search. A `loadMore` response from an older
+     * generation is discarded rather than appended to a different result set.
+     */
+    let generation = 0;
+    /**
+     * Set by `refresh`, cleared when the request it queued starts. Read by the
+     * `distinctUntilChanged` comparator, the same way `lastRequestFailed` is: a
+     * refresh re-asks the term already on screen, which is exactly the shape that
+     * comparator exists to suppress.
+     */
+    let refreshRequested = false;
+    /**
+     * Whether a page-0 request is outstanding — i.e. whether the search pipeline
+     * owns {@link loading} right now.
+     *
+     * Read by {@link TnOptionsDataSource.loadMore}'s stale-generation branches.
+     * Those bail without touching the flag on the premise that a newer request
+     * owns it, which is true when the generation was bumped by the `tap` below
+     * (it sets `loading` in the same block) and false when `refresh` bumped it
+     * without issuing anything: blur a panel with a page in flight, refresh it,
+     * and `loading` would stay `true` for good — with `loadMore` a no-op behind
+     * it — until the next open happened to prime.
+     */
+    let searchInFlight = false;
+    /**
+     * How many `loadMore` pages are outstanding.
+     *
+     * The companion to {@link searchInFlight}: that one tracks only the search
+     * pipeline, so a page retired by an OLDER generation could release `loading`
+     * out from under a newer `loadMore` that had genuinely set it — issue page A,
+     * type (its search settles and clears the flag), scroll for page B, then let
+     * A finally arrive, and the spinner vanished for the rest of B's round trip.
+     */
+    let loadMoreInFlight = 0;
+    const requests$ = new Subject();
+    /**
+     * One page from `fetch`, normalized to exactly one emission.
+     *
+     * Every latch in here — `loading`, `searchInFlight`, `loadMoreInFlight`,
+     * `onSettled` — is released from the `next` handler, so a source that
+     * completes without emitting released none of them: `loading` stuck true, and
+     * `loadMore` bails on `loading()`, so paging was dead for the rest of the
+     * session. `defaultIfEmpty` makes an empty completion an empty page, which is
+     * what it means. `take(1)` is the other half: a source that emits more than
+     * once would otherwise append the same page twice through `loadMore` and
+     * decrement `loadMoreInFlight` below zero.
+     */
+    function fetchPage(fetch, term, page) {
+        return fetch(term, page).pipe(take(1), defaultIfEmpty([]));
+    }
+    requests$
+        .pipe(
+    // A request made with no source bound is not a request. Every latch
+    // below — `primed`, the cursor, `onSettled` — describes a round trip,
+    // and answering this with an empty success made all three fire for one
+    // that never happened: a `[dataSource]` that arrives after the user has
+    // typed once found `primed` already latched and never fetched at all,
+    // and a host with no source at all had its paging latch released on a
+    // timer, which is enough to page the same rows twice from one scroll.
+    //
+    // Dropped ahead of the duplicate-term guard on purpose: that operator
+    // remembers whatever passes THROUGH it, so a term filtered out later
+    // would still become the "previous" one and suppress the identical term
+    // once a source finally is bound.
+    filter(() => !!config.source()), 
+    // `prime` must not sit behind the typing debounce — an empty first page
+    // should be on screen as the panel opens, not a quarter-second later.
+    debounce((request) => (request.immediate ? of(0) : timer(config.debounceMs()))), distinctUntilChanged((previous, current) => previous.query === current.query
+        && !lastRequestFailed
+        && !refreshRequested), tap((request) => {
+        query = request.query;
+        nextPage = 0;
+        lastRequestFailed = false;
+        refreshRequested = false;
+        generation++;
+        searchInFlight = true;
+        loading.set(true);
+    }), switchMap((request) => {
+        // Stamped with the generation it was asked for in, the way `loadMore`
+        // stamps its pages: `refresh` retires a request in flight without
+        // pushing anything through this subject, so `switchMap` alone never
+        // cancels it and its rows would otherwise land as if still current.
+        const requestedGeneration = generation;
+        const fetch = config.source();
+        if (!fetch) {
+            // The source went away inside the debounce window, past the filter
+            // above. Tagged rather than answered: `failed` would make the term
+            // look retryable-because-broken, and a plain success would latch the
+            // state of a fetch that never ran.
+            return of({
+                rows: [], failed: false, skipped: true, requestedGeneration,
+            });
+        }
+        return fetchPage(fetch, request.query, 0).pipe(map((rows) => ({
+            rows, failed: false, skipped: false, requestedGeneration,
+        })), catchError((error) => {
+            config.onError(error);
+            return of({
+                rows: [], failed: true, skipped: false, requestedGeneration,
+            });
+        }));
+    }), takeUntilDestroyed(destroyRef))
+        .subscribe(({ rows, failed, skipped, requestedGeneration, }) => {
+        // No other request can be outstanding — a newer one through this subject
+        // would have unsubscribed this response — so the flag is released either
+        // way, stale or not.
+        searchInFlight = false;
+        loading.set(false);
+        if (skipped) {
+            // Nothing was asked, so nothing may be latched. `onSettled` in
+            // particular is the host's paging latch: releasing it here hands a
+            // consumer a second `loadMore` for a page still in flight.
+            return;
+        }
+        if (requestedGeneration !== generation) {
+            // Fetched under a configuration `refresh` has since retired. Latching
+            // `primed` on it would answer the next `prime` from the invalidated
+            // pages for good, which is the exact failure `refresh` exists to
+            // prevent; `lastRequestFailed` is left alone for the same reason.
+            config.onSettled?.();
+            return;
+        }
+        lastRequestFailed = failed;
+        // An empty page from a failure is not evidence that the source is
+        // exhausted — leave paging open so a retry can still reach page 1.
+        exhausted.set(failed ? false : rows.length < config.pageSize());
+        // A failed page 0 leaves the cursor on 0, so the next `loadMore` retries
+        // it; `primed` likewise only latches on a request that arrived.
+        nextPage = failed ? 0 : 1;
+        primed = primed || !failed;
+        options.set(rows);
+        config.onSettled?.();
+    });
+    /**
+     * Issue page 0 for the current term, unless one has already been fetched
+     * successfully or there is no source to fetch from.
+     *
+     * `lastRequestFailed` is what makes a failed term retryable on the `search`
+     * path; without it here, one transient failure would empty a click-to-open
+     * picker for the life of the field — reopening the panel would issue no
+     * request at all.
+     */
+    function primeNow() {
+        if ((primed && !lastRequestFailed) || !config.source()) {
+            return;
+        }
+        // The latest term the field asked for, not `''` and not the last one
+        // dispatched: on the retry path the field may already hold the text whose
+        // lookup failed, and a term still inside the debounce window is cancelled
+        // by this emission — see `pendingQuery`.
+        requests$.next({ query: pendingQuery, immediate: true });
+    }
+    // A source that binds LATE — a resolver, or a sibling field's signal, both
+    // shapes the `| undefined` input type invites — issues nothing by itself:
+    // `source` is only read from inside the request pipeline, and the filter
+    // above dropped whatever was asked while it was undefined. A closed panel
+    // recovers on its next open, which primes. An OPEN one had nothing left to
+    // ask, and sat on "No results found" (or, for the chip input, an empty
+    // attached listbox) until the user typed or closed and reopened it.
+    //
+    // Gated on `primeRequested` so this cannot break the rule that a field
+    // nobody has opened issues no query: the transition only fetches for a host
+    // that already asked and was turned away.
+    //
+    // `untracked` because emitting runs the pipeline synchronously, which reads
+    // `source` and `debounceMs` — tracked here, those would re-run this effect
+    // on every debounce change and on its own writes.
+    //
+    // Latched on the false->true EDGE rather than on every run: this effect
+    // re-runs on any identity change of `source`, and `[dataSource]="(q, p) =>
+    // this.search(q, p)"` — the call site the docs warn against, but one that
+    // type-checks — hands it a new reference on every change detection. Priming
+    // unconditionally then wrote `loading`, which schedules another change
+    // detection, which changes the input again: a cancel-storm of requests for
+    // the whole first round trip, and indefinitely if the endpoint keeps failing.
+    let hadSource = !!untracked(() => config.source());
+    effect(() => {
+        const hasSource = !!config.source();
+        untracked(() => {
+            const bound = hasSource && !hadSource;
+            hadSource = hasSource;
+            if (bound && primeRequested) {
+                primeNow();
+            }
+        });
+    });
+    /**
+     * Release {@link loading} for a page whose result set has been retired,
+     * unless a search or a later `loadMore` is in flight and owns the flag.
+     */
+    function releaseStaleLoading() {
+        if (!searchInFlight && loadMoreInFlight === 0) {
+            loading.set(false);
+        }
+    }
+    return {
+        options: options.asReadonly(),
+        loading: loading.asReadonly(),
+        exhausted: exhausted.asReadonly(),
+        search(next) {
+            pendingQuery = next;
+            requests$.next({ query: next, immediate: false });
+        },
+        prime() {
+            // Recorded before the guards: a prime declined for want of a source is
+            // still the host saying it wants a first page, and the effect above is
+            // what honours it once one arrives.
+            primeRequested = true;
+            primeNow();
+        },
+        loadMore() {
+            const fetch = config.source();
+            if (!fetch || loading() || exhausted()) {
+                return;
+            }
+            const requestedPage = nextPage;
+            const requestedGeneration = generation;
+            loading.set(true);
+            loadMoreInFlight++;
+            fetchPage(fetch, query, requestedPage)
+                .pipe(takeUntilDestroyed(destroyRef))
+                .subscribe({
+                next: (rows) => {
+                    loadMoreInFlight--;
+                    if (requestedGeneration !== generation) {
+                        // This page belongs to a result set that has been retired. A
+                        // fresh SEARCH owns `loading` and will release it; a `refresh`
+                        // issued nothing, so this is the only thing that can.
+                        releaseStaleLoading();
+                        return;
+                    }
+                    loading.set(false);
+                    // Only a page that arrived counts as read — see the error branch.
+                    nextPage = requestedPage + 1;
+                    primed = true;
+                    exhausted.set(rows.length < config.pageSize());
+                    options.update((current) => {
+                        const seen = new Set(current.map(config.identity));
+                        return [...current, ...rows.filter((row) => !seen.has(config.identity(row)))];
+                    });
+                    config.onSettled?.();
+                },
+                error: (error) => {
+                    loadMoreInFlight--;
+                    if (requestedGeneration !== generation) {
+                        releaseStaleLoading();
+                        return;
+                    }
+                    loading.set(false);
+                    // `nextPage` deliberately not advanced: the next scroll re-requests
+                    // this page instead of skipping the rows it would have held.
+                    config.onError(error);
+                    config.onSettled?.();
+                },
+            });
+        },
+        refresh() {
+            primed = false;
+            nextPage = 0;
+            exhausted.set(false);
+            // Any page still in flight was asked for under the old configuration —
+            // bump the generation so it is dropped rather than appended to whatever
+            // the next request produces.
+            generation++;
+            // The refetch re-asks the term already on screen, which is exactly what
+            // the duplicate-term guard suppresses. Left armed until a request
+            // actually starts, so a host that refreshes while closed is still not
+            // suppressed when it primes on its next open.
+            refreshRequested = true;
+            // `options` is deliberately left alone: a panel that is open keeps
+            // showing the previous rows until the replacements land, rather than
+            // blinking empty for a round trip.
+        },
+    };
+}
+
 let nextId$6 = 0;
 /** English defaults used when no `TN_AUTOCOMPLETE_LABELS` provider is registered. */
 const TN_AUTOCOMPLETE_DEFAULT_LABELS = {
@@ -678,6 +1026,12 @@ class TnAutocompleteComponent {
      * to the form control. A written value is resolved back to its option's
      * label for display — falling back to `String(value)` until the matching
      * option is available, and upgraded once an async option load lands.
+     *
+     * With a `[dataSource]` bound these are not listed in the dropdown, which is
+     * the source's, but they still NAME a value: pass the options a host already
+     * holds labels for — the ids on the record being edited — and the field
+     * reads them as names from the moment it renders, rather than as raw numbers
+     * until someone opens it.
      */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /**
@@ -706,9 +1060,71 @@ class TnAutocompleteComponent {
      * exclusive with `requireSelection`, which reverts unmatched text.
      */
     allowCustomValue = input(false, ...(ngDevMode ? [{ debugName: "allowCustomValue" }] : []));
+    /**
+     * Server-driven options: a function of `(query, page)` returning one page of
+     * matches. Binding it hands the component the whole async lifecycle —
+     * debounced search, request cancellation, the paging cursor, exhaustion,
+     * error recovery and the loading state — so a consumer no longer writes a
+     * `searchChange` → subject → `switchMap` → `options` pipeline of its own.
+     *
+     * While set, the source is the only origin of DROPDOWN rows and the
+     * client-side filter is skipped, since the server already filtered — pass an
+     * explicit `[filterFn]` to filter the fetched page on top. `[options]` stays
+     * a source of LABELS, for values the host can already name before the first
+     * page is fetched; see {@link options}.
+     *
+     * The first page is fetched when the panel first opens, not on init, so a
+     * form full of pickers issues no queries until one is actually used. Binding
+     * a source that is `undefined` at that moment is fine — the field fetches as
+     * soon as one arrives, open panel included.
+     *
+     * Swapping one source function for ANOTHER is not a signal to refetch, since
+     * a source is expected to be a stable function reading live configuration.
+     * Call {@link refreshOptions} when that configuration moves.
+     *
+     * @example
+     * ```html
+     * <tn-autocomplete [dataSource]="userOptions" [pageSize]="50" />
+     * ```
+     * ```ts
+     * userOptions: TnOptionsFetchFn<string> =
+     *   (query, page) => this.api.searchUsers(query, page * 50);
+     * ```
+     */
+    dataSource = input(undefined, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    /** Debounce applied to typing before `dataSource` is queried, in ms. */
+    dataSourceDebounce = input(250, ...(ngDevMode ? [{ debugName: "dataSourceDebounce" }] : []));
+    /**
+     * Rows `dataSource` returns per page. Used to detect exhaustion — a short
+     * page is the last one — so scrolling past the end stops querying rather
+     * than issuing requests at a growing offset that can only return nothing.
+     */
+    pageSize = input(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /**
+     * A row pinned above the results that performs an action instead of
+     * selecting a value — "Add New…" and friends. It survives filtering and the
+     * `maxResults` cap, and choosing it emits {@link actionSelected} and closes
+     * the panel **without** touching the form control, so no placeholder
+     * sentinel is ever committed to the value.
+     *
+     * **Must be a stable reference.** The row is recognized by identity, so the
+     * obvious call site — `[actionOption]="{ label: 'Add ' + term, value: null }"`
+     * — builds a new object on every change-detection pass, re-firing the input,
+     * invalidating the filtered rows and marking the component dirty again. Hold
+     * it in a field, or derive it with `computed()`.
+     */
+    actionOption = input(undefined, ...(ngDevMode ? [{ debugName: "actionOption" }] : []));
+    /**
+     * Keep the committed value listed even when the page on screen does not
+     * contain it — a value sorted past the first page, or one just created that
+     * the query does not match yet. Without it such a field renders blank for a
+     * perfectly valid value. Only applies with `dataSource` bound.
+     */
+    keepSelectedOption = input(true, ...(ngDevMode ? [{ debugName: "keepSelectedOption" }] : []));
     /**
      * Show a loading row in the dropdown panel while options are being fetched.
-     * Pair with `searchChange`/`loadMore` for server-driven options.
+     * Pair with `searchChange`/`loadMore` for server-driven options. Redundant
+     * with `dataSource`, which drives this state itself; the two are OR-ed.
      */
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     /** Text shown next to the spinner while `loading` is set. */
@@ -777,12 +1193,30 @@ class TnAutocompleteComponent {
      * lookup is expensive.
      */
     searchChange = output();
+    /**
+     * Emits when {@link actionOption} is chosen. No value is committed and the
+     * panel closes; the consumer runs whatever the row promises (typically
+     * opening a create form) and can then write the new value to the control.
+     */
+    actionSelected = output();
+    /**
+     * Emits once per failed `dataSource` request. The component recovers on its
+     * own — the stream stays alive and the failed term stays retryable — so this
+     * is purely for the app to report the failure the way it reports others.
+     */
+    dataSourceError = output();
     /**
      * Emits when the open dropdown is scrolled near its bottom — append the
      * next page to `options` (and use `loading` while it fetches). Suppressed
-     * until the `options` COUNT changes so a slow consumer is not spammed —
-     * which also means replacing the array with a same-length page (e.g. a
-     * fixed-size window) does not re-arm the emitter; pagination must append.
+     * until the row COUNT changes so a slow consumer is not spammed — which also
+     * means replacing the array with a same-length page (e.g. a fixed-size
+     * window) does not re-arm the emitter; pagination must append.
+     *
+     * With a `[dataSource]` bound the count read is the resolved one (the
+     * fetched pages), and the latch is also released when a request settles, so
+     * a page that FAILED does not leave scrolling dead. The output still fires
+     * either way: it is for a host paging `options` itself, so do not wire both
+     * — the source already pages, and the two together fetch each page twice.
      */
     loadMore = output();
     /**
@@ -808,27 +1242,188 @@ class TnAutocompleteComponent {
     highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
     /** The currently committed value (an option's `value`, or a custom-typed one) */
     selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    /**
+     * Label of the option the value was chosen from, remembered so
+     * `keepSelectedOption` can re-list it with its real text after a search
+     * replaced the page it came from. Null for a programmatic write, whose
+     * label is not known until an option carrying it arrives.
+     */
+    selectedLabel = signal(null, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
     /** CVA disabled state from the form */
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     /** Combined disabled state */
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    /** Filtered and capped options */
+    /** Async engine backing `dataSource`; idle while no source is bound. */
+    asyncOptions = createTnOptionsDataSource({
+        source: this.dataSource,
+        debounceMs: this.dataSourceDebounce,
+        pageSize: this.pageSize,
+        identity: (option) => option.value,
+        onError: (error) => this.dataSourceError.emit(error),
+        // Release the paging latch on every round trip. The count-change re-arm
+        // below cannot do it for a page that FAILED — no rows arrive, so the count
+        // never moves and every later scroll would be suppressed, leaving the
+        // field unable to retry the page it just lost.
+        onSettled: () => {
+            this.loadMorePending = false;
+        },
+    });
+    /**
+     * The synthetic row that keeps a committed value listed while the pages
+     * fetched so far do not contain it, or `undefined`.
+     *
+     * Held separately from {@link resolvedOptions} so {@link filteredOptions} can
+     * recognize it and pin it past the `maxResults` cap, the way the action row
+     * is pinned. Appended and then sliced with everything else, a full page
+     * filled the cap and cut off the one row this exists to guarantee.
+     */
+    keptSelectedOption = computed(() => {
+        if (!this.dataSource() || !this.keepSelectedOption()) {
+            return undefined;
+        }
+        const value = this.selectedValue();
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        if (this.asyncOptions.options().some((option) => this.valueMatches(option.value, value))) {
+            return undefined;
+        }
+        // The committed value is not on the current page — keep it listed so the
+        // field shows its label rather than rendering blank. A host-pinned row can
+        // name it even before the first page lands, which is the whole point of
+        // `options` alongside a source.
+        const pinned = this.pinnedOptions().find((option) => this.valueMatches(option.value, value));
+        return { label: pinned?.label ?? this.selectedLabel() ?? String(value), value };
+    }, ...(ngDevMode ? [{ debugName: "keptSelectedOption" }] : []));
+    /**
+     * Rows the host named itself, honoured even while a `dataSource` is bound.
+     *
+     * With a source the dropdown is the server's to fill — but its first page is
+     * not fetched until the field is focused, so a value the host already holds
+     * the label for renders as its raw `String(value)` until someone opens the
+     * panel. An edit form bound to an id shows the number. `options` is how that
+     * label is supplied, so it stays part of the LOOKUP even where it is not
+     * part of the dropdown. `tn-chip-input` treats its own `options` the same
+     * way, and the asymmetry was a bug rather than a design.
+     *
+     * Reached through {@link resolvableOptions} for display and
+     * {@link matchableOptions} for matching, so `commitCustomValue` and the
+     * `requireSelection` branch of `onBlur` recognise a pinned label too.
+     * Painting from a list wider than the one it reads back is the bug this
+     * shape exists to avoid.
+     */
+    pinnedOptions = computed(() => (this.dataSource() ? this.options() : []), ...(ngDevMode ? [{ debugName: "pinnedOptions" }] : []));
+    /**
+     * The rows to work from: the async engine's when `dataSource` is bound,
+     * the `options` input otherwise. Everything that resolves a value to a
+     * label, matches typed text, or counts rows reads this rather than
+     * `options` — the action row is deliberately absent, since it carries no
+     * selectable value.
+     */
+    resolvedOptions = computed(() => {
+        if (!this.dataSource()) {
+            return this.options();
+        }
+        const fetched = this.asyncOptions.options();
+        const kept = this.keptSelectedOption();
+        return kept ? [...fetched, kept] : fetched;
+    }, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : []));
+    /**
+     * The rows a value may be resolved to a label FROM — the fetched pages plus
+     * the host-pinned {@link pinnedOptions}, and never the synthetic kept row.
+     * {@link matchableOptions} is the other direction.
+     *
+     * That row exists to keep a committed value listed, and its label is the
+     * display text itself: `String(value)` for a value nothing has named yet.
+     * Resolving against it therefore always "succeeds", which would report the
+     * raw fallback as a resolved label and leave it on screen for good.
+     */
+    resolvableOptions = computed(() => {
+        if (!this.dataSource()) {
+            return this.options();
+        }
+        // Fetched rows first: every reader takes the FIRST match, so a value in
+        // both lists resolves to the server's row rather than the host's, which
+        // may be a stale name the record was saved with.
+        const pinned = this.pinnedOptions();
+        const fetched = this.asyncOptions.options();
+        return pinned.length ? [...fetched, ...pinned] : fetched;
+    }, ...(ngDevMode ? [{ debugName: "resolvableOptions" }] : []));
+    /**
+     * The rows typed text may be matched BACK to a value by: every label this
+     * field puts in front of the user, so that anything it PAINTS it also READS.
+     *
+     * {@link resolvableOptions} for the labels a value can be resolved from,
+     * plus the synthetic kept row — which the two lists on either side each drop
+     * for a reason that does not apply here:
+     *
+     * - {@link resolvedOptions} omits the host-pinned rows, since the dropdown
+     *   under a source is the server's to fill. But a pinned row is exactly how a
+     *   host names a value the pages do not carry, so matching without it painted
+     *   `g-7` as `admins` and then committed the raw string `'admins'` over the
+     *   id it names. That is the asymmetry `tn-chip-input` closed by pointing
+     *   `commitText` at its `labelOptions`.
+     * - {@link resolvableOptions} omits the kept row, because resolving a VALUE
+     *   against it always "succeeds" and would report its `String(value)`
+     *   fallback as a real label. Matching a LABEL against it is the opposite
+     *   case: the row is listed, the user can click it, and its label may be one
+     *   remembered from the option the value was picked from. Dropping it would
+     *   turn "type the text you can see, then blur" into a free-text commit of
+     *   that text over the value it stands for.
+     *
+     * Order is the usual precedence — the server's rows, then the host's, then
+     * the synthetic one — and every reader takes the first match.
+     */
+    matchableOptions = computed(() => {
+        const kept = this.keptSelectedOption();
+        return kept ? [...this.resolvableOptions(), kept] : this.resolvableOptions();
+    }, ...(ngDevMode ? [{ debugName: "matchableOptions" }] : []));
+    /** Loading state: the `loading` input OR-ed with the async engine's. */
+    resolvedLoading = computed(() => this.loading() || this.asyncOptions.loading(), ...(ngDevMode ? [{ debugName: "resolvedLoading" }] : []));
+    /** Filtered and capped options, with {@link actionOption} pinned on top. */
     filteredOptions = computed(() => {
         const term = this.searchTerm();
-        const all = this.options();
+        const all = this.resolvedOptions();
         const customFilter = this.filterFn();
         const max = this.maxResults();
-        if (!term) {
-            return all.slice(0, max);
+        const action = this.actionOption();
+        // A server-driven source already applied the query; filtering again on the
+        // label would hide rows matched on some other field, and would drop the
+        // action row the moment the user typed.
+        const isPreFiltered = !!this.dataSource() && !customFilter;
+        let filtered;
+        if (!term || isPreFiltered) {
+            filtered = all;
+        }
+        else if (customFilter) {
+            filtered = all.filter((opt) => customFilter(opt, term));
         }
-        const lowerTerm = term.toLowerCase();
-        const filtered = customFilter
-            ? all.filter((opt) => customFilter(opt, term))
-            : all.filter((opt) => opt.label.toLowerCase().includes(lowerTerm));
-        return filtered.slice(0, max);
+        else {
+            const lowerTerm = term.toLowerCase();
+            filtered = all.filter((opt) => opt.label.toLowerCase().includes(lowerTerm));
+        }
+        // `maxResults` caps the rows the source returned, not the two rows that are
+        // there by construction: the action row is pinned on top after the slice,
+        // and the kept-selected row — always last, appended by `resolvedOptions` —
+        // is held back across it.
+        const kept = this.keptSelectedOption();
+        const capped = kept && filtered.at(-1) === kept
+            ? [...filtered.slice(0, -1).slice(0, max), kept]
+            : filtered.slice(0, max);
+        return action ? [action, ...capped] : capped;
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
-    /** Whether there are any results to show */
+    /** Whether there are any rows to render (the action row counts). */
     hasResults = computed(() => this.filteredOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : []));
+    /**
+     * Whether the query matched anything selectable. Distinct from
+     * {@link hasResults} so a search that found nothing still says so, rather
+     * than being masked by a pinned action row — or by the kept-selected row,
+     * which is held on screen for the committed value regardless of the query.
+     */
+    hasMatches = computed(() => {
+        const kept = this.keptSelectedOption();
+        return this.filteredOptions().some((option) => !this.isActionOption(option) && option !== kept);
+    }, ...(ngDevMode ? [{ debugName: "hasMatches" }] : []));
     onChange = (_value) => { };
     onTouched = () => { };
     /** Live overlay holding the dropdown panel, or undefined when closed. */
@@ -843,29 +1438,63 @@ class TnAutocompleteComponent {
     lastOptionsCount = null;
     /** Scroll distance (px) from the panel bottom that triggers `loadMore`. */
     static loadMoreThresholdPx = 48;
+    /**
+     * Cap on how many pages the underfill check may request without the user
+     * scrolling, per search. The check re-arms whenever the option count
+     * changes, which a `dataSource` answering synchronously does within the same
+     * change-detection pass — so an inexhaustible source would spin the tab
+     * rather than yield between rounds. Well beyond any real panel's capacity
+     * (20 × a 50-row page), so it only ever trips on a misbehaving source.
+     */
+    static maxAutoFillPages = 20;
+    /** Underfill-driven pages requested since the last search or panel open. */
+    autoFillCount = 0;
     /** Guards the object-without-compareWith warning so it fires only once. */
     warnedAboutObjectCompare = false;
+    /**
+     * Whether the text on screen is the raw `String(value)` fallback rather than
+     * an option's label — i.e. the value has never resolved and the user has not
+     * typed over it.
+     *
+     * The upgrade effect otherwise leaves an open panel alone, on the grounds
+     * that the text belongs to the user's search. With a `dataSource` that never
+     * holds: rows only ever arrive while the panel is open, so a written value
+     * would keep the fallback as its display text for good — and
+     * `allowCustomValue` would then commit that text back over the real value on
+     * blur. This says the text is nobody's draft, so upgrading it is safe.
+     */
+    displayIsFallback = false;
     constructor() {
         // A value written before its option loaded displays as the raw fallback —
         // once options arrive (or are relabeled, e.g. a locale change), upgrade
         // the text to the option's label. UPGRADE-ONLY: when no option matches
         // (e.g. a server-search picker replaced `options` after a selection), the
         // current text is left alone rather than downgraded back to the raw
-        // value. Skipped while the panel is open so active typing isn't clobbered.
+        // value. While the panel is open the text is the user's search and is left
+        // alone — unless it is still the untouched fallback, which is the only
+        // state a `dataSource` field's rows can ever reach it in.
+        // `isOpen` is a dependency rather than an `untracked` read so that closing
+        // the panel re-runs the resolution over whatever the search left behind.
         effect(() => {
-            this.options();
+            // Track the list this resolves FROM. `resolvedOptions` is not the same
+            // list: with `[keepSelectedOption]="false"` its kept-row branch returns
+            // before reading `pinnedOptions`, so `options` would not be a dependency
+            // and a late-arriving host label would never upgrade the raw fallback.
+            this.resolvableOptions();
             this.compareWith();
+            this.isOpen();
             untracked(() => {
-                if (this.isOpen()) {
+                if (this.isOpen() && !this.displayIsFallback) {
                     return;
                 }
                 const value = this.selectedValue();
                 if (value === null || value === undefined) {
                     return;
                 }
-                const match = this.options().find((opt) => this.valueMatches(opt.value, value));
+                const match = this.resolvableOptions().find((opt) => this.valueMatches(opt.value, value));
                 if (match) {
                     this.searchTerm.set(match.label);
+                    this.displayIsFallback = false;
                 }
             });
         });
@@ -881,9 +1510,9 @@ class TnAutocompleteComponent {
         // underfill check would be skipped (checkUnderfill bails while loading)
         // and never re-run.
         effect(() => {
-            const count = this.options().length;
+            const count = this.resolvedOptions().length;
             this.isOpen();
-            this.loading();
+            this.resolvedLoading();
             untracked(() => {
                 if (count !== this.lastOptionsCount) {
                     this.lastOptionsCount = count;
@@ -896,7 +1525,7 @@ class TnAutocompleteComponent {
         // event; nudge CDK so the anchored position tracks the new height.
         effect(() => {
             this.filteredOptions();
-            this.loading();
+            this.resolvedLoading();
             this.overlayRef?.updatePosition();
         });
         if (isDevMode()) {
@@ -915,12 +1544,11 @@ class TnAutocompleteComponent {
     // ── ControlValueAccessor ──
     writeValue(value) {
         this.selectedValue.set(value);
-        if (value !== null && value !== undefined) {
-            this.searchTerm.set(this.displayValue(value));
-        }
-        else {
-            this.searchTerm.set('');
-        }
+        // A programmatic write says nothing about the option's label — drop the
+        // remembered one so `keepSelectedOption` doesn't relabel the new value
+        // with the previous selection's text.
+        this.selectedLabel.set(null);
+        this.setDisplayFromValue(value);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -931,12 +1559,68 @@ class TnAutocompleteComponent {
     setDisabledState(isDisabled) {
         this.formDisabled.set(isDisabled);
     }
+    // ── Async options ──
+    /**
+     * Discard the pages fetched from `dataSource` and re-query the current term.
+     *
+     * For a caller whose `[dataSource]` is a fixed function reading live
+     * configuration — the shape that keeps the source from being swapped out
+     * from under a search in flight — this is how a change to that configuration
+     * takes effect, rather than waiting for the next keystroke to notice.
+     */
+    refreshOptions() {
+        // Both latches belong to the result set being thrown away; left set, they
+        // would suppress the first `loadMore` of the one replacing it.
+        this.loadMorePending = false;
+        this.autoFillCount = 0;
+        this.asyncOptions.refresh();
+        if (this.isOpen()) {
+            // Rows are on screen and clickable right now, so they have to be
+            // replaced at once. A closed panel refetches when it next opens — the
+            // `prime` there is no longer answered from the invalidated pages.
+            this.asyncOptions.prime();
+        }
+    }
+    /**
+     * Commit an option programmatically, its label included.
+     *
+     * `writeValue` deliberately forgets the label — the forms layer hands over a
+     * value and nothing else — so a value the host picked itself would render as
+     * `String(value)` until a search happened to return the row carrying it.
+     * This is the path for a caller that already holds the option: the
+     * `actionOption` handoff, where `(actionSelected)` creates an entity and the
+     * host hands the new row straight back.
+     *
+     * It COMMITS, form control included. Updating only the display left the
+     * field showing the new label, marking that row selected, and the bound
+     * control still holding the previous value — which is what a submit then
+     * sent. (With `requireSelection` and `keepSelectedOption` together, blur
+     * happened to find the label on the synthetic kept row and reconcile it
+     * through `selectOption`; on the default path nothing ever did.)
+     *
+     * `optionSelected` deliberately does NOT fire: that output means the user
+     * picked a row, and this is the host telling the component what the host
+     * already decided — echoing it back to the caller that made the call would
+     * be noise. A host keeping a side model in sync updates it where it calls
+     * this, not from the output.
+     */
+    setSelectedOption(option) {
+        this.selectedValue.set(option.value);
+        this.selectedLabel.set(option.label);
+        this.searchTerm.set(option.label);
+        this.displayIsFallback = false;
+        this.onChange(option.value);
+    }
     // ── Event handlers ──
     onInput(event) {
         const value = event.target.value;
         this.searchTerm.set(value);
+        // The text is the user's now, whatever it was before this keystroke.
+        this.displayIsFallback = false;
         // A new term is a new pagination context — don't hold back its first page.
         this.loadMorePending = false;
+        this.autoFillCount = 0;
+        this.asyncOptions.search(value);
         this.searchChange.emit(value);
         if (!this.isOpen()) {
             this.open();
@@ -964,18 +1648,20 @@ class TnAutocompleteComponent {
         }
         if (this.requireSelection()) {
             const term = this.searchTerm();
-            const match = this.options().find((opt) => !opt.disabled && opt.label.toLowerCase() === term.toLowerCase());
+            // {@link matchableOptions}, not {@link resolvedOptions}: the labels the
+            // field is willing to PAINT are the ones it has to read back. Matching
+            // the narrower list left a host-pinned label unrecognised, so typing the
+            // exact name the field itself displays reverted the term instead of
+            // resolving it.
+            const match = this.matchableOptions().find((opt) => !opt.disabled && opt.label.toLowerCase() === term.toLowerCase());
             if (match) {
                 this.selectOption(match);
             }
             else {
                 // Revert to last valid selection or clear
                 const current = this.selectedValue();
-                if (current !== null && current !== undefined) {
-                    this.searchTerm.set(this.displayValue(current));
-                }
-                else {
-                    this.searchTerm.set('');
+                this.revertDisplayToValue(current);
+                if (current === null || current === undefined) {
                     this.onChange(null);
                 }
             }
@@ -987,8 +1673,27 @@ class TnAutocompleteComponent {
         if (option.disabled) {
             return;
         }
+        if (this.isActionOption(option)) {
+            this.runAction();
+            return;
+        }
         this.selectOption(option);
     }
+    /** Whether `option` is the pinned {@link actionOption} row rather than a value. */
+    isActionOption(option) {
+        return option === this.actionOption();
+    }
+    /**
+     * The action row was chosen: close the panel and hand off, leaving the
+     * committed value and the text exactly as they were. Restoring the text
+     * matters because the user has usually typed a partial term to find the
+     * row — that draft must not survive as a value.
+     */
+    runAction() {
+        this.revertDisplayToValue(this.selectedValue());
+        this.close();
+        this.actionSelected.emit();
+    }
     onKeydown(event) {
         const options = this.filteredOptions();
         switch (event.key) {
@@ -1019,7 +1724,7 @@ class TnAutocompleteComponent {
                 event.preventDefault();
                 const idx = this.highlightedIndex();
                 if (this.isOpen() && idx >= 0 && idx < options.length && !options[idx].disabled) {
-                    this.selectOption(options[idx]);
+                    this.onOptionClick(options[idx]);
                 }
                 else if (this.allowCustomValue()) {
                     this.commitCustomValue();
@@ -1032,8 +1737,7 @@ class TnAutocompleteComponent {
                 if (this.allowCustomValue()) {
                     // Escape means "cancel the draft": revert to the committed value's
                     // text so the upcoming blur doesn't commit the abandoned term.
-                    const current = this.selectedValue();
-                    this.searchTerm.set(current !== null && current !== undefined ? this.displayValue(current) : '');
+                    this.revertDisplayToValue(this.selectedValue());
                 }
                 this.close();
                 break;
@@ -1047,7 +1751,10 @@ class TnAutocompleteComponent {
      * opens), emit once more if the panel has no scrollbar.
      */
     checkUnderfill() {
-        if (!this.isOpen() || this.loading() || this.loadMorePending) {
+        if (!this.isOpen() || this.resolvedLoading() || this.loadMorePending) {
+            return;
+        }
+        if (this.autoFillCount >= TnAutocompleteComponent.maxAutoFillPages) {
             return;
         }
         // No rows to measure, or rendering is capped by maxResults — more data
@@ -1067,22 +1774,31 @@ class TnAutocompleteComponent {
         const panel = this.overlayRef?.overlayElement
             ?.querySelector('.tn-autocomplete__listbox');
         if (panel && panel.scrollHeight <= panel.clientHeight) {
-            this.loadMorePending = true;
-            this.loadMore.emit();
+            this.autoFillCount++;
+            this.requestMore();
         }
     }
+    /**
+     * Ask for another page: the internal engine when `dataSource` is bound, the
+     * consumer via `loadMore` otherwise. Both are notified — an app can page a
+     * `dataSource` and still observe the event.
+     */
+    requestMore() {
+        this.loadMorePending = true;
+        this.asyncOptions.loadMore();
+        this.loadMore.emit();
+    }
     onPanelScroll(event) {
         // While loading, the rendered rows belong to the previous page/term —
         // scrolling them must not request a page of data that hasn't landed yet.
-        if (this.loadMorePending || this.loading()) {
+        if (this.loadMorePending || this.resolvedLoading()) {
             return;
         }
         const el = event.target;
         const nearBottom = el.scrollTop + el.clientHeight
             >= el.scrollHeight - TnAutocompleteComponent.loadMoreThresholdPx;
         if (nearBottom) {
-            this.loadMorePending = true;
-            this.loadMore.emit();
+            this.requestMore();
         }
     }
     /**
@@ -1155,32 +1871,85 @@ class TnAutocompleteComponent {
      * display match (case-insensitive, same as the requireSelection path)
      * commits the matching option instead, so picking an existing entry by
      * typing its full text behaves like clicking it.
+     *
+     * Matched against {@link matchableOptions} so the host-pinned rows count:
+     * with `[dataSource]` + `[options]` the field painted `g-7` as `admins` and
+     * then, on a page that did not carry that row, committed the raw string
+     * `'admins'` over the id it names — a label it would not read back. Same
+     * asymmetry `tn-chip-input` closed by pointing `commitText` at its
+     * `labelOptions`.
      */
     commitCustomValue() {
         const term = this.searchTerm();
         const lowerTerm = term.toLowerCase();
-        const match = this.options().find((opt) => !opt.disabled && opt.label.toLowerCase() === lowerTerm);
+        const match = this.matchableOptions().find((opt) => !opt.disabled && opt.label.toLowerCase() === lowerTerm);
         if (match) {
             this.selectOption(match);
             return;
         }
         // Best-effort guard: silent when options haven't loaded yet (the common
         // async + allowCustomValue case), where the value type can't be known.
-        if (isDevMode() && term !== '' && this.options().some((opt) => typeof opt.value !== 'string')) {
+        if (isDevMode() && term !== '' && this.matchableOptions().some((opt) => typeof opt.value !== 'string')) {
             console.warn('[tn-autocomplete] allowCustomValue committed free text into a control whose option '
                 + 'values are not strings — custom values are only sound for string-valued autocompletes.');
         }
         const value = term === '' ? null : term;
         this.selectedValue.set(value);
+        // The remembered label belongs to the option that WAS selected; a custom
+        // value came from no option, so keeping it would let `setDisplayFromValue`
+        // repaint the old name over the user's text — and the next blur would read
+        // that name back and commit the option it belongs to. `writeValue` clears
+        // it for the same reason.
+        this.selectedLabel.set(null);
         this.onChange(value);
     }
     /**
-     * Resolves a committed value back to its option's display label, falling
-     * back to the raw value's string until the matching option is available.
+     * Show `value`'s label and record whether that text is a real label or the
+     * raw `String(value)` fallback, so {@link displayIsFallback} — and with it
+     * the upgrade effect — can tell a resolved display from an unresolved one.
+     * Every path that re-derives the text from the committed value goes through
+     * here, so the two can never disagree.
+     *
+     * A label remembered from the option the value was picked from counts as
+     * resolved: it is the same text the option would give, and the row carrying
+     * it may well have been paged away since.
      */
-    displayValue(value) {
-        const match = this.options().find((opt) => this.valueMatches(opt.value, value));
-        return match ? match.label : String(value);
+    setDisplayFromValue(value) {
+        if (value === null || value === undefined) {
+            this.searchTerm.set('');
+            this.displayIsFallback = false;
+            return;
+        }
+        const match = this.resolvableOptions().find((opt) => this.valueMatches(opt.value, value));
+        const remembered = this.selectedLabel();
+        this.searchTerm.set(match?.label ?? remembered ?? String(value));
+        this.displayIsFallback = !match && remembered === null;
+    }
+    /**
+     * Abandon the draft term: repaint `value`'s label AND tell the async engine
+     * the term is gone.
+     *
+     * `asyncOptions.search()` is otherwise only reached from `onInput`, so every
+     * path that rewrites the text WITHOUT the user typing — the `requireSelection`
+     * revert on blur, the `allowCustomValue` Escape branch, and `runAction` —
+     * moved the display while the engine kept the query, the rows and the
+     * `primed` latch of the term walked away from. Reopening then showed that
+     * term's results (or "No results found") against a field displaying something
+     * else, and issued nothing to correct it: `open()` only calls `prime()`,
+     * which is a documented no-op once primed.
+     *
+     * `tn-chip-input.clearInput()` closes the same gap the same way. The request
+     * goes through the usual debounce, and the duplicate-term guard drops it
+     * entirely when the reverted text is the term already loaded — which is the
+     * common case of an Escape with no draft typed.
+     *
+     * `writeValue` deliberately does NOT come through here: a programmatic write
+     * is not a user abandoning a search, and querying there would break the rule
+     * that a field nobody has opened issues no request.
+     */
+    revertDisplayToValue(value) {
+        this.setDisplayFromValue(value);
+        this.asyncOptions.search(this.searchTerm());
     }
     /**
      * Compares option values, honoring `compareWith` when provided. Without one,
@@ -1211,7 +1980,9 @@ class TnAutocompleteComponent {
     }
     selectOption(option) {
         this.selectedValue.set(option.value);
+        this.selectedLabel.set(option.label);
         this.searchTerm.set(option.label);
+        this.displayIsFallback = false;
         this.onChange(option.value);
         this.optionSelected.emit(option);
         this.close();
@@ -1221,6 +1992,12 @@ class TnAutocompleteComponent {
             return;
         }
         this.isOpen.set(true);
+        this.autoFillCount = 0;
+        // Fetch the first page the first time the panel is shown. Deferring to
+        // here (rather than init) means a form of pickers costs nothing until one
+        // is used; `prime` is a no-op on every later open, so reopening does not
+        // refetch what is already listed.
+        this.asyncOptions.prime();
         // Seed the keyboard cursor on the committed option so ArrowDown resumes
         // from the current value (and it scrolls into view). -1 when nothing is
         // committed or the value has no visible, enabled option — e.g. a custom
@@ -1292,13 +2069,13 @@ class TnAutocompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", loadMore: "loadMore", opened: "opened" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceDebounce: { classPropertyName: "dataSourceDebounce", publicName: "dataSourceDebounce", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, actionOption: { classPropertyName: "actionOption", publicName: "actionOption", isSignal: true, isRequired: false, transformFunction: null }, keepSelectedOption: { classPropertyName: "keepSelectedOption", publicName: "keepSelectedOption", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", actionSelected: "actionSelected", dataSourceError: "dataSourceError", loadMore: "loadMore", opened: "opened" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"resolvedTestId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"resolvedPlaceholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\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    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <!-- The max-height is declared here, and inherits: it bounds the panel as a\n       whole AND the listbox inside it, which are two elements now. -->\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state.\n\n         The listbox is also the scrollport, and has to be (#292): axe's\n         `scrollable-region-focusable` exempts a combobox popup, but it tests\n         the scroll container's OWN role, so the role-less wrapper that used to\n         carry the overflow was reported even though every option inside is\n         `tabindex=\"-1\"` on purpose. The paging handler moves with the\n         overflow \u2014 a scroll event fires on the element that scrolls \u2014 and the\n         status row below stays outside the scrolling area. -->\n    <div\n      class=\"tn-autocomplete__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\"\n      [attr.aria-busy]=\"loading() ? true : null\"\n      (scroll)=\"onPanelScroll($event)\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('no-results')\">\n          {{ resolvedNoResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem 0;display:flex;flex-direction:column;max-height:var(--tn-autocomplete-panel-max-height, 320px)}.tn-autocomplete__listbox{max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;min-height:0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"resolvedTestId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"resolvedPlaceholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\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    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <!-- The max-height is declared here, and inherits: it bounds the panel as a\n       whole AND the listbox inside it, which are two elements now. -->\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state.\n\n         The listbox is also the scrollport, and has to be (#292): axe's\n         `scrollable-region-focusable` exempts a combobox popup, but it tests\n         the scroll container's OWN role, so the role-less wrapper that used to\n         carry the overflow was reported even though every option inside is\n         `tabindex=\"-1\"` on purpose. The paging handler moves with the\n         overflow \u2014 a scroll event fires on the element that scrolls \u2014 and the\n         status row below stays outside the scrolling area. -->\n    <div\n      class=\"tn-autocomplete__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\"\n      [attr.aria-busy]=\"resolvedLoading() ? true : null\"\n      (scroll)=\"onPanelScroll($event)\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [class.tn-autocomplete__option--action]=\"option === actionOption()\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (resolvedLoading()) {\n        <div\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      } @else if (!hasMatches()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('no-results')\">\n          {{ resolvedNoResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem 0;display:flex;flex-direction:column;max-height:var(--tn-autocomplete-panel-max-height, 320px)}.tn-autocomplete__listbox{max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;min-height:0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__option--action{border-bottom:1px solid var(--tn-lines, #dee2e6);font-weight:500}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, decorators: [{
             type: Component,
@@ -1308,8 +2085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"resolvedTestId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"resolvedPlaceholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\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    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <!-- The max-height is declared here, and inherits: it bounds the panel as a\n       whole AND the listbox inside it, which are two elements now. -->\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state.\n\n         The listbox is also the scrollport, and has to be (#292): axe's\n         `scrollable-region-focusable` exempts a combobox popup, but it tests\n         the scroll container's OWN role, so the role-less wrapper that used to\n         carry the overflow was reported even though every option inside is\n         `tabindex=\"-1\"` on purpose. The paging handler moves with the\n         overflow \u2014 a scroll event fires on the element that scrolls \u2014 and the\n         status row below stays outside the scrolling area. -->\n    <div\n      class=\"tn-autocomplete__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\"\n      [attr.aria-busy]=\"loading() ? true : null\"\n      (scroll)=\"onPanelScroll($event)\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('no-results')\">\n          {{ resolvedNoResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem 0;display:flex;flex-direction:column;max-height:var(--tn-autocomplete-panel-max-height, 320px)}.tn-autocomplete__listbox{max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;min-height:0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"resolvedTestId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"resolvedPlaceholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\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    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <!-- The max-height is declared here, and inherits: it bounds the panel as a\n       whole AND the listbox inside it, which are two elements now. -->\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state.\n\n         The listbox is also the scrollport, and has to be (#292): axe's\n         `scrollable-region-focusable` exempts a combobox popup, but it tests\n         the scroll container's OWN role, so the role-less wrapper that used to\n         carry the overflow was reported even though every option inside is\n         `tabindex=\"-1\"` on purpose. The paging handler moves with the\n         overflow \u2014 a scroll event fires on the element that scrolls \u2014 and the\n         status row below stays outside the scrolling area. -->\n    <div\n      class=\"tn-autocomplete__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-dropdown'\"\n      [attr.aria-busy]=\"resolvedLoading() ? true : null\"\n      (scroll)=\"onPanelScroll($event)\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            tnTestIdType=\"option\"\n            [tnTestId]=\"optionTestIdParts(option)\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [class.tn-autocomplete__option--action]=\"option === actionOption()\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (resolvedLoading()) {\n        <div\n          class=\"tn-autocomplete__loading\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('loading')\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      } @else if (!hasMatches()) {\n        <div\n          class=\"tn-autocomplete__no-results\"\n          tnTestIdType=\"autocomplete\"\n          [tnTestId]=\"statusTestIdParts('no-results')\">\n          {{ resolvedNoResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem 0;display:flex;flex-direction:column;max-height:var(--tn-autocomplete-panel-max-height, 320px)}.tn-autocomplete__listbox{max-height:var(--tn-autocomplete-panel-max-height, 320px);overflow-y:auto;min-height:0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__option--action{border-bottom:1px solid var(--tn-lines, #dee2e6);font-weight:500}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], dataSourceDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSourceDebounce", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], actionOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionOption", required: false }] }], keepSelectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepSelectedOption", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }], dataSourceError: [{ type: i0.Output, args: ["dataSourceError"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-autocomplete in tests.
@@ -7628,6 +8405,18 @@ class TnChipHarness extends ComponentHarness {
     }
 }
 
+/** English defaults used when no {@link TN_CHIP_INPUT_LABELS} provider is registered. */
+const TN_CHIP_INPUT_DEFAULT_LABELS = {
+    loading: 'Loading...',
+};
+/**
+ * DI token for app-wide default labels. Provide either a static object or a
+ * `Signal<TnChipInputLabels>` — the latter lets every chip input react to
+ * language changes when the consumer wires it up to an i18n service.
+ *
+ * Explicit input bindings on `<tn-chip-input>` still win over these defaults.
+ */
+const TN_CHIP_INPUT_LABELS = new InjectionToken('TN_CHIP_INPUT_LABELS', { providedIn: 'root', factory: () => TN_CHIP_INPUT_DEFAULT_LABELS });
 let nextId$4 = 0;
 /**
  * An editable, multi-value chip input — tokenized entry where typed text
@@ -7715,8 +8504,45 @@ class TnChipInputComponent {
      * Value-mode option list (`{ label, value }`). When non-empty, chips display
      * the resolved `label` while the form model holds `value`s. Takes precedence
      * over `suggestions`. For async sources, update in response to `(searchChange)`.
+     *
+     * A bound `dataSource` supersedes these as the *suggestions*, but they are
+     * still read when labelling a chip — see {@link labelOptions}.
      */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Server-driven suggestions: a function of `(query, page)` returning the
+     * matches for `query`. Binding it hands the component the debounce,
+     * request cancellation, loading state and error recovery that a consumer
+     * otherwise writes by hand around `(searchChange)`, and it supersedes both
+     * `suggestions` and `options` as the source of the dropdown's rows —
+     * `options` is still consulted when labelling a chip, so a host can name a
+     * value the fetched pages have not produced.
+     *
+     * The chip dropdown is not paged, so `page` is always 0 — the parameter is
+     * there only so one source function can feed both this and `tn-autocomplete`.
+     *
+     * The first query runs when the field is first focused, not on init. Binding
+     * a source that is `undefined` at that moment is fine — the field fetches as
+     * soon as one arrives, open panel included.
+     *
+     * Swapping one source function for ANOTHER is not a signal to refetch: a
+     * source is expected to be a stable function reading live configuration,
+     * which is what keeps it from being replaced out from under a request in
+     * flight. Call `refreshOptions()` when that configuration moves.
+     *
+     * @example
+     * ```html
+     * <tn-chip-input [dataSource]="groupOptions" />
+     * ```
+     */
+    dataSource = input(undefined, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    /** Debounce applied to typing before `dataSource` is queried, in ms. */
+    dataSourceDebounce = input(250, ...(ngDevMode ? [{ debugName: "dataSourceDebounce" }] : []));
+    /**
+     * Text shown next to the spinner while a `dataSource` request is in flight.
+     * Falls back to {@link TN_CHIP_INPUT_LABELS}.
+     */
+    loadingText = input(undefined, ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
     /**
      * Comparator for value equality — used for de-duplication, display resolution
      * and the selected-set. Defaults to identity (`===`), correct for primitives;
@@ -7768,11 +8594,36 @@ class TnChipInputComponent {
      * the consumer if the lookup is expensive.
      */
     searchChange = output();
+    /**
+     * Emits once per failed `dataSource` request. The component recovers on its
+     * own — the stream stays alive and the failed term stays retryable — so this
+     * is purely for the app to report the failure the way it reports others.
+     */
+    dataSourceError = output();
+    defaultLabels = injectTnLabels(TN_CHIP_INPUT_LABELS);
+    resolvedLoadingText = computed(() => this.loadingText() ?? this.defaultLabels().loading, ...(ngDevMode ? [{ debugName: "resolvedLoadingText" }] : []));
     container = viewChild.required('container');
     inputEl = viewChild.required('inputEl');
     dropdownTemplate = viewChild.required('dropdownTemplate');
     /** Committed chip values — the form model. */
     values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : []));
+    /**
+     * The label each committed value was picked FROM, for values whose row is no
+     * longer in {@link optionList} or {@link options}.
+     *
+     * With a `dataSource` the fetched page is the only list a chip's label can be
+     * resolved from, and it is replaced on the next search: pick `admins`, type
+     * `dev`, and the row carrying `g-7` is gone, so the chip the user just made
+     * reverts to `g-7` and stays that way. The pinned `[options]` escape hatch
+     * does not cover it — the host would have to append every freshly picked row
+     * to that input, which is the bookkeeping `dataSource` exists to remove.
+     *
+     * `tn-autocomplete` remembers the same thing in its `selectedLabel`; this is
+     * the multi-value form of it. Consulted LAST (see {@link labelOptions}), so a
+     * live row or a host pin always wins over a name that may since have changed,
+     * and pruned to the committed values so it cannot grow without bound.
+     */
+    rememberedLabels = signal([], ...(ngDevMode ? [{ debugName: "rememberedLabels" }] : []));
     /** Current text in the field. */
     inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     /** Whether the suggestion dropdown is open. */
@@ -7790,46 +8641,148 @@ class TnChipInputComponent {
         const max = this.maxChips();
         return max === undefined || this.values().length < max;
     }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : []));
+    /** Async engine backing `dataSource`; idle while no source is bound. */
+    asyncOptions = createTnOptionsDataSource({
+        source: this.dataSource,
+        debounceMs: this.dataSourceDebounce,
+        // The dropdown is not paged, so nothing ever asks for page 1 and this only
+        // decides an `exhausted` flag no one reads yet. `0` leaves that flag false;
+        // `Infinity` would latch it TRUE for every page (`rows.length < Infinity`),
+        // and `loadMore()` bails on `exhausted()` before anything else — so paging
+        // would silently no-op for whoever wires it into this dropdown later.
+        pageSize: signal(0),
+        identity: (option) => option.value,
+        onError: (error) => this.dataSourceError.emit(error),
+        onSettled: () => this.syncDropdownAfterFetch(),
+    });
     /**
-     * Unified option list. Value-mode `options` win; otherwise string-mode
-     * `suggestions` are lifted into `{ label: s, value: s }`.
+     * Whether a `dataSource` request is in flight.
+     *
+     * Surfaced in the dropdown because with a `dataSource` bound the rows are NOT
+     * re-filtered on the label — the server already applied the query — so the
+     * panel keeps showing the *previous* term's matches, clickable and looking
+     * current, for the debounce plus the round trip. Without a cue that is
+     * indistinguishable from "these are your results".
+     *
+     * It covers the ROUND TRIP only. The debounce window before it is
+     * deliberately left uncued: a spinner appearing and vanishing on every
+     * keystroke of a term that is still being typed is noise, and the request it
+     * would announce may never be sent.
+     */
+    loading = computed(() => this.asyncOptions.loading(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /**
+     * Unified option list. A bound `dataSource` wins; then value-mode `options`;
+     * otherwise string-mode `suggestions` lifted into `{ label: s, value: s }`.
      */
     optionList = computed(() => {
+        if (this.dataSource()) {
+            return this.asyncOptions.options();
+        }
         const opts = this.options();
         if (opts.length) {
             return opts;
         }
         return this.suggestions().map((suggestion) => ({ label: suggestion, value: suggestion }));
     }, ...(ngDevMode ? [{ debugName: "optionList" }] : []));
+    /**
+     * The rows a chip's label and test id may be resolved from: the suggestions,
+     * plus — with a `dataSource` bound — the `options` input.
+     *
+     * Those two lists are the same thing without a `dataSource`. With one, the
+     * fetched pages are the only source of labels, and the first of them does not
+     * exist until the field is focused: a form loaded with ids would render every
+     * chip as its raw id until someone clicked into it. `options` is how a host
+     * names values it already knows the labels for, so it stays part of the
+     * lookup even where it is not part of the dropdown.
+     *
+     * Deliberately not deduplicated: the order is the precedence — the server's
+     * fetched rows, then the host's pinned ones, then the labels this field
+     * remembered committing ({@link rememberedLabels}) — and every reader takes
+     * the first match, so the freshest name for a value wins.
+     *
+     * Read by {@link commitText} as well, so the labels the field paints and the
+     * labels it accepts back are one set. Deliberately NOT read by
+     * {@link filteredSuggestions}: with a source bound the rows are shown as the
+     * server ordered and filtered them, and splicing the pinned rows in would
+     * append the same entries to every term's results, matching or not.
+     */
+    labelOptions = computed(() => {
+        const list = this.optionList();
+        const pinned = this.dataSource() ? this.options() : [];
+        const remembered = this.rememberedLabels();
+        if (!pinned.length && !remembered.length) {
+            return list;
+        }
+        return [...list, ...pinned, ...remembered];
+    }, ...(ngDevMode ? [{ debugName: "labelOptions" }] : []));
     /** Options matching the typed text and not already selected. */
     filteredSuggestions = computed(() => {
         const term = this.inputValue().trim().toLowerCase();
+        // A `dataSource` already applied the query server-side; filtering again on
+        // the label would hide rows it matched on some other field.
+        const isPreFiltered = !!this.dataSource();
         return this.optionList().filter((option) => {
             if (this.valuesIncludes(option.value)) {
                 return false;
             }
-            return term === '' || option.label.toLowerCase().includes(term);
+            return isPreFiltered || term === '' || option.label.toLowerCase().includes(term);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
     onChange = () => { };
     onTouched = () => { };
     overlayRef;
     overlaySubs = [];
+    /**
+     * Set when the panel was closed deliberately — by committing a chip, or by
+     * Escape — and read by everything that would otherwise re-open it.
+     *
+     * Committing changes the suggestion list, since the chosen row is now
+     * excluded, which re-runs the effect below. On the static path the empty
+     * input makes `activelySearching` false and the close stands; with a
+     * `dataSource` bound, `searchingEmpty` holds regardless, so the panel sprang
+     * back open against an empty field, still listing the rows of the term just
+     * committed.
+     *
+     * Escape is here for the same reason and one more: a response landing after
+     * it reaches `syncDropdownAfterFetch`, which OPENS. Typing `an`, pressing
+     * Escape inside the 250 ms debounce, and waiting put the panel straight back
+     * with focus still in the field — Escape defeated for the whole in-flight
+     * window. The ARIA combobox pattern is that Escape dismisses the popup and it
+     * stays dismissed, so that was a keyboard and AT regression, not a cosmetic
+     * one.
+     *
+     * Cleared by the next thing that is genuinely a search, so typing re-arms the
+     * panel immediately.
+     */
+    closedByUser = false;
     constructor() {
         // Async suggestions: when the user types, onInput runs syncDropdown()
         // against the still-stale list and leaves the panel closed; results land a
         // tick later via [suggestions]/[options]. Re-open the panel once fresh
         // matches arrive while the field is focused and actively searching. This
-        // only ever opens (never closes), so it doesn't fight Escape, blur, or the
-        // post-commit close — those stay shut until the option set next changes.
+        // only ever opens (never closes), so it doesn't fight blur — and the
+        // `closedByUser` latch is what keeps it off Escape and the post-commit
+        // close, which would otherwise re-open on the next option-set change.
         effect(() => {
             const hasMatches = this.filteredSuggestions().length > 0;
+            // A debounced search reaches the wire a quarter-second after the
+            // keystroke that called `syncDropdown`, so on a term whose predecessor
+            // matched nothing the panel is shut by the time the request goes out.
+            // Tracking `loading` here is what puts the in-flight cue on screen in
+            // that case; like everything else in this effect it only ever opens.
+            const busy = this.loading();
             untracked(() => {
+                // With a `dataSource`, the first page is fetched on focus with an
+                // empty term — so an empty field is still "searching" and its results
+                // should drop the panel open, the way a static suggestion list does
+                // on focus. Typed-term-only would leave that first page invisible
+                // until the user typed something.
+                const searchingEmpty = !!this.dataSource();
                 const activelySearching = this.focused()
-                    && this.inputValue().trim() !== ''
+                    && (searchingEmpty || this.inputValue().trim() !== '')
                     && this.canAddMore()
                     && !this.isDisabled();
-                if (hasMatches && activelySearching) {
+                if ((hasMatches || busy) && activelySearching && !this.closedByUser) {
                     this.open();
                 }
             });
@@ -7838,12 +8791,33 @@ class TnChipInputComponent {
     ngOnDestroy() {
         this.detachOverlay();
     }
+    // ── Async options ──
+    /**
+     * Discard the pages fetched from `dataSource` and re-query the current term.
+     *
+     * For a caller whose `[dataSource]` is a fixed function reading live
+     * configuration — the shape that keeps the source from being swapped out
+     * from under a search in flight — this is how a change to that configuration
+     * takes effect, rather than waiting for the next keystroke to notice.
+     */
+    refreshOptions() {
+        this.asyncOptions.refresh();
+        if (this.focused()) {
+            // Suggestions are on screen (or one keystroke from it), so they have to
+            // be replaced at once. An unfocused field refetches on its next focus —
+            // the `prime` there is no longer answered from the invalidated pages.
+            this.asyncOptions.prime();
+        }
+    }
     // ── ControlValueAccessor ──
     writeValue(value) {
         // Reflect the model verbatim — deliberately NOT clamped to maxChips. A form
         // may legitimately seed more values than the cap; silently dropping them
         // would lose data. The cap only blocks further user-driven additions.
         this.values.set(Array.isArray(value) ? [...value] : []);
+        // A value the model dropped takes its remembered label with it — otherwise
+        // a form reset would leave the field naming chips it no longer holds.
+        this.pruneRememberedLabels();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -7867,12 +8841,18 @@ class TnChipInputComponent {
     onInput(event) {
         const value = event.target.value;
         this.inputValue.set(value);
+        this.closedByUser = false;
+        this.asyncOptions.search(value);
         this.searchChange.emit(value);
         this.highlightedIndex.set(-1);
         this.syncDropdown();
     }
     onFocus() {
         this.focused.set(true);
+        this.closedByUser = false;
+        // Fetch the first page the first time the field is used, so a form of
+        // chip inputs costs nothing until one is focused. A no-op thereafter.
+        this.asyncOptions.prime();
         this.syncDropdown();
     }
     onBlur() {
@@ -7912,6 +8892,9 @@ class TnChipInputComponent {
         if (event.key === 'Escape') {
             if (this.isOpen()) {
                 event.preventDefault();
+                // Latched, so neither the re-open effect nor a `dataSource` response
+                // still in flight can undo the dismissal. See {@link closedByUser}.
+                this.closedByUser = true;
                 this.close();
             }
             return;
@@ -7920,7 +8903,7 @@ class TnChipInputComponent {
             event.preventDefault();
             const idx = this.highlightedIndex();
             if (this.isOpen() && idx >= 0 && idx < suggestions.length) {
-                this.commitValue(suggestions[idx].value);
+                this.commitValue(suggestions[idx].value, suggestions[idx].label);
             }
             else {
                 this.commitText(this.inputValue());
@@ -7935,7 +8918,7 @@ class TnChipInputComponent {
         }
     }
     onSuggestionClick(option) {
-        this.commitValue(option.value);
+        this.commitValue(option.value, option.label);
         this.inputEl().nativeElement.focus();
     }
     /** Prevents the option `mousedown` from blurring the input before the click lands. */
@@ -7951,6 +8934,7 @@ class TnChipInputComponent {
             return;
         }
         this.values.update((values) => values.filter((_, i) => i !== index));
+        this.pruneRememberedLabels();
         this.onChange(this.values());
         this.onTouched();
         this.chipRemoved.emit(removed);
@@ -8004,6 +8988,10 @@ class TnChipInputComponent {
     suggestionTestId(option) {
         return this.discriminatedTestId(optionTestId(this.resolvedTestId(), option, this.optionTestIdKey()));
     }
+    /** Test-id parts for the dropdown's status row. Mirrors `tn-autocomplete`. */
+    statusTestIdParts(status) {
+        return scopeTestId(this.resolvedTestId(), status);
+    }
     /**
      * Keeps a scoped id only when both halves of it survive normalization.
      *
@@ -8026,15 +9014,25 @@ class TnChipInputComponent {
     isCommitKey(event) {
         return event.key === 'Enter' || this.separatorKeys().includes(event.key);
     }
-    /** Commits typed text: resolve it to an option's value, else accept as custom. */
+    /**
+     * Commits typed text: resolve it to an option's value, else accept as custom.
+     *
+     * Matched against {@link labelOptions}, not the dropdown rows, so that every
+     * label the field is willing to PAINT it is also willing to READ back. With a
+     * `dataSource` bound, `options` names values the host already knows the
+     * labels for; a chip rendered as `admins` that this method did not recognise
+     * when `admins` was typed was silently dropped under
+     * `allowCustomValue="false"` and committed as the raw string under the
+     * default `true` — a second chip beside the one it duplicates.
+     */
     commitText(raw) {
         const text = (raw ?? '').trim();
         if (!text) {
             return;
         }
-        const match = this.optionList().find((option) => option.label.toLowerCase() === text.toLowerCase());
+        const match = this.labelOptions().find((option) => option.label.toLowerCase() === text.toLowerCase());
         if (match) {
-            this.commitValue(match.value);
+            this.commitValue(match.value, match.label);
             return;
         }
         if (this.allowCustomValue()) {
@@ -8043,8 +9041,15 @@ class TnChipInputComponent {
         }
         this.clearInput();
     }
-    /** Commits a resolved value, honouring duplicate and cap rules. */
-    commitValue(value) {
+    /**
+     * Commits a resolved value, honouring duplicate and cap rules.
+     *
+     * `label` is the text of the option the value came from, when there was one —
+     * remembered so the chip keeps that name after the page carrying its row is
+     * replaced. See {@link rememberedLabels}. Free text passes none: such a chip
+     * is its own label, and `String(value)` already renders it.
+     */
+    commitValue(value, label) {
         if (this.isDisabled() || !this.canAddMore()) {
             return;
         }
@@ -8053,11 +9058,24 @@ class TnChipInputComponent {
             return;
         }
         this.values.update((values) => [...values, value]);
+        if (label !== undefined) {
+            this.rememberedLabels.update((remembered) => [...remembered, { label, value }]);
+        }
         this.onChange(this.values());
         this.onTouched();
         this.chipAdded.emit(value);
         this.clearInput();
     }
+    /**
+     * Drop remembered labels for values no longer committed, so the memory stays
+     * bounded by the chips on screen rather than by everything ever picked.
+     */
+    pruneRememberedLabels() {
+        if (!this.rememberedLabels().length) {
+            return;
+        }
+        this.rememberedLabels.update((remembered) => remembered.filter((option) => this.values().some((value) => this.valueMatches(option.value, value))));
+    }
     /**
      * The option a committed value came from, or `undefined` for a free-text chip.
      *
@@ -8071,7 +9089,7 @@ class TnChipInputComponent {
     optionFor(value) {
         const comparator = this.compareWith();
         if (comparator) {
-            return this.optionList().find((option) => comparator(option.value, value));
+            return this.labelOptions().find((option) => comparator(option.value, value));
         }
         return this.optionIndex().get(value);
     }
@@ -8083,7 +9101,7 @@ class TnChipInputComponent {
      */
     optionIndex = computed(() => {
         const index = new Map();
-        for (const option of this.optionList()) {
+        for (const option of this.labelOptions()) {
             if (!index.has(option.value)) {
                 index.set(option.value, option);
             }
@@ -8100,15 +9118,54 @@ class TnChipInputComponent {
     clearInput() {
         this.inputValue.set('');
         this.inputEl().nativeElement.value = '';
+        // The engine has to be told the term is gone too, or it keeps the
+        // committed term's query and rows. `closedByUser` hides that for the
+        // immediate re-open, but not for the next focus: blur, refocus, and the
+        // panel opens on the PREVIOUS term's matches against an empty field. An
+        // empty input means "show everything" on the static path, and this is what
+        // makes the async path agree. One request, not one per chip — it goes
+        // through the same debounce as typing.
+        this.asyncOptions.search('');
+        this.closedByUser = true;
         this.close();
     }
+    /**
+     * Re-decide the panel once a `dataSource` response lands.
+     *
+     * The constructor effect only ever OPENS — it must not fight Escape, blur or
+     * the post-commit close — and with a source bound `onInput` runs
+     * `syncDropdown()` against the PREVIOUS term's rows, which are still there,
+     * so it leaves the panel open too. Nothing was left to retract it: a search
+     * that matched nothing kept a bordered, empty `role="listbox"` attached,
+     * `aria-expanded="true"` over it, until the next keystroke or blur. The
+     * static path never reaches that state, because there the label filter has
+     * already emptied the list by the time `syncDropdown()` reads it.
+     *
+     * The guards are every deliberate close: {@link closedByUser} covers the
+     * post-commit close and Escape, `focused()` covers blur. This must not reopen
+     * a panel any of them just shut.
+     */
+    syncDropdownAfterFetch() {
+        if (this.closedByUser || !this.focused()) {
+            return;
+        }
+        this.syncDropdown();
+    }
     /**
      * Opens the dropdown when there is something to show, closes it otherwise.
      * Stays closed once the chip cap is reached — suggesting rows that
      * `commitValue()` would reject is misleading.
+     *
+     * A request in flight counts as something to show even with no rows behind
+     * it: the loading row is the only in-flight cue this field has, and the
+     * fetch most likely to be slow is the COLD one on first focus, where there
+     * is nothing to keep the panel open on its own. Without this the panel was
+     * detached for that whole round trip — no spinner, no `aria-busy` — and the
+     * empty listbox that carries the loading row cost no height.
      */
     syncDropdown() {
-        if (this.filteredSuggestions().length > 0 && this.canAddMore() && !this.isDisabled()) {
+        const hasSomethingToShow = this.filteredSuggestions().length > 0 || this.loading();
+        if (hasSomethingToShow && this.canAddMore() && !this.isDisabled()) {
             this.open();
         }
         else {
@@ -8171,24 +9228,24 @@ class TnChipInputComponent {
         this.overlayRef = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceDebounce: { classPropertyName: "dataSourceDebounce", publicName: "dataSourceDebounce", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange", dataSourceError: "dataSourceError" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnChipInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"resolvedTestId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\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    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"suggestionTestId(suggestion)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"resolvedTestId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\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    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div class=\"tn-chip-input__dropdown\">\n    <!-- Per ARIA a listbox may only contain option children, so the loading row\n         lives OUTSIDE it as a live-region sibling. The listbox is also the\n         scrollport, which keeps that row pinned below the rows it describes\n         rather than scrolling away with them. -->\n    <div\n      class=\"tn-chip-input__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-listbox'\"\n      [attr.aria-busy]=\"loading() ? true : null\"\n    >\n      @for (suggestion of filteredSuggestions(); track $index) {\n        <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n             through the input's aria-activedescendant + the Enter branch in\n             onKeydown, so a key handler here would be dead code. Click is a\n             pointer-only affordance. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-chip-input__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"suggestionTestId(suggestion)\"\n          [class.highlighted]=\"highlightedIndex() === $index\"\n          [attr.id]=\"uid + '-option-' + $index\"\n          [attr.aria-selected]=\"highlightedIndex() === $index\"\n          (mousedown)=\"onSuggestionMousedown($event)\"\n          (click)=\"onSuggestionClick(suggestion)\"\n        >\n          {{ suggestion.label }}\n        </div>\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div\n          class=\"tn-chip-input__loading\"\n          tnTestIdType=\"chip-input\"\n          [tnTestId]=\"statusTestIdParts('loading')\"\n        >\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{display:flex;flex-direction:column;max-height:var(--tn-chip-input-panel-max-height, 320px);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__listbox{max-height:inherit;overflow-y:auto;min-height:0}.tn-chip-input__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-chip-input', standalone: true, imports: [TnChipComponent, TnTestIdDirective], providers: [
+            args: [{ selector: 'tn-chip-input', standalone: true, imports: [TnChipComponent, TnSpinnerComponent, TnTestIdDirective], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TnChipInputComponent),
                             multi: true,
                         },
-                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"resolvedTestId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\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    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"suggestionTestId(suggestion)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"resolvedTestId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\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    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div class=\"tn-chip-input__dropdown\">\n    <!-- Per ARIA a listbox may only contain option children, so the loading row\n         lives OUTSIDE it as a live-region sibling. The listbox is also the\n         scrollport, which keeps that row pinned below the rows it describes\n         rather than scrolling away with them. -->\n    <div\n      class=\"tn-chip-input__listbox\"\n      role=\"listbox\"\n      [attr.id]=\"uid + '-listbox'\"\n      [attr.aria-busy]=\"loading() ? true : null\"\n    >\n      @for (suggestion of filteredSuggestions(); track $index) {\n        <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n             through the input's aria-activedescendant + the Enter branch in\n             onKeydown, so a key handler here would be dead code. Click is a\n             pointer-only affordance. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-chip-input__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"suggestionTestId(suggestion)\"\n          [class.highlighted]=\"highlightedIndex() === $index\"\n          [attr.id]=\"uid + '-option-' + $index\"\n          [attr.aria-selected]=\"highlightedIndex() === $index\"\n          (mousedown)=\"onSuggestionMousedown($event)\"\n          (click)=\"onSuggestionClick(suggestion)\"\n        >\n          {{ suggestion.label }}\n        </div>\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div\n          class=\"tn-chip-input__loading\"\n          tnTestIdType=\"chip-input\"\n          [tnTestId]=\"statusTestIdParts('loading')\"\n        >\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"resolvedLoadingText()\" />\n          <span>{{ resolvedLoadingText() }}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{display:flex;flex-direction:column;max-height:var(--tn-chip-input-panel-max-height, 320px);background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__listbox{max-height:inherit;overflow-y:auto;min-height:0}.tn-chip-input__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], dataSourceDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSourceDebounce", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], dataSourceError: [{ type: i0.Output, args: ["dataSourceError"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `tn-chip-input` in tests. Reads the committed
@@ -8283,6 +9340,23 @@ class TnChipInputHarness extends ComponentHarness {
         }
         return texts;
     }
+    /**
+     * Whether the dropdown is showing its loading row, i.e. a `[dataSource]`
+     * request is in flight. Any rows on screen while this is true belong to the
+     * previous term — a `dataSource` is trusted to have applied the query, so
+     * they are not re-filtered as the user types. On the first focus there are
+     * no rows yet and the panel holds the loading row alone.
+     *
+     * @example
+     * ```typescript
+     * const chips = await loader.getHarness(TnChipInputHarness);
+     * await chips.focus();
+     * expect(await chips.isLoading()).toBe(true);
+     * ```
+     */
+    async isLoading() {
+        return (await this.documentRoot.locatorForOptional('.tn-chip-input__loading')()) !== null;
+    }
     async isDisabled() {
         const input = await this._input();
         return (await input.getProperty('disabled')) === true;
@@ -16591,6 +17665,35 @@ class TnTableComponent {
     dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
     trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    /**
+     * Identity function for SELECTION. When set, the table tracks selected rows by the
+     * key this returns rather than by object reference, and the selection survives a
+     * `dataSource` change: paging, sorting, filtering, or a background reload that hands
+     * back freshly-built row objects. Rows selected on a page the table is no longer
+     * showing stay selected and keep coming back in `selectionChange`.
+     *
+     * Without it the table keeps its historical behaviour — any `dataSource` reference
+     * change clears the selection and emits an empty `selectionChange` — because
+     * reference-keyed selections cannot be recognised in a new array and would otherwise
+     * leave the header checkbox counting rows that are no longer on screen.
+     *
+     * This is deliberately separate from {@link trackBy}, which is a rendering concern
+     * (`@for` identity, index-based by default) and is free to stay so on a table whose
+     * selection has to be stable. Pass a key that identifies the ROW, not its position —
+     * and bind a stable member rather than writing the function in the template, since
+     * Angular's expression grammar has no arrow functions:
+     * `[selectionKey]="rowKey"` for a `rowKey = (row: User) => row.id` on the host.
+     *
+     * The select-all checkbox stays scoped to the visible page — it selects and clears
+     * the rows the table is currently showing, and `isAllSelected` reflects only those,
+     * so it never claims to have selected rows the user cannot see.
+     *
+     * Retention is unconditional, and it has to be: the table sees one page and cannot
+     * tell a row that moved off-screen from one that was destroyed. A consumer whose rows
+     * can disappear for good owns that check — reconcile `selectionChange` against the
+     * full list it holds, and call {@link clearSelection} once a batch action is done.
+     */
+    selectionKey = input(undefined, ...(ngDevMode ? [{ debugName: "selectionKey" }] : []));
     emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
     /**
      * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
@@ -16844,8 +17947,29 @@ class TnTableComponent {
     static instanceCount = 0;
     instanceId = `tn-table-${TnTableComponent.instanceCount++}`;
     // --- Selection state ---
+    /**
+     * The rows of the CURRENT `data()` that are selected. With `selectionKey` set this is
+     * the visible slice of {@link selectedByKey} — it is what the row checkboxes and the
+     * select-all state read, so both stay scoped to the page on screen.
+     */
     selection = new SelectionModel(true, []);
+    /**
+     * The whole selection, keyed by `selectionKey`, including rows that are no longer in
+     * `data()`. Empty (and unused) when no `selectionKey` is set.
+     *
+     * It holds the row objects, not just the keys, so `selectionChange` can hand a
+     * consumer the rows it selected on an earlier page — a batch action has to act on
+     * rows, and the table is the only thing that ever saw them.
+     */
+    selectedByKey = new Map();
+    /** Number of selected rows present in the current `data()` — see {@link selection}. */
     selectionCount = signal(0, ...(ngDevMode ? [{ debugName: "selectionCount" }] : []));
+    /**
+     * The array last handed to `selectionChange`, so a reconcile that leaves the selection
+     * exactly as the consumer already sees it can stay quiet — re-running because
+     * `selectionKey`'s identity changed is not news.
+     */
+    lastEmittedSelection = [];
     initialized = false;
     // Column def map as a computed signal
     columnDefMap = computed(() => {
@@ -16859,15 +17983,46 @@ class TnTableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "columnDefMap" }] : []));
     constructor() {
-        // Clear selection and expansion when data reference changes
+        // Collapse every open detail row when the data reference changes: the rows the
+        // expanded set holds belong to the array that is going away. This reads `data()`
+        // and nothing else, so an unrelated input — `selectionKey` above all, which a
+        // consumer may swap or re-create on any change-detection pass — cannot close what
+        // the user opened as a side effect of a selection concern.
         effect(() => {
             this.data();
-            if (this.initialized) {
-                this.selection.clear();
-                this.selectionCount.set(0);
-                this.expandedRows.set(new Set());
-                this.selectionChange.emit([]);
+            if (!this.initialized) {
+                return;
             }
+            this.expandedRows.set(new Set());
+        });
+        // Reconcile the retained selection against the rows now on screen. This has to
+        // react to `selectionKey` as well as to `data()` — a key being taken away must be
+        // noticed promptly — so the emit is guarded by whether the selection the consumer
+        // last saw actually changed, and a key swapped for an equivalent one stays silent.
+        effect(() => {
+            const rows = this.data();
+            const selectionKey = this.selectionKey();
+            if (!this.initialized) {
+                return;
+            }
+            if (!selectionKey) {
+                // Also drop anything retained under a key, so a table whose `selectionKey` is
+                // taken away cannot resurrect those rows if it is given one again.
+                this.clearSelection();
+                return;
+            }
+            // Re-point every retained selection at the row object the new data carries, so a
+            // reload that rebuilt its rows leaves the consumer holding live references rather
+            // than the stale ones it selected. Rows the new data does not carry (another page,
+            // or filtered out) keep the reference they were selected with.
+            for (const row of rows) {
+                const key = selectionKey(row);
+                if (this.selectedByKey.has(key)) {
+                    this.selectedByKey.set(key, row);
+                }
+            }
+            this.syncSelectionToData(rows, selectionKey);
+            this.emitSelectionIfChanged();
         });
         // Clear expanded rows when expandable is toggled off
         effect(() => {
@@ -17035,7 +18190,7 @@ class TnTableComponent {
     ngOnInit() {
         this.initialized = true;
         this.destroyRef.onDestroy(() => {
-            this.selection.clear();
+            this.clearSelection();
             this.resizeObserver?.disconnect();
         });
     }
@@ -17479,23 +18634,103 @@ class TnTableComponent {
         this.toggleRowSelection(row);
     }
     toggleSelectAll() {
-        if (this.isAllSelected()) {
-            this.selection.clear();
+        const selectAll = !this.isAllSelected();
+        if (selectAll) {
+            this.selection.select(...this.data());
         }
         else {
-            this.selection.select(...this.data());
+            this.selection.clear();
+        }
+        // Only the visible rows move: select-all is scoped to the page, so rows retained
+        // from elsewhere are neither selected nor dropped by it.
+        const selectionKey = this.selectionKey();
+        if (selectionKey) {
+            for (const row of this.data()) {
+                const key = selectionKey(row);
+                if (selectAll) {
+                    this.selectedByKey.set(key, row);
+                }
+                else {
+                    this.selectedByKey.delete(key);
+                }
+            }
         }
         this.selectionCount.set(this.selection.selected.length);
-        this.selectionChange.emit(this.selection.selected);
+        this.emitSelection();
     }
     toggleRowSelection(row) {
         this.selection.toggle(row);
+        const selectionKey = this.selectionKey();
+        if (selectionKey) {
+            const key = selectionKey(row);
+            if (this.selection.isSelected(row)) {
+                this.selectedByKey.set(key, row);
+            }
+            else {
+                this.selectedByKey.delete(key);
+            }
+        }
         this.selectionCount.set(this.selection.selected.length);
-        this.selectionChange.emit(this.selection.selected);
+        this.emitSelection();
     }
     isRowSelected(row) {
+        const selectionKey = this.selectionKey();
+        if (selectionKey) {
+            // Read the keyed store rather than the model: a row object rebuilt by a reload is
+            // a different reference, and it should render checked before the reconciling
+            // effect has had a chance to re-point the model at it.
+            return this.selectedByKey.has(selectionKey(row));
+        }
         return this.selection.isSelected(row);
     }
+    /**
+     * Drops the whole selection, including rows retained from pages the table is not
+     * showing. Use it after a batch action consumes the selection.
+     *
+     * Emits an empty `selectionChange` if anything was selected. The caller knows it
+     * cleared, but `selectionChange` is the only way anything else can: a toolbar bound to
+     * a mirrored copy of the selection a layer up would otherwise stay stale until the next
+     * `dataSource` change happened to correct it. Clearing {@link selection} directly is not
+     * enough once `selectionKey` is set: the retained rows would survive and come back on
+     * the next reconcile.
+     */
+    clearSelection() {
+        this.selection.clear();
+        this.selectedByKey.clear();
+        this.selectionCount.set(0);
+        this.emitSelectionIfChanged();
+    }
+    /** Re-applies the retained selection to the rows currently on screen. */
+    syncSelectionToData(rows, selectionKey) {
+        this.selection.clear();
+        const selected = rows.filter((row) => this.selectedByKey.has(selectionKey(row)));
+        if (selected.length) {
+            this.selection.select(...selected);
+        }
+        this.selectionCount.set(this.selection.selected.length);
+    }
+    /** What `selectionChange` carries: the whole selection when keyed, the page's otherwise. */
+    emittedSelection() {
+        return this.selectionKey() ? [...this.selectedByKey.values()] : this.selection.selected;
+    }
+    /** Emits the current selection and records it. For the paths that always change it. */
+    emitSelection() {
+        this.lastEmittedSelection = this.emittedSelection();
+        this.selectionChange.emit(this.lastEmittedSelection);
+    }
+    /**
+     * Emits only if the selection differs from the one last emitted, by row identity — for
+     * the paths that may be re-run without anything having moved.
+     */
+    emitSelectionIfChanged() {
+        const next = this.emittedSelection();
+        const previous = this.lastEmittedSelection;
+        if (next.length === previous.length && next.every((row, index) => row === previous[index])) {
+            return;
+        }
+        this.lastEmittedSelection = next;
+        this.selectionChange.emit(next);
+    }
     // --- Card-mode computeds ---
     /**
      * The column rendered as the card title. The first `displayedColumns` entry
@@ -17627,7 +18862,7 @@ class TnTableComponent {
         return row[column];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, scrollRegionAriaLabel: { classPropertyName: "scrollRegionAriaLabel", publicName: "scrollRegionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandOnRowClick: { classPropertyName: "expandOnRowClick", publicName: "expandOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, cardBreakpoint: { classPropertyName: "cardBreakpoint", publicName: "cardBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, cardPrimaryCount: { classPropertyName: "cardPrimaryCount", publicName: "cardPrimaryCount", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--fixed-layout": "fixedLayout()", "class.tn-table--loading": "loading()", "class.tn-table--cards": "isCardMode()", "class.tn-table--scroll": "isScrollMode()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()", "attr.tabindex": "scrollKeyboardReachable() ? \"0\" : null", "attr.role": "scrollKeyboardReachable() ? \"group\" : null", "attr.aria-label": "scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsDef", first: true, predicate: TnRowActionsDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          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 \u2014 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 \u2014 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 \u2014 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 \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? 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 \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"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 \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (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 \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ 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 \u2014 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 \u2014 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 \u2014 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 \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\n                    [name]=\"\n                      isSorted(column)\n                        ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                        : 'mat-unfold_more'\n                    \" />\n                }\n              </span>\n            </th>\n          }\n        }\n        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ 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 \u2014 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          [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", 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: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTableComponent, isStandalone: true, selector: "tn-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, scrollRegionAriaLabel: { classPropertyName: "scrollRegionAriaLabel", publicName: "scrollRegionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: true, isRequired: false, transformFunction: null }, activeWhen: { classPropertyName: "activeWhen", publicName: "activeWhen", isSignal: true, isRequired: false, transformFunction: null }, activeBg: { classPropertyName: "activeBg", publicName: "activeBg", isSignal: true, isRequired: false, transformFunction: null }, activeIndicator: { classPropertyName: "activeIndicator", publicName: "activeIndicator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandOnRowClick: { classPropertyName: "expandOnRowClick", publicName: "expandOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, cardBreakpoint: { classPropertyName: "cardBreakpoint", publicName: "cardBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, cardPrimaryCount: { classPropertyName: "cardPrimaryCount", publicName: "cardPrimaryCount", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange" }, host: { properties: { "class.tn-table--bordered": "bordered()", "class.tn-table--fixed-layout": "fixedLayout()", "class.tn-table--loading": "loading()", "class.tn-table--cards": "isCardMode()", "class.tn-table--scroll": "isScrollMode()", "style.--tn-table-active-bg": "activeBg()", "style.--tn-table-active-indicator": "activeIndicator()", "attr.tabindex": "scrollKeyboardReachable() ? \"0\" : null", "attr.role": "scrollKeyboardReachable() ? \"group\" : null", "attr.aria-label": "scrollKeyboardReachable() ? resolvedScrollRegionLabel() : null" }, classAttribute: "tn-table" }, queries: [{ propertyName: "columnDefs", predicate: TnTableColumnDirective, isSignal: true }, { propertyName: "detailRowDef", first: true, predicate: TnDetailRowDefDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsDef", first: true, predicate: TnRowActionsDefDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "@if (isCardMode()) {\n  <!-- Card layout (narrow container) -->\n  @if (selectable() || sortableColumns().length > 0) {\n    <div class=\"tn-table__cards-toolbar\" [attr.inert]=\"loading() ? '' : null\">\n      @if (selectable()) {\n        <!--\n          A plain <div>, not a <label>: tn-checkbox renders its own <label for>,\n          and nesting one label inside another is invalid. The visible text is\n          passed through the checkbox's own `label` input so it stays associated.\n\n          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 \u2014 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 \u2014 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 \u2014 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 \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? 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 \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"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 \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (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 \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ 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 \u2014 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 \u2014 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 \u2014 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 \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\n                    [name]=\"\n                      isSorted(column)\n                        ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                        : 'mat-unfold_more'\n                    \" />\n                }\n              </span>\n            </th>\n          }\n        }\n        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ 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 \u2014 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          [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", 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: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnEmptyComponent, selector: "tn-empty", inputs: ["title", "description", "icon", "iconLibrary", "iconSize", "actionText", "bordered", "size"], outputs: ["onAction"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0', overflow: 'hidden' })),
                 state('expanded', style({ height: '*' })),
@@ -17664,7 +18899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[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 \u2014 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 \u2014 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 \u2014 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 \u2014 card mode would otherwise\n              reorder by a column whose table header ignores clicks.\n\n              Three states, not two. A column with an empty direction is not sorted \u2014\n              reachable through the two-way binding \u2014 and this control used to render an\n              up arrow labelled \"Sort descending\" for it, while table mode showed no\n              arrow and no `aria-sort` for the same state. It keeps rendering, because\n              it is how the user escapes that state, but shows the neutral\n              `mat-unfold_more` the table header already uses for unsorted columns.\n\n              The label names the action, so it is `sortAscending` both when unsorted\n              and when descending \u2014 `toggleSortDirection()` starts at ascending.\n            -->\n            <button\n              type=\"button\"\n              class=\"tn-table__cards-sort-dir\"\n              [attr.aria-label]=\"sortDirection() === 'asc' ? 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 \u2014 see\n    button, card, input and file-picker-popup.\n  -->\n  <ng-template #cardField let-column let-row=\"row\">\n    <div class=\"tn-table__card-field\" [attr.data-column]=\"column\">\n      <dt class=\"tn-table__card-field-label\">{{ getCardLabel(column) }}</dt>\n      <dd class=\"tn-table__card-field-value\">\n        @if (getColumnDef(column)?.cellTemplate(); as tmpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tmpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\" />\n        } @else {\n          {{ getCellValue(row, column) }}\n        }\n      </dd>\n    </div>\n  </ng-template>\n\n  <div class=\"tn-table__cards\" role=\"list\" [attr.inert]=\"loading() ? '' : null\">\n    <!--\n      Card ARIA differs from the table row on purpose, because `listitem` supports\n      far less than `row` does:\n        - Active state uses `aria-current`, not `aria-selected`, which `listitem`\n          does not support (an earlier revision set it here and it was dropped for\n          that reason; axe reports it as a critical aria-allowed-attr violation).\n        - Selection state stays on the checkbox, which is a real control.\n        - `aria-expanded` IS permitted here \u2014 `listitem` is a subclass of the\n          abstract `section` role, and `section` supports `aria-expanded`, so\n          `listitem` inherits it (axe-core's own role table lists it in\n          `listitem`'s allowedAttrs alongside aria-level/posinset/setsize). So the\n          card carries it whenever the card itself acts as the expand trigger,\n          matching what table mode does for its rows. The \"Details\" button reports\n          the same state unconditionally, because it is the control a screen-reader\n          user actually tabs to \u2014 see the note above it.\n      The card is deliberately NOT `role=\"button\"`: that role has presentational\n      children, which would hide the card's checkbox, row actions and \"Details\"\n      toggle from assistive tech entirely.\n    -->\n    @for (row of data(); track trackByFn()($index, row); let rowIdx = $index) {\n      <div\n        class=\"tn-table__card\"\n        role=\"listitem\"\n        [attr.data-row-index]=\"rowIdx\"\n        [class.tn-table__card--active]=\"isRowActive(row)\"\n        [class.tn-table__card--clickable]=\"clickable()\"\n        [attr.tabindex]=\"clickable() ? 0 : null\"\n        [attr.aria-current]=\"isRowActive(row) ? 'true' : null\"\n        [attr.aria-expanded]=\"isCardExpandTrigger(row) ? isRowExpanded(row) : null\"\n        [attr.aria-controls]=\"isCardExpandTrigger(row) && isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n        (click)=\"onCardClick($event, row)\"\n        (dblclick)=\"onCardDoubleClick($event, row)\"\n        (keydown)=\"onCardKeydown($event, row)\">\n        <div class=\"tn-table__card-header\">\n          @if (selectable()) {\n            <!--\n              <div>, not <label>, and the handler is on the wrapper rather than the\n              checkbox \u2014 see the toolbar's select-all above for both reasons.\n            -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <div\n              class=\"tn-table__card-select\"\n              (click)=\"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 \u2014\n                the same case `getCardLabel()` already falls back for.\n              -->\n              <tn-checkbox\n                class=\"tn-table__checkbox\"\n                [label]=\"\n                  'Select ' + (getCellValue(row, cardTitleColumn()) ?? 'row ' + (rowIdx + 1))\n                \"\n                [hideLabel]=\"true\"\n                [checked]=\"isRowSelected(row)\"\n                (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 \u2014 redundant, not invalid. Redundancy\n            is the cheaper failure.\n          -->\n          <button\n            type=\"button\"\n            class=\"tn-table__card-detail-toggle\"\n            [attr.aria-expanded]=\"isRowExpanded(row)\"\n            [attr.aria-controls]=\"isRowExpanded(row) ? detailPanelId(rowIdx) : null\"\n            (click)=\"toggleRowExpansion(row); $event.stopPropagation()\">\n            <span>{{ 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 \u2014 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 \u2014 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 \u2014 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 \u2014 without this, every sortable column\n                    announced as \"Name mat-unfold_more\". `aria-sort` on the <th> already\n                    carries the state properly, so the token is pure noise.\n                  -->\n                  <tn-icon\n                    class=\"tn-table__sort-icon\"\n                    size=\"sm\"\n                    aria-hidden=\"true\"\n                    [name]=\"\n                      isSorted(column)\n                        ? (sortDirection() === 'asc' ? 'mat-arrow_upward' : 'mat-arrow_downward')\n                        : 'mat-unfold_more'\n                    \" />\n                }\n              </span>\n            </th>\n          }\n        }\n        @if (rowActionsDef()) {\n          <th class=\"tn-table__header-cell tn-table__actions-cell\">\n            <span class=\"cdk-visually-hidden\">{{ 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 \u2014 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          [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", 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"] }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], scrollRegionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRegionAriaLabel", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnRowClick", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], cardBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBreakpoint", required: false }] }], cardPrimaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPrimaryCount", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }], rowActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnRowActionsDefDirective), { isSignal: true }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], scrollRegionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRegionAriaLabel", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], activeRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRow", required: false }] }], activeWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeWhen", required: false }] }], activeBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBg", required: false }] }], activeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndicator", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMessage", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnRowClick", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], cardBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBreakpoint", required: false }] }], cardPrimaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPrimaryCount", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnTableColumnDirective), { isSignal: true }] }], detailRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnDetailRowDefDirective), { isSignal: true }] }], rowActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnRowActionsDefDirective), { isSignal: true }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }] } });
 
 /**
  * Harness for interacting with `tn-table` in tests.
@@ -18821,7 +20056,12 @@ class TnTablePagerComponent {
             pageSize: this.pageSize(),
         };
         this.lastPushedPagination = pagination;
-        provider.setPagination(pagination);
+        // The provider gets its OWN object. Handing it this one aliases the echo guard to
+        // the provider's live pagination, and a provider that re-paginates in place — a
+        // filter that resets to page 1, say — silently rewrites what we think we pushed.
+        // The guard then reads the provider's own change back as our echo and leaves the
+        // pager showing a page the provider is no longer serving.
+        provider.setPagination({ ...pagination });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()", "attr.aria-labelledby": "ariaLabelledby() || null" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "tooltipSticky", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "showSelectAll", "selectAllLabel", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -22744,11 +23984,18 @@ class TnDateInputComponent {
                 offsetY: -8,
             },
         ];
+        // Rigid dimensions, like tn-select and tn-file-picker. With flexible
+        // dimensions on, CDK sizes the bounding box to the whole space between the
+        // trigger and the viewport edge and lets the pane grow into it, so the
+        // calendar (a block whose month table is `width: 100%`) stretched across
+        // the screen. Rigid + push keeps the pane content-sized and fully visible.
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.wrapperEl())
-            .withPositions(positions)
-            .withPush(false);
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withPush(true)
+            .withPositions(positions);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -22772,7 +24019,7 @@ class TnDateInputComponent {
                 useExisting: forwardRef(() => TnDateInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateInputComponent, decorators: [{
             type: Component,
@@ -22784,7 +24031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         }
                     ], host: {
                         'class': 'tn-date-input'
-                    }, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
+                    }, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], monthRef: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], dayRef: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], yearRef: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
@@ -23301,11 +24548,18 @@ class TnDateRangeInputComponent {
                 offsetY: -8,
             },
         ];
+        // Rigid dimensions, like tn-select and tn-file-picker. With flexible
+        // dimensions on, CDK sizes the bounding box to the whole space between the
+        // trigger and the viewport edge and lets the pane grow into it, so the
+        // calendar (a block whose month table is `width: 100%`) stretched across
+        // the screen. Rigid + push keeps the pane content-sized and fully visible.
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.wrapperEl())
-            .withPositions(positions)
-            .withPush(false);
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withPush(true)
+            .withPositions(positions);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -23329,7 +24583,7 @@ class TnDateRangeInputComponent {
                 useExisting: forwardRef(() => TnDateRangeInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateRangeInputComponent, decorators: [{
             type: Component,
@@ -23341,7 +24595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         }
                     ], host: {
                         'class': 'tn-date-range-input'
-                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
+                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], startMonthRef: [{ type: i0.ViewChild, args: ['startMonthInput', { isSignal: true }] }], startDayRef: [{ type: i0.ViewChild, args: ['startDayInput', { isSignal: true }] }], startYearRef: [{ type: i0.ViewChild, args: ['startYearInput', { isSignal: true }] }], endMonthRef: [{ type: i0.ViewChild, args: ['endMonthInput', { isSignal: true }] }], endDayRef: [{ type: i0.ViewChild, args: ['endDayInput', { isSignal: true }] }], endYearRef: [{ type: i0.ViewChild, args: ['endYearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
@@ -25751,7 +27005,7 @@ class TnSidePanelComponent {
             return;
         }
         guard()
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .pipe(take$1(1), takeUntilDestroyed(this.destroyRef))
             .subscribe((canClose) => {
             if (canClose) {
                 this.open.set(false);
@@ -26697,7 +27951,7 @@ class TnFilePickerPopupComponent {
         return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()} ${timePart}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "emptyMessage", "emptyDescription", "emptyIcon", "scrollRegionAriaLabel", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "mobileLayout", "cardBreakpoint", "cardPrimaryCount", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width", "label", "hideLabel", "cardPriority", "cardTitle", "cardHidden", "cardLabel"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnFilePickerPopupComponent, isStandalone: true, selector: "tn-file-picker-popup", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, createActions: { classPropertyName: "createActions", publicName: "createActions", isSignal: true, isRequired: false, transformFunction: null }, currentPath: { classPropertyName: "currentPath", publicName: "currentPath", isSignal: true, isRequired: false, transformFunction: null }, rootPath: { classPropertyName: "rootPath", publicName: "rootPath", isSignal: true, isRequired: false, transformFunction: null }, fileItems: { classPropertyName: "fileItems", publicName: "fileItems", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fileExtensions: { classPropertyName: "fileExtensions", publicName: "fileExtensions", isSignal: true, isRequired: false, transformFunction: null }, testIdBase: { classPropertyName: "testIdBase", publicName: "testIdBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", pathNavigate: "pathNavigate", createAction: "createAction", created: "created", clearSelection: "clearSelection", close: "close", submit: "submit", cancel: "cancel" }, host: { classAttribute: "tn-file-picker-popup" }, ngImport: i0, template: "<!-- Header with breadcrumb navigation -->\n<div class=\"tn-file-picker-header\">\n  <nav class=\"tn-file-picker-breadcrumb\" aria-label=\"File path\">\n    @for (segment of currentPath() | tnTruncatePath : rootPath(); track $index; let last = $last) {\n      <button\n        class=\"breadcrumb-segment\"\n        tnTestIdType=\"button\"\n        [tnTestId]=\"breadcrumbTestId(segment.name)\"\n        [class.current]=\"last\"\n        [class.nameless]=\"!segment.name\"\n        [disabled]=\"last\"\n        [attr.aria-label]=\"segment.name === '\u2026' || !segment.name ? 'Navigate to ' + segment.path : null\"\n        (click)=\"navigateToPath(segment.path)\">\n        {{ segment.name }}\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Loading indicator -->\n@if (loading()) {\n  <div class=\"tn-file-picker-loading\">\n    <tn-icon name=\"loading\" library=\"mdi\" />\n    <span>Loading...</span>\n  </div>\n}\n\n<!-- File table -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-content\">\n\n  <tn-table\n    [dataSource]=\"filteredFileItems()\"\n    [displayedColumns]=\"multiSelect() ? displayedColumns : displayedColumns.slice(1)\"\n    [clickable]=\"true\"\n    [activeWhen]=\"isRowSelected\"\n    (rowClick)=\"onItemClick($event)\"\n    (rowDoubleClick)=\"onItemDoubleClick($event)\">\n\n    <!-- Selection column: explicit width so the auto table layout doesn't\n         hand the near-empty column a share of the spare width -->\n    @if (multiSelect()) {\n      <ng-container tnColumnDef=\"select\" width=\"20px\">\n      <ng-template tnHeaderCellDef>\n        <!-- Select all checkbox -->\n      </ng-template>\n      <ng-template let-item tnCellDef>\n        @if (!item.inlineCreate) {\n          <tn-checkbox\n            [hideLabel]=\"true\"\n            [label]=\"'Select ' + item.name\"\n            [testId]=\"itemTestId(item)\"\n            [checked]=\"isSelected(item)\"\n            [disabled]=\"!!item.disabled\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onItemClick(item)\" />\n        }\n      </ng-template>\n      </ng-container>\n    }\n\n    <!-- Name column -->\n    <ng-container tnColumnDef=\"name\">\n      <ng-template tnHeaderCellDef>Name</ng-template>\n      <ng-template let-item tnCellDef>\n\n        <!-- Inline creation row for create actions with a `create` callback -->\n        @if (item.inlineCreate) {\n          @if (inlineCreation(); as creation) {\n            <div class=\"inline-create-cell\">\n              <div class=\"inline-create-row\" [class.has-error]=\"!!creation.error\">\n                <tn-icon class=\"file-icon\" [name]=\"creation.action.icon || 'mdi-folder'\" />\n                <input\n                  type=\"text\"\n                  class=\"inline-create-input\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  tnTestIdType=\"input\"\n                  [tnTestId]=\"inlineCreateTestId()\"\n                  [attr.aria-label]=\"creation.action.label + ' name'\"\n                  [attr.aria-invalid]=\"creation.error ? true : null\"\n                  [attr.aria-describedby]=\"creation.error ? inlineErrorId : null\"\n                  [class.error]=\"!!creation.error\"\n                  [disabled]=\"creation.loading\"\n                  [value]=\"creation.name\"\n                  (input)=\"onInlineCreationInput($event)\"\n                  (keydown)=\"onInlineCreationKeyDown($event)\"\n                  (blur)=\"onInlineCreationBlur()\">\n                @if (creation.loading) {\n                  <tn-icon name=\"mdi-loading\" class=\"creation-loading-icon\" aria-hidden=\"true\" />\n                }\n              </div>\n              @if (creation.error) {\n                <div class=\"inline-create-error\" role=\"alert\" [id]=\"inlineErrorId\">\n                  <tn-icon name=\"mdi-alert-circle\" class=\"error-icon\" aria-hidden=\"true\" />\n                  <span class=\"error-text\">{{ creation.error }}</span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n        <div\n             class=\"file-name-cell\"\n             tnTestIdType=\"option\"\n             [tnTestId]=\"itemTestId(item)\"\n             [class.selected]=\"isSelected(item)\"\n             [class.disabled]=\"!!item.dimmed\"\n             [class.zfs-object]=\"isZfsObject(item)\">\n          <tn-icon\n            [name]=\"getItemIcon(item)\"\n            [class]=\"'file-icon file-icon-' + item.type\" />\n          <span class=\"file-name\">{{ item.name }}</span>\n\n          <!-- ZFS badge -->\n          @if (isZfsObject(item)) {\n            <span\n              [class]=\"'zfs-badge zfs-badge-' + item.type\">\n              {{ getZfsBadge(item) }}\n            </span>\n          }\n\n          <!-- Permission indicator -->\n          @if (item.permissions === 'none') {\n            <tn-icon\n              name=\"lock\"\n              library=\"mdi\"\n              class=\"permission-icon\" />\n          }\n\n          <!-- Navigation affordance: single click opens the directory -->\n          @if (isNavigatable(item)) {\n            <button\n              type=\"button\"\n              class=\"navigate-button\"\n              tnTestIdType=\"button\"\n              [tnTestId]=\"navigateTestId(item)\"\n              [attr.aria-label]=\"'Open ' + item.name\"\n              [attr.title]=\"'Open ' + item.name\"\n              (click)=\"onNavigateClick($event, item)\"\n              (dblclick)=\"$event.stopPropagation()\">\n              <tn-icon name=\"mdi-chevron-right\" size=\"sm\" />\n            </button>\n          }\n        </div>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Size column -->\n    <ng-container tnColumnDef=\"size\">\n      <ng-template tnHeaderCellDef>Size</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.size !== undefined) {\n          <span>{{ item.size | tnFileSize }}</span>\n        }\n        @if (item.size === undefined && item.type === 'folder') {\n          <span class=\"folder-indicator\">--</span>\n        }\n      </ng-template>\n    </ng-container>\n\n    <!-- Modified column -->\n    <ng-container tnColumnDef=\"modified\">\n      <ng-template tnHeaderCellDef>Modified</ng-template>\n      <ng-template let-item tnCellDef>\n        @if (item.modified) {\n          <span>{{ formatDate(item.modified) }}</span>\n        }\n      </ng-template>\n    </ng-container>\n\n\n  </tn-table>\n\n  <!-- Empty state -->\n  @if (filteredFileItems().length === 0) {\n    <div class=\"empty-state\">\n      <tn-icon name=\"folder-open\" library=\"mdi\" customSize=\"48px\" />\n      <p>No items found</p>\n    </div>\n  }\n  </div>\n}\n\n<!-- Footer -->\n@if (!loading()) {\n  <div class=\"tn-file-picker-footer\">\n    <div class=\"footer-selection\">\n      @if (selectedItems().length > 0) {\n        <span class=\"selection-count\">\n          {{ selectedItems().length }} item{{ selectedItems().length !== 1 ? 's' : '' }} selected\n        </span>\n        <tn-button\n          variant=\"outline\"\n          label=\"Clear Selection\"\n          [testId]=\"clearSelectionTestId()\"\n          (onClick)=\"onClearSelection()\" />\n      } @else if (allowCurrentDirectorySelection()) {\n        <span class=\"selection-count current-directory-selection\">\n          Current directory selected\n        </span>\n      } @else {\n        <span class=\"selection-count\">\n          No items selected\n        </span>\n      }\n    </div>\n    <div class=\"footer-actions\">\n      @for (action of createActions(); track action.id) {\n        <tn-button\n          variant=\"outline\"\n          [label]=\"action.label\"\n          [testId]=\"createActionTestId(action)\"\n          [disabled]=\"!!inlineCreation()\"\n          (onClick)=\"onCreateAction(action)\" />\n      }\n      <!-- Disabled while the inline creation row is open: its blur auto-submit\n           would race the selection submit -->\n      <tn-button\n        label=\"Select\"\n        [testId]=\"selectTestId()\"\n        [disabled]=\"(selectedItems().length === 0 && !allowCurrentDirectorySelection()) || !!inlineCreation()\"\n        (onClick)=\"onSubmit()\" />\n    </div>\n  </div>\n}", styles: [":host{display:block;background:var(--tn-bg1, white);color:var(--tn-fg1, #333);padding:0;box-shadow:0 4px 16px #0000001f,0 1px 4px #00000014;border-radius:8px;border:1px solid var(--tn-lines, #e0e0e0);width:520px;max-width:calc(100vw - 32px);min-height:min(500px,100vh - 16px);max-height:min(600px,100vh - 16px);font-family:var(--tn-font-family-body);display:flex;flex-direction:column;overflow:hidden}.tn-file-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--tn-content-padding, 24px);padding-bottom:16px;border-bottom:1px solid var(--tn-lines)}.tn-file-picker-breadcrumb{display:flex;align-items:center;flex:1;min-width:0}.tn-file-picker-breadcrumb .breadcrumb-segment{background:transparent;border:none;color:var(--tn-primary-text, var(--tn-primary, #0074a7));cursor:pointer;padding:4px 2px;border-radius:4px;font-size:1rem;white-space:nowrap;transition:background-color .15s ease-in-out}.tn-file-picker-breadcrumb .breadcrumb-segment:hover:not(:disabled){background:var(--tn-bg2)}.tn-file-picker-breadcrumb .breadcrumb-segment:disabled,.tn-file-picker-breadcrumb .breadcrumb-segment.current{color:var(--tn-fg1);cursor:default;font-weight:500}.tn-file-picker-breadcrumb .breadcrumb-segment:not(:last-child):after{content:\"/\";margin-left:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment:first-child:before{content:\"/\";margin-right:2px;color:var(--tn-alt-fg1)}.tn-file-picker-breadcrumb .breadcrumb-segment.nameless:not(:last-child):after{content:none}.tn-file-picker-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--tn-fg2)}.tn-file-picker-loading tn-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tn-file-picker-content{flex:1;min-height:0;overflow-y:auto}.inline-create-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.inline-create-row{display:flex;align-items:center;gap:8px}.inline-create-row .inline-create-input{flex:1;padding:4px 8px;border:2px solid var(--tn-primary);border-radius:3px;background:var(--tn-bg1);color:var(--tn-fg1);font-size:inherit;font-family:inherit;outline:none;min-width:0}.inline-create-row .inline-create-input.error{border-color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-row .inline-create-input:disabled{opacity:.6;cursor:not-allowed;background:var(--tn-bg2)}.inline-create-row .creation-loading-icon{animation:spin 1s linear infinite;color:var(--tn-primary);flex-shrink:0}.inline-create-error{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 8px;background:color-mix(in srgb,var(--tn-error, var(--tn-red, #bd2626)) 10%,transparent);border-left:3px solid var(--tn-error, var(--tn-red, #bd2626));border-radius:3px;font-size:1rem;color:var(--tn-error, var(--tn-red, #bd2626))}.inline-create-error .error-icon{flex-shrink:0}.inline-create-error .error-text{flex:1}.file-list-viewport{width:100%;height:100%}.file-list-viewport .cdk-virtual-scroll-content-wrapper{width:100%}tn-table{width:100%}tn-table th,tn-table .tn-table__header-cell{font-weight:600;padding:12px 16px;border-bottom:2px solid var(--tn-lines)}tn-table td,tn-table .tn-table__cell{padding:8px 16px;border-bottom:1px solid var(--tn-lines)}.file-name-cell{display:flex;align-items:center;gap:8px;cursor:pointer}.file-name-cell.disabled{opacity:.5;color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-name{color:var(--tn-fg2, #757575)}.file-name-cell.disabled .file-icon{opacity:.6}.file-name-cell.disabled:has(.file-icon-folder),.file-name-cell.disabled:has(.file-icon-dataset),.file-name-cell.disabled:has(.file-icon-mountpoint){cursor:pointer}.file-name-cell.disabled:not(:has(.file-icon-folder)):not(:has(.file-icon-dataset)):not(:has(.file-icon-mountpoint)){cursor:not-allowed}.file-icon{display:flex;align-items:center;justify-content:center;font-size:var(--tn-icon-md, 20px);flex-shrink:0;line-height:1}.file-icon.file-icon-folder{color:var(--tn-primary)}.file-icon.file-icon-dataset{color:var(--tn-blue, #007db3)}.file-icon.file-icon-zvol{color:var(--tn-green, #71BF44)}.file-icon.file-icon-mountpoint{color:var(--tn-orange, #E68D37)}.file-name{flex:1;font-weight:500;line-height:1.4}.zfs-badge{display:inline-flex;align-items:center;background:var(--tn-alt-bg2);color:var(--tn-alt-fg2);font-size:.625rem;font-weight:600;padding:2px 6px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1}.zfs-badge.zfs-badge-dataset{background:var(--tn-blue);color:#fff}.zfs-badge.zfs-badge-zvol{background:var(--tn-green);color:#fff}.zfs-badge.zfs-badge-mountpoint{background:var(--tn-orange);color:#fff}.permission-icon{display:flex;align-items:center;justify-content:center;color:var(--tn-red);font-size:var(--tn-icon-sm, 16px);line-height:1}.navigate-button{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;background:none;border:none;border-radius:4px;color:var(--tn-fg2);cursor:pointer}.navigate-button:hover,.navigate-button:focus-visible{background:var(--tn-bg3);color:var(--tn-primary)}.file-type{font-size:1rem;padding:2px 8px;border-radius:12px}.file-type.type-folder{background:var(--tn-alt-bg1);color:var(--tn-alt-fg2)}.file-type.type-file{background:var(--tn-bg2);color:var(--tn-fg2)}.file-type.type-dataset{background:#007db31a;color:var(--tn-blue)}.file-type.type-zvol{background:#71bf441a;color:var(--tn-green)}.file-type.type-mountpoint{background:#e68d371a;color:var(--tn-orange)}.folder-indicator{color:var(--tn-alt-fg1);font-style:italic}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--tn-alt-fg1);text-align:center}.empty-state tn-icon{margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:1rem}.tn-file-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--tn-content-padding, 24px);border-top:1px solid var(--tn-lines);background:var(--tn-bg2);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tn-file-picker-footer .footer-selection{display:flex;align-items:center;gap:12px}.selection-count{font-size:1rem;color:var(--tn-fg2);font-weight:500}.footer-actions{display:flex;gap:8px}@media(prefers-reduced-motion:reduce){.file-item,.breadcrumb-segment{transition:none}.tn-file-picker-loading tn-icon{animation:none}}@media(prefers-contrast:high){:host{border-width:2px}.file-item:hover,.file-item.selected{border:2px solid var(--tn-fg1)}.zfs-badge{border:1px solid var(--tn-fg1)}}@media(max-width:768px){:host{min-width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px)}.tn-file-picker-header{flex-direction:column;gap:12px;align-items:stretch}.tn-file-picker-breadcrumb{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tn-file-picker-breadcrumb::-webkit-scrollbar{display:none}.file-item{padding:12px;min-height:56px}.file-info{font-size:1rem}}\n"], dependencies: [{ kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "component", type: TnTableComponent, selector: "tn-table", inputs: ["dataSource", "displayedColumns", "trackBy", "selectionKey", "emptyMessage", "emptyDescription", "emptyIcon", "scrollRegionAriaLabel", "selectable", "expandable", "bordered", "isRowExpandable", "activeRow", "activeWhen", "activeBg", "activeIndicator", "loading", "loadingMessage", "clickable", "expandOnRowClick", "singleExpand", "fixedLayout", "minColumnWidth", "minWidth", "mobileLayout", "cardBreakpoint", "cardPrimaryCount", "sortColumn", "sortDirection"], outputs: ["sortChange", "selectionChange", "rowClick", "rowDoubleClick", "sortColumnChange", "sortDirectionChange"] }, { kind: "directive", type: TnTableColumnDirective, selector: "[tnColumnDef]", inputs: ["tnColumnDef", "sortable", "width", "label", "hideLabel", "cardPriority", "cardTitle", "cardHidden", "cardLabel"], exportAs: ["tnColumnDef"] }, { kind: "directive", type: TnHeaderCellDefDirective, selector: "[tnHeaderCellDef]" }, { kind: "directive", type: TnCellDefDirective, selector: "[tnCellDef]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: FileSizePipe, name: "tnFileSize" }, { kind: "pipe", type: TruncatePathPipe, name: "tnTruncatePath" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnFilePickerPopupComponent, decorators: [{
             type: Component,
@@ -28616,5 +29870,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_CHIP_INPUT_DEFAULT_LABELS, TN_CHIP_INPUT_LABELS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, createTnOptionsDataSource, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map