@truenas/ui-components 0.1.58 → 0.1.59

package/fesm2022/truenas-ui-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, output, viewChild, signal, computed, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, DestroyRef, IterableDiffers, Pipe, untracked, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
-import * as i1$3 from '@angular/forms';
+import { InjectionToken, inject, Renderer2, ElementRef, input, effect, Directive, output, viewChild, signal, computed, forwardRef, Component, model, afterNextRender, ChangeDetectionStrategy, Injectable, isDevMode, ViewEncapsulation, contentChildren, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, DestroyRef, isSignal, untracked, IterableDiffers, Pipe, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
@@ -20,7 +20,7 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
 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 { SelectionModel, DataSource } from '@angular/cdk/collections';
-import * as i2 from '@angular/cdk/tree';
+import * as i2$1 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
@@ -5255,43 +5255,144 @@ class TnSelectComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionGroups = input([], ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
     placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * Accessible label for the select trigger. When set, this is used as the
+     * trigger's `aria-label` instead of the visible `placeholder` — useful in
+     * contexts (e.g. a pager's page-size dropdown) where the placeholder text
+     * doesn't accurately describe the field's purpose to screen readers.
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Message shown inside the dropdown when no options (and no option groups)
+     * are available. Defaults to the English `'No options available'`; consumers
+     * with i18n requirements can pass a translated string.
+     */
+    noOptionsLabel = input('No options available', ...(ngDevMode ? [{ debugName: "noOptionsLabel" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /**
+     * Custom comparator for matching option values against the selected value(s).
+     *
+     * When the option values are objects, **provide this** — the built-in
+     * fallback uses `JSON.stringify`, which is key-order dependent and can
+     * produce false negatives for structurally equal objects. For primitives the
+     * default identity check is fine.
+     */
     compareWith = input(...(ngDevMode ? [undefined, { debugName: "compareWith" }] : []));
     selectionChange = output();
     /** Emits the full array of selected values after each toggle in multiple mode. */
     multiSelectionChange = output();
     // Internal state signals
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    dropdownPosition = signal('below', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
     selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
     selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    /** Index into `flatOptions` of the keyboard-focused row (-1 when none). */
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    // Name of the CSS custom property that defines the dropdown's max-height
+    // (set in select.component.scss). Reading it via getComputedStyle keeps the
+    // flip-up heuristic in sync with the stylesheet — no duplicated constant.
+    static DROPDOWN_MAX_HEIGHT_VAR = '--tn-select-dropdown-max-height';
+    // Fallback used when getComputedStyle can't resolve the variable (older
+    // browsers, jsdom in some test configs).
+    static DROPDOWN_MAX_HEIGHT_FALLBACK = 200;
+    // Per-instance suffix used to namespace DOM ids when `testId` is empty.
+    // Without this, two `<tn-select>` elements with no testId would emit
+    // colliding option/dropdown/group ids, breaking aria-activedescendant.
+    // A random suffix is preferred over a monotonic counter so id values stay
+    // stable from test file to test file (a counter would grow unpredictably
+    // across suites and break snapshot tests).
+    fallbackId = `auto-${Math.random().toString(36).slice(2, 10)}`;
+    uniqueId = computed(() => this.testId() || this.fallbackId, ...(ngDevMode ? [{ debugName: "uniqueId" }] : []));
     // Computed disabled state (combines input and form state)
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /**
+     * Flattened option list (ungrouped + grouped, in render order). The keyboard
+     * navigation walks this list — entries from disabled groups are kept but
+     * marked disabled so the cursor skips over them correctly.
+     */
+    flatOptions = computed(() => {
+        const flat = [...this.options()];
+        for (const group of this.optionGroups()) {
+            for (const opt of group.options) {
+                flat.push({ ...opt, disabled: opt.disabled || group.disabled });
+            }
+        }
+        return flat;
+    }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : []));
+    /**
+     * Starting flat-index of each option group, used by the template to
+     * translate a (group, option) pair into the matching `flatOptions` index.
+     */
+    groupOffsets = computed(() => {
+        const offsets = [];
+        let offset = this.options().length;
+        for (const group of this.optionGroups()) {
+            offsets.push(offset);
+            offset += group.options.length;
+        }
+        return offsets;
+    }, ...(ngDevMode ? [{ debugName: "groupOffsets" }] : []));
+    /** `aria-activedescendant` id for the focused option (or null). */
+    activeOptionId = computed(() => {
+        const idx = this.focusedIndex();
+        if (idx < 0 || !this.isOpen()) {
+            return null;
+        }
+        return this.optionId(idx);
+    }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
     onChange = (_value) => { };
     onTouched = () => { };
     elementRef = inject(ElementRef);
     cdr = inject(ChangeDetectorRef);
+    triggerEl = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
     constructor() {
-        // Click-outside detection using effect
+        // Click-outside detection. Cleanup is registered via the `onCleanup`
+        // callback (returning a function from `effect()` does *not* register one) —
+        // which fires both when the effect re-runs and when the component's
+        // injector is destroyed, so the listener is removed even if the host is
+        // torn down while the dropdown is still open. The `disposed` flag prevents
+        // the listener from being attached at all if teardown races the deferred
+        // setTimeout — without it, a cleanup that fires between the timeout firing
+        // and addEventListener executing could leak a permanent listener.
+        effect((onCleanup) => {
+            if (!this.isOpen()) {
+                return;
+            }
+            let disposed = false;
+            const clickListener = (event) => {
+                if (!this.elementRef.nativeElement.contains(event.target)) {
+                    // Click outside → close, but don't steal focus from whatever the
+                    // user clicked on.
+                    this.closeDropdown({ restoreFocus: false });
+                }
+            };
+            // Deferred so the click that opened the dropdown doesn't immediately
+            // close it on its bubble back up to the document.
+            const timeoutId = setTimeout(() => {
+                if (disposed) {
+                    return;
+                }
+                document.addEventListener('click', clickListener);
+            }, 0);
+            onCleanup(() => {
+                disposed = true;
+                clearTimeout(timeoutId);
+                document.removeEventListener('click', clickListener);
+            });
+        });
+        // When the dropdown opens, scroll the focused option into view.
         effect(() => {
-            if (this.isOpen()) {
-                const clickListener = (event) => {
-                    if (!this.elementRef.nativeElement.contains(event.target)) {
-                        this.closeDropdown();
-                    }
-                };
-                // Add listener after a small delay to avoid immediate closure
-                setTimeout(() => {
-                    document.addEventListener('click', clickListener);
-                }, 0);
-                // Cleanup function
-                return () => {
-                    document.removeEventListener('click', clickListener);
-                };
+            if (!this.isOpen()) {
+                return;
             }
-            return undefined;
+            const idx = this.focusedIndex();
+            if (idx < 0) {
+                return;
+            }
+            queueMicrotask(() => this.scrollFocusedIntoView());
         });
     }
     // ControlValueAccessor implementation
@@ -5322,14 +5423,107 @@ class TnSelectComponent {
         if (this.isDisabled()) {
             return;
         }
-        this.isOpen.set(!this.isOpen());
-        if (!this.isOpen()) {
-            this.onTouched();
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
         }
     }
-    closeDropdown() {
+    /**
+     * Open the dropdown, seed the keyboard cursor on the currently-selected
+     * option (or the first focusable one), and decide whether to flip up.
+     */
+    openDropdown() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.dropdownPosition.set(this.computeDropdownPosition());
+        this.isOpen.set(true);
+        this.focusedIndex.set(this.initialFocusIndex());
+    }
+    /**
+     * Close the dropdown.
+     *
+     * @param restoreFocus When `true` (default), return focus to the trigger so
+     *   keyboard users land somewhere sensible. Pass `false` for click-outside
+     *   so we don't steal focus from the element the user just navigated to.
+     */
+    closeDropdown(options = {}) {
+        const restoreFocus = options.restoreFocus ?? true;
+        if (!this.isOpen()) {
+            return;
+        }
         this.isOpen.set(false);
+        this.focusedIndex.set(-1);
         this.onTouched();
+        if (restoreFocus) {
+            this.triggerEl()?.nativeElement.focus({ preventScroll: true });
+        }
+    }
+    /** Picks the initial focused-row index when the dropdown opens. */
+    initialFocusIndex() {
+        const flat = this.flatOptions();
+        if (flat.length === 0) {
+            return -1;
+        }
+        // Prefer the currently selected option (or first selected in multi mode).
+        if (this.multiple()) {
+            const values = this.selectedValues();
+            if (values.length > 0) {
+                const idx = flat.findIndex((opt) => values.some((v) => this.compareValues(v, opt.value)));
+                if (idx >= 0 && !flat[idx].disabled) {
+                    return idx;
+                }
+            }
+        }
+        else {
+            const value = this.selectedValue();
+            if (value !== null && value !== undefined) {
+                const idx = flat.findIndex((opt) => this.compareValues(opt.value, value));
+                if (idx >= 0 && !flat[idx].disabled) {
+                    return idx;
+                }
+            }
+        }
+        // Otherwise the first non-disabled option.
+        return flat.findIndex((opt) => !opt.disabled);
+    }
+    /**
+     * Decide whether the dropdown should open above or below the trigger.
+     * Opens above when there isn't enough space below the trigger AND there is
+     * more space above — otherwise stays below. Falls back to `'below'` when no
+     * trigger element is found yet.
+     */
+    computeDropdownPosition() {
+        if (typeof window === 'undefined') {
+            return 'below';
+        }
+        const trigger = this.elementRef.nativeElement.querySelector('.tn-select-trigger');
+        if (!trigger) {
+            return 'below';
+        }
+        const rect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        if (spaceBelow < this.readDropdownMaxHeight(trigger) && spaceAbove > spaceBelow) {
+            return 'above';
+        }
+        return 'below';
+    }
+    /**
+     * Reads the dropdown's max-height from the CSS custom property set in
+     * select.component.scss. Single source of truth for the flip-up threshold —
+     * if the stylesheet changes, the heuristic follows automatically.
+     */
+    readDropdownMaxHeight(trigger) {
+        const raw = getComputedStyle(trigger)
+            .getPropertyValue(TnSelectComponent.DROPDOWN_MAX_HEIGHT_VAR)
+            .trim();
+        const parsed = parseFloat(raw);
+        return Number.isFinite(parsed) && parsed > 0
+            ? parsed
+            : TnSelectComponent.DROPDOWN_MAX_HEIGHT_FALLBACK;
     }
     onOptionClick(option, groupDisabled = false) {
         if (option.disabled || groupDisabled) {
@@ -5373,7 +5567,11 @@ class TnSelectComponent {
         }
         return this.compareValues(this.selectedValue(), option.value);
     }
-    getDisplayText = computed(() => {
+    /** Build a stable DOM id for the option at `index` for aria-activedescendant. */
+    optionId(index) {
+        return `tn-select-${this.uniqueId()}-option-${index}`;
+    }
+    displayText = computed(() => {
         if (this.multiple()) {
             const values = this.selectedValues();
             if (values.length === 0) {
@@ -5390,7 +5588,7 @@ class TnSelectComponent {
         }
         const option = this.findOptionByValue(value);
         return option ? option.label : String(value);
-    }, ...(ngDevMode ? [{ debugName: "getDisplayText" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
     findOptionByValue(value) {
         // Search in regular options first
         const regularOption = this.options().find(opt => this.compareValues(opt.value, value));
@@ -5406,9 +5604,15 @@ class TnSelectComponent {
         }
         return undefined;
     }
-    hasAnyOptions = computed(() => {
+    anyOptionsPresent = computed(() => {
         return this.options().length > 0 || this.optionGroups().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasAnyOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "anyOptionsPresent" }] : []));
+    /**
+     * Compares two option values for equality. Uses `compareWith` if provided,
+     * otherwise identity (`===`). For object values it falls back to
+     * `JSON.stringify`, which is key-order dependent — consumers with object
+     * values should provide `compareWith` to avoid subtle bugs.
+     */
     compareValues(a, b) {
         const customCompare = this.compareWith();
         if (customCompare) {
@@ -5422,17 +5626,31 @@ class TnSelectComponent {
         }
         return false;
     }
-    // Keyboard navigation
-    // TODO: Add ArrowUp/ArrowDown option navigation, Enter/Space toggle,
-    // and aria-activedescendant tracking for full keyboard accessibility.
+    /**
+     * Keyboard handling on the trigger (focus stays on the trigger while the
+     * dropdown is open — options use mousedown-preventDefault to avoid stealing
+     * it). Implements the WAI-ARIA combobox pattern subset we need:
+     *
+     * - **Enter / Space**: open closed dropdown, or select the focused row
+     *   (toggle in multi-mode).
+     * - **ArrowDown / ArrowUp**: move the focused row; opens the dropdown first
+     *   if it's closed.
+     * - **Home / End**: jump to first / last focusable row (when open).
+     * - **Escape**: close and restore focus to the trigger.
+     * - **Tab**: close without preventing default so focus moves to the next
+     *   element naturally.
+     */
     onKeydown(event) {
         switch (event.key) {
             case 'Enter':
             case ' ':
-                if (!this.isOpen()) {
-                    this.toggleDropdown();
-                    event.preventDefault();
+                if (this.isOpen()) {
+                    this.selectFocused();
+                }
+                else {
+                    this.openDropdown();
                 }
+                event.preventDefault();
                 break;
             case 'Escape':
                 if (this.isOpen()) {
@@ -5442,20 +5660,114 @@ class TnSelectComponent {
                 break;
             case 'ArrowDown':
                 if (!this.isOpen()) {
-                    this.toggleDropdown();
+                    this.openDropdown();
+                }
+                else {
+                    this.moveFocus(1);
                 }
                 event.preventDefault();
                 break;
+            case 'ArrowUp':
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                }
+                else {
+                    this.moveFocus(-1);
+                }
+                event.preventDefault();
+                break;
+            case 'Home':
+                if (this.isOpen()) {
+                    this.moveFocusTo(0, 1);
+                    event.preventDefault();
+                }
+                break;
+            case 'End':
+                if (this.isOpen()) {
+                    this.moveFocusTo(this.flatOptions().length - 1, -1);
+                    event.preventDefault();
+                }
+                break;
+            case 'Tab':
+                // Let the browser move focus to the next element; just close.
+                if (this.isOpen()) {
+                    this.closeDropdown({ restoreFocus: false });
+                }
+                break;
+        }
+    }
+    /** Step the focused row by ±1 (or more), skipping disabled options. */
+    moveFocus(delta) {
+        const flat = this.flatOptions();
+        if (flat.length === 0) {
+            return;
+        }
+        let idx = this.focusedIndex();
+        for (let i = 0; i < flat.length; i++) {
+            idx = (idx + delta + flat.length) % flat.length;
+            if (!flat[idx].disabled) {
+                this.focusedIndex.set(idx);
+                this.scrollFocusedIntoView();
+                return;
+            }
+        }
+    }
+    /** Move focus to a specific index, scanning forward/backward to skip disabled. */
+    moveFocusTo(start, step) {
+        const flat = this.flatOptions();
+        if (flat.length === 0) {
+            return;
+        }
+        let idx = start;
+        while (idx >= 0 && idx < flat.length) {
+            if (!flat[idx].disabled) {
+                this.focusedIndex.set(idx);
+                this.scrollFocusedIntoView();
+                return;
+            }
+            idx += step;
+        }
+    }
+    /** Select (or toggle, in multi-mode) the currently keyboard-focused row. */
+    selectFocused() {
+        const idx = this.focusedIndex();
+        const flat = this.flatOptions();
+        if (idx < 0 || idx >= flat.length) {
+            return;
+        }
+        const opt = flat[idx];
+        if (opt.disabled) {
+            return;
+        }
+        if (this.multiple()) {
+            this.toggleOption(opt);
+        }
+        else {
+            this.selectOption(opt);
         }
     }
+    /** Scrolls the keyboard-focused option into view if it's outside the dropdown's viewport. */
+    scrollFocusedIntoView() {
+        const idx = this.focusedIndex();
+        if (idx < 0) {
+            return;
+        }
+        const host = this.elementRef.nativeElement;
+        // Use attribute-equality instead of #id selectors so we don't need
+        // CSS.escape (unavailable in jsdom for tests) — option ids may contain
+        // characters that require escaping in #id form.
+        const el = host.querySelector(`[id="${this.optionId(idx)}"]`);
+        // jsdom doesn't implement scrollIntoView — guard so tests don't crash.
+        el?.scrollIntoView?.({ block: 'nearest' });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", 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 }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"tn-select-container\" [tnTestId]=\"testId()\">\n  <!-- Select Trigger -->\n  <div\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n    [attr.aria-label]=\"placeholder()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ getDisplayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      class=\"tn-select-dropdown\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n      <!-- Options List -->\n      <div class=\"tn-select-options\">\n        <!-- Regular Options -->\n        @for (option of options(); track $index) {\n          <div\n            class=\"tn-select-option\"\n            role=\"option\"\n            [attr.tabindex]=\"option.disabled ? null : 0\"\n            [class.selected]=\"isOptionSelected(option)\"\n            [class.disabled]=\"option.disabled\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\"\n            (keydown.space)=\"onOptionClick(option)\">\n            @if (multiple()) {\n              <tn-checkbox\n                class=\"tn-select-check\"\n                label=\"\"\n                [checked]=\"isOptionSelected(option)\"\n                [disabled]=\"true\"\n                [hideLabel]=\"true\" />\n            }\n            {{ option.label }}\n          </div>\n        }\n\n        <!-- Option Groups -->\n        @for (group of optionGroups(); track $index; let isFirst = $first) {\n          <!-- Group Separator (not shown before first group if we have regular options) -->\n          @if (!isFirst || options().length > 0) {\n            <div\n              class=\"tn-select-separator\"\n              role=\"separator\">\n            </div>\n          }\n\n          <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + testId() + '-' + $index\">\n            <!-- Group Label -->\n            <div\n              class=\"tn-select-group-label\"\n              [attr.id]=\"'tn-select-group-' + testId() + '-' + $index\"\n              [class.disabled]=\"group.disabled\">\n              {{ group.label }}\n            </div>\n\n            <!-- Group Options -->\n            @for (option of group.options; track $index) {\n              <div\n                class=\"tn-select-option\"\n                role=\"option\"\n                [attr.tabindex]=\"option.disabled || group.disabled ? null : 0\"\n                [class.selected]=\"isOptionSelected(option)\"\n                [class.disabled]=\"option.disabled || group.disabled\"\n                [attr.aria-selected]=\"isOptionSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled || group.disabled\"\n                (mousedown)=\"$event.preventDefault()\"\n                (click)=\"onOptionClick(option, !!group.disabled)\"\n                (keydown.enter)=\"onOptionClick(option, !!group.disabled)\"\n                (keydown.space)=\"onOptionClick(option, !!group.disabled)\">\n                @if (multiple()) {\n                  <tn-checkbox\n                    class=\"tn-select-check\"\n                    label=\"\"\n                    [checked]=\"isOptionSelected(option)\"\n                    [disabled]=\"true\"\n                    [hideLabel]=\"true\" />\n                }\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- No Options Message -->\n        @if (!hasAnyOptions()) {\n          <div class=\"tn-select-no-options\">\n            No options available\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;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;max-height:200px;overflow:hidden}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:200px}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa)!important;color:var(--tn-fg1, #212529)}.tn-select-option.selected:hover{background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-select-container\" [tnTestId]=\"testId()\">\n  <!-- Select Trigger -->\n  <div\n    #trigger\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + uniqueId() : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      class=\"tn-select-dropdown\"\n      role=\"listbox\"\n      [class.tn-select-dropdown--above]=\"dropdownPosition() === 'above'\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [attr.id]=\"'tn-select-dropdown-' + uniqueId()\">\n\n      <!-- Options List -->\n      <!-- Options follow the WAI-ARIA combobox pattern: focus stays on the\n           trigger, navigation is via the trigger's keydown handler and\n           aria-activedescendant. Options handle click only, by design \u2014 they\n           must not steal focus on mousedown. -->\n      <div class=\"tn-select-options\">\n        <!-- Regular Options -->\n        @for (option of options(); track $index; let i = $index) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"tn-select-option\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [class.selected]=\"isOptionSelected(option)\"\n            [class.disabled]=\"option.disabled\"\n            [class.focused]=\"focusedIndex() === i\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\">\n            @if (multiple()) {\n              <tn-checkbox\n                class=\"tn-select-check\"\n                label=\"\"\n                [checked]=\"isOptionSelected(option)\"\n                [disabled]=\"true\"\n                [hideLabel]=\"true\" />\n            }\n            {{ option.label }}\n          </div>\n        }\n\n        <!-- Option Groups -->\n        @for (group of optionGroups(); track $index; let groupIdx = $index; let isFirst = $first) {\n          <!-- Group Separator (not shown before first group if we have regular options) -->\n          @if (!isFirst || options().length > 0) {\n            <div\n              class=\"tn-select-separator\"\n              role=\"separator\">\n            </div>\n          }\n\n          <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + uniqueId() + '-' + groupIdx\">\n            <!-- Group Label -->\n            <div\n              class=\"tn-select-group-label\"\n              [attr.id]=\"'tn-select-group-' + uniqueId() + '-' + groupIdx\"\n              [class.disabled]=\"group.disabled\">\n              {{ group.label }}\n            </div>\n\n            <!-- Group Options -->\n            @for (option of group.options; track $index; let optIdx = $index) {\n              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n              <div\n                class=\"tn-select-option\"\n                role=\"option\"\n                [id]=\"optionId(groupOffsets()[groupIdx] + optIdx)\"\n                [class.selected]=\"isOptionSelected(option)\"\n                [class.disabled]=\"option.disabled || group.disabled\"\n                [class.focused]=\"focusedIndex() === groupOffsets()[groupIdx] + optIdx\"\n                [attr.aria-selected]=\"isOptionSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled || group.disabled\"\n                (mousedown)=\"$event.preventDefault()\"\n                (click)=\"onOptionClick(option, !!group.disabled)\">\n                @if (multiple()) {\n                  <tn-checkbox\n                    class=\"tn-select-check\"\n                    label=\"\"\n                    [checked]=\"isOptionSelected(option)\"\n                    [disabled]=\"true\"\n                    [hideLabel]=\"true\" />\n                }\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- No Options Message -->\n        @if (!anyOptionsPresent()) {\n          <div class=\"tn-select-no-options\">\n            {{ noOptionsLabel() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;--tn-select-dropdown-max-height: 200px}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;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;max-height:var(--tn-select-dropdown-max-height);overflow:hidden}.tn-select-dropdown--above{top:auto;bottom:100%;margin-top:0;margin-bottom:.25rem}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg1, #f1f3f5);outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, decorators: [{
             type: Component,
@@ -5465,8 +5777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"tn-select-container\" [tnTestId]=\"testId()\">\n  <!-- Select Trigger -->\n  <div\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n    [attr.aria-label]=\"placeholder()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ getDisplayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      class=\"tn-select-dropdown\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n      <!-- Options List -->\n      <div class=\"tn-select-options\">\n        <!-- Regular Options -->\n        @for (option of options(); track $index) {\n          <div\n            class=\"tn-select-option\"\n            role=\"option\"\n            [attr.tabindex]=\"option.disabled ? null : 0\"\n            [class.selected]=\"isOptionSelected(option)\"\n            [class.disabled]=\"option.disabled\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\"\n            (keydown.space)=\"onOptionClick(option)\">\n            @if (multiple()) {\n              <tn-checkbox\n                class=\"tn-select-check\"\n                label=\"\"\n                [checked]=\"isOptionSelected(option)\"\n                [disabled]=\"true\"\n                [hideLabel]=\"true\" />\n            }\n            {{ option.label }}\n          </div>\n        }\n\n        <!-- Option Groups -->\n        @for (group of optionGroups(); track $index; let isFirst = $first) {\n          <!-- Group Separator (not shown before first group if we have regular options) -->\n          @if (!isFirst || options().length > 0) {\n            <div\n              class=\"tn-select-separator\"\n              role=\"separator\">\n            </div>\n          }\n\n          <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + testId() + '-' + $index\">\n            <!-- Group Label -->\n            <div\n              class=\"tn-select-group-label\"\n              [attr.id]=\"'tn-select-group-' + testId() + '-' + $index\"\n              [class.disabled]=\"group.disabled\">\n              {{ group.label }}\n            </div>\n\n            <!-- Group Options -->\n            @for (option of group.options; track $index) {\n              <div\n                class=\"tn-select-option\"\n                role=\"option\"\n                [attr.tabindex]=\"option.disabled || group.disabled ? null : 0\"\n                [class.selected]=\"isOptionSelected(option)\"\n                [class.disabled]=\"option.disabled || group.disabled\"\n                [attr.aria-selected]=\"isOptionSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled || group.disabled\"\n                (mousedown)=\"$event.preventDefault()\"\n                (click)=\"onOptionClick(option, !!group.disabled)\"\n                (keydown.enter)=\"onOptionClick(option, !!group.disabled)\"\n                (keydown.space)=\"onOptionClick(option, !!group.disabled)\">\n                @if (multiple()) {\n                  <tn-checkbox\n                    class=\"tn-select-check\"\n                    label=\"\"\n                    [checked]=\"isOptionSelected(option)\"\n                    [disabled]=\"true\"\n                    [hideLabel]=\"true\" />\n                }\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- No Options Message -->\n        @if (!hasAnyOptions()) {\n          <div class=\"tn-select-no-options\">\n            No options available\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;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;max-height:200px;overflow:hidden}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:200px}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa)!important;color:var(--tn-fg1, #212529)}.tn-select-option.selected:hover{background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-select-container\" [tnTestId]=\"testId()\">\n  <!-- Select Trigger -->\n  <div\n    #trigger\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + uniqueId() : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      class=\"tn-select-dropdown\"\n      role=\"listbox\"\n      [class.tn-select-dropdown--above]=\"dropdownPosition() === 'above'\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [attr.id]=\"'tn-select-dropdown-' + uniqueId()\">\n\n      <!-- Options List -->\n      <!-- Options follow the WAI-ARIA combobox pattern: focus stays on the\n           trigger, navigation is via the trigger's keydown handler and\n           aria-activedescendant. Options handle click only, by design \u2014 they\n           must not steal focus on mousedown. -->\n      <div class=\"tn-select-options\">\n        <!-- Regular Options -->\n        @for (option of options(); track $index; let i = $index) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"tn-select-option\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [class.selected]=\"isOptionSelected(option)\"\n            [class.disabled]=\"option.disabled\"\n            [class.focused]=\"focusedIndex() === i\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\">\n            @if (multiple()) {\n              <tn-checkbox\n                class=\"tn-select-check\"\n                label=\"\"\n                [checked]=\"isOptionSelected(option)\"\n                [disabled]=\"true\"\n                [hideLabel]=\"true\" />\n            }\n            {{ option.label }}\n          </div>\n        }\n\n        <!-- Option Groups -->\n        @for (group of optionGroups(); track $index; let groupIdx = $index; let isFirst = $first) {\n          <!-- Group Separator (not shown before first group if we have regular options) -->\n          @if (!isFirst || options().length > 0) {\n            <div\n              class=\"tn-select-separator\"\n              role=\"separator\">\n            </div>\n          }\n\n          <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + uniqueId() + '-' + groupIdx\">\n            <!-- Group Label -->\n            <div\n              class=\"tn-select-group-label\"\n              [attr.id]=\"'tn-select-group-' + uniqueId() + '-' + groupIdx\"\n              [class.disabled]=\"group.disabled\">\n              {{ group.label }}\n            </div>\n\n            <!-- Group Options -->\n            @for (option of group.options; track $index; let optIdx = $index) {\n              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n              <div\n                class=\"tn-select-option\"\n                role=\"option\"\n                [id]=\"optionId(groupOffsets()[groupIdx] + optIdx)\"\n                [class.selected]=\"isOptionSelected(option)\"\n                [class.disabled]=\"option.disabled || group.disabled\"\n                [class.focused]=\"focusedIndex() === groupOffsets()[groupIdx] + optIdx\"\n                [attr.aria-selected]=\"isOptionSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled || group.disabled\"\n                (mousedown)=\"$event.preventDefault()\"\n                (click)=\"onOptionClick(option, !!group.disabled)\">\n                @if (multiple()) {\n                  <tn-checkbox\n                    class=\"tn-select-check\"\n                    label=\"\"\n                    [checked]=\"isOptionSelected(option)\"\n                    [disabled]=\"true\"\n                    [hideLabel]=\"true\" />\n                }\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- No Options Message -->\n        @if (!anyOptionsPresent()) {\n          <div class=\"tn-select-no-options\">\n            {{ noOptionsLabel() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;--tn-select-dropdown-max-height: 200px}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;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;max-height:var(--tn-select-dropdown-max-height);overflow:hidden}.tn-select-dropdown--above{top:auto;bottom:100%;margin-top:0;margin-bottom:.25rem}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg1, #f1f3f5);outline:2px solid var(--tn-primary, #007bff);outline-offset:-2px}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-select in tests.
@@ -6942,6 +7254,352 @@ class TnTableHarness extends ComponentHarness {
     }
 }
 
+/** English defaults used when no `TN_TABLE_PAGER_LABELS` provider is registered. */
+const TN_TABLE_PAGER_DEFAULT_LABELS = {
+    itemsPerPage: 'Items per page',
+    of: 'of',
+    firstPage: 'First page',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    lastPage: 'Last page',
+    tablePagination: 'Table pagination',
+};
+/**
+ * DI token for app-wide default labels. Provide either a static object or a
+ * `Signal<TnTablePagerLabels>` — the latter lets the pager react to language
+ * changes when the consumer wires it up to an i18n service.
+ *
+ * Explicit input bindings on `<tn-table-pager>` still win over these defaults.
+ */
+const TN_TABLE_PAGER_LABELS = new InjectionToken('TN_TABLE_PAGER_LABELS', { providedIn: 'root', factory: () => TN_TABLE_PAGER_DEFAULT_LABELS });
+/**
+ * Pagination control for the `tn-table` (or any list view that paginates).
+ *
+ * Works in two modes:
+ *
+ * 1. **Dumb mode** — bind `[currentPage]`, `[pageSize]`, `[totalItems]` and listen
+ *    to `pageChange` / `pageSizeChange`. The component owns no provider state.
+ * 2. **Data-provider mode** — bind `[dataProvider]` and the component drives
+ *    `setPagination()` on the provider, mirrors `totalRows`, and reacts to
+ *    `currentPage$` changes (with an internal guard against feedback loops).
+ *
+ * @example Dumb mode
+ * ```html
+ * <tn-table-pager
+ *   [(currentPage)]="page"
+ *   [(pageSize)]="size"
+ *   [totalItems]="total()"
+ *   (pageChange)="loadPage($event)" />
+ * ```
+ *
+ * @example Data-provider mode (replaces the typical ix-table-pager wrapper)
+ * ```html
+ * <tn-table-pager
+ *   [dataProvider]="dataProvider()"
+ *   [pageSize]="dataProvider().pagination.pageSize ?? 50"
+ *   [currentPage]="dataProvider().pagination.pageNumber ?? 1"
+ *   [itemsPerPageLabel]="'Items per page' | translate" />
+ * ```
+ */
+class TnTablePagerComponent {
+    destroyRef = inject(DestroyRef);
+    /**
+     * Normalize the injected token into a Signal so consumers can supply either
+     * a plain object or a reactive signal (e.g. derived from a TranslateService's
+     * onLangChange) and the pager re-renders when labels change.
+     */
+    defaultLabels;
+    /** 1-based index of the currently displayed page. */
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    /** Number of items per page. */
+    pageSize = model(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Selectable page-size values rendered in the dropdown. */
+    pageSizeOptions = input([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    /**
+     * Total item count across all pages — drives `totalPages` and the range
+     * labels. Ignored when `dataProvider` is set (the provider's `totalRows`
+     * wins, so consumers don't have to keep both in sync).
+     */
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    /**
+     * Optional data-provider integration. When supplied, the pager initializes
+     * the provider's pagination on the first effect run, mirrors `totalRows`
+     * into the displayed total, and listens to `currentPage$` to sync external
+     * page changes. Page/size changes from user input are pushed back via
+     * `setPagination()`.
+     */
+    dataProvider = input(undefined, ...(ngDevMode ? [{ debugName: "dataProvider" }] : []));
+    /**
+     * Label inputs are nullable on purpose: the template reads the resolved
+     * `*Label` computed signals below, which fall back to the DI-provided default
+     * (a signal — so language changes propagate live). An explicit input binding
+     * always wins.
+     */
+    itemsPerPageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "itemsPerPageLabel" }] : []));
+    ofLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ofLabel" }] : []));
+    firstPageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "firstPageLabel" }] : []));
+    previousPageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "previousPageLabel" }] : []));
+    nextPageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "nextPageLabel" }] : []));
+    lastPageLabel = input(undefined, ...(ngDevMode ? [{ debugName: "lastPageLabel" }] : []));
+    tablePaginationLabel = input(undefined, ...(ngDevMode ? [{ debugName: "tablePaginationLabel" }] : []));
+    /** Resolved labels: explicit input takes precedence over the DI default. */
+    resolvedItemsPerPageLabel = computed(() => this.itemsPerPageLabel() ?? this.defaultLabels().itemsPerPage, ...(ngDevMode ? [{ debugName: "resolvedItemsPerPageLabel" }] : []));
+    resolvedOfLabel = computed(() => this.ofLabel() ?? this.defaultLabels().of, ...(ngDevMode ? [{ debugName: "resolvedOfLabel" }] : []));
+    resolvedFirstPageLabel = computed(() => this.firstPageLabel() ?? this.defaultLabels().firstPage, ...(ngDevMode ? [{ debugName: "resolvedFirstPageLabel" }] : []));
+    resolvedPreviousPageLabel = computed(() => this.previousPageLabel() ?? this.defaultLabels().previousPage, ...(ngDevMode ? [{ debugName: "resolvedPreviousPageLabel" }] : []));
+    resolvedNextPageLabel = computed(() => this.nextPageLabel() ?? this.defaultLabels().nextPage, ...(ngDevMode ? [{ debugName: "resolvedNextPageLabel" }] : []));
+    resolvedLastPageLabel = computed(() => this.lastPageLabel() ?? this.defaultLabels().lastPage, ...(ngDevMode ? [{ debugName: "resolvedLastPageLabel" }] : []));
+    resolvedTablePaginationLabel = computed(() => this.tablePaginationLabel() ?? this.defaultLabels().tablePagination, ...(ngDevMode ? [{ debugName: "resolvedTablePaginationLabel" }] : []));
+    /** Emits the new 1-based page number whenever the user navigates. */
+    pageChange = output();
+    /** Emits the new page-size value when the dropdown changes. */
+    pageSizeChange = output();
+    /**
+     * Total items reported by the data provider (when one is bound). Falls back
+     * to `totalItems` input otherwise — see `effectiveTotalItems`.
+     */
+    providerTotalItems = signal(0, ...(ngDevMode ? [{ debugName: "providerTotalItems" }] : []));
+    // The fields below are intentionally plain mutable state, not signals: they
+    // back the provider binding's imperative lifecycle (current ref, current
+    // subscription, last-pushed echo guard) and are only ever written from
+    // inside the bind effect or the syncFromProvider/pushToProvider helpers.
+    // Reading them never needs to participate in the reactive graph — exposing
+    // them as signals would invite spurious re-evaluation without buying us
+    // anything.
+    /** The provider reference we're currently bound to (used to detect swaps). */
+    currentProvider = null;
+    /** Subscription to the current provider's `currentPage$` — torn down on swap. */
+    providerSub = null;
+    /**
+     * Last pagination value we pushed to the provider. Used to recognize the
+     * provider's resulting emission as our own echo and break the feedback loop
+     * (setPagination → provider emits → syncFromProvider → setPagination …)
+     * regardless of whether the provider emits synchronously or asynchronously,
+     * and regardless of whether its stream replays on subscribe.
+     */
+    lastPushedPagination = null;
+    effectiveTotalItems = computed(() => this.dataProvider() ? this.providerTotalItems() : this.totalItems(), ...(ngDevMode ? [{ debugName: "effectiveTotalItems" }] : []));
+    totalPages = computed(() => {
+        const size = this.pageSize();
+        if (size <= 0) {
+            return 0;
+        }
+        return Math.ceil(this.effectiveTotalItems() / size);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    firstItemOnPage = computed(() => {
+        if (this.effectiveTotalItems() === 0) {
+            return 0;
+        }
+        return (this.currentPage() - 1) * this.pageSize() + 1;
+    }, ...(ngDevMode ? [{ debugName: "firstItemOnPage" }] : []));
+    lastItemOnPage = computed(() => {
+        const last = this.currentPage() * this.pageSize();
+        return Math.min(last, this.effectiveTotalItems());
+    }, ...(ngDevMode ? [{ debugName: "lastItemOnPage" }] : []));
+    isFirstPageDisabled = computed(() => this.currentPage() <= 1, ...(ngDevMode ? [{ debugName: "isFirstPageDisabled" }] : []));
+    isLastPageDisabled = computed(() => {
+        const total = this.totalPages();
+        return total === 0 || this.currentPage() >= total;
+    }, ...(ngDevMode ? [{ debugName: "isLastPageDisabled" }] : []));
+    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((value) => ({ value, label: String(value) })), ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : []));
+    constructor() {
+        const provided = inject(TN_TABLE_PAGER_LABELS);
+        this.defaultLabels = isSignal(provided) ? provided : signal(provided).asReadonly();
+        // Re-bind when the dataProvider reference changes (including swap to a
+        // different instance or clearing back to undefined). `untracked` keeps the
+        // provider's imperative reads out of the reactive graph so this effect only
+        // re-runs when the provider reference itself changes.
+        this.destroyRef.onDestroy(() => this.providerSub?.unsubscribe());
+        effect(() => {
+            const provider = this.dataProvider() ?? null;
+            if (provider === this.currentProvider) {
+                return;
+            }
+            // Tear down any previous binding before attaching to the new provider so
+            // a swap doesn't leave the old subscription running against destroyRef.
+            this.providerSub?.unsubscribe();
+            this.providerSub = null;
+            this.lastPushedPagination = null;
+            this.currentProvider = provider;
+            if (!provider) {
+                this.providerTotalItems.set(0);
+                return;
+            }
+            untracked(() => {
+                this.pushToProvider();
+                this.providerTotalItems.set(provider.totalRows);
+            });
+            // No skip() here: if currentPage$ replays (BehaviorSubject), the replay
+            // value matches what pushToProvider() just recorded in
+            // lastPushedPagination, so syncFromProvider treats it as our own echo
+            // and short-circuits. A plain Subject (no replay) still gets every real
+            // emission — earlier we used skip(1), which silently dropped the first
+            // real emission for non-replaying streams.
+            this.providerSub = provider.currentPage$.subscribe(() => this.syncFromProvider());
+        });
+    }
+    syncFromProvider() {
+        const provider = this.dataProvider();
+        if (!provider) {
+            return;
+        }
+        this.providerTotalItems.set(provider.totalRows);
+        const p = provider.pagination;
+        const isEcho = this.lastPushedPagination !== null
+            && p.pageNumber === this.lastPushedPagination.pageNumber
+            && p.pageSize === this.lastPushedPagination.pageSize;
+        if (!isEcho) {
+            const providerPage = p.pageNumber;
+            if (providerPage !== null && providerPage !== this.currentPage()) {
+                this.currentPage.set(providerPage);
+                return;
+            }
+        }
+        // Whether or not this was an echo, an updated totalRows can leave us on an
+        // out-of-range page — reset, emit pageChange (so consumers see the auto-
+        // correction symmetrically with user-initiated navigation), and push the
+        // corrected pagination back.
+        if (this.currentPage() > this.totalPages() && this.currentPage() !== 1) {
+            this.currentPage.set(1);
+            this.pageChange.emit(1);
+            this.pushToProvider();
+        }
+    }
+    /**
+     * Public navigation API: jump to a specific 1-based page. Used both by the
+     * template (first/last buttons) and by consumers who want to drive the pager
+     * programmatically. Out-of-range values and no-op transitions are silently
+     * ignored. Sibling helpers `previousPage` / `nextPage` are template-only and
+     * therefore `protected` — `goToPage` is intentionally part of the public API.
+     */
+    goToPage(pageNumber) {
+        const total = this.totalPages();
+        if (pageNumber < 1 || (total > 0 && pageNumber > total)) {
+            return;
+        }
+        if (pageNumber === this.currentPage()) {
+            return;
+        }
+        this.currentPage.set(pageNumber);
+        this.pageChange.emit(pageNumber);
+        this.pushToProvider();
+    }
+    previousPage() {
+        this.goToPage(this.currentPage() - 1);
+    }
+    nextPage() {
+        this.goToPage(this.currentPage() + 1);
+    }
+    onPageSizeChange(value) {
+        if (value === this.pageSize()) {
+            return;
+        }
+        this.pageSize.set(value);
+        this.pageSizeChange.emit(value);
+        // Resetting to page 1 is a UX expectation when the page size changes —
+        // otherwise the user might land on an out-of-range page.
+        this.currentPage.set(1);
+        this.pageChange.emit(1);
+        this.pushToProvider();
+    }
+    /** Forwards the current page/size to the data provider, if one is bound. */
+    pushToProvider() {
+        const provider = this.dataProvider();
+        if (!provider) {
+            return;
+        }
+        // Recording the value before pushing lets syncFromProvider recognize the
+        // resulting emission as our own echo (independent of whether the provider
+        // emits synchronously from setPagination).
+        const pagination = {
+            pageNumber: this.currentPage(),
+            pageSize: this.pageSize(),
+        };
+        this.lastPushedPagination = pagination;
+        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: { 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 } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], 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    [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    \u2013 {{ 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    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", "ariaLabel", "testId", "name", "size", "color", "tooltip", "library"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-table-pager', standalone: true, imports: [FormsModule, TnIconButtonComponent, TnSelectComponent, TnTestIdDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'tn-table-pager',
+                        'role': 'navigation',
+                        '[attr.aria-label]': 'resolvedTablePaginationLabel()',
+                    }, hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], 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    [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    \u2013 {{ 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    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\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"] }]
+        }], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], ofLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], tablePaginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginationLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+
+/**
+ * Harness for interacting with `tn-table-pager` in tests.
+ *
+ * @example
+ * ```ts
+ * const pager = await loader.getHarness(TnTablePagerHarness);
+ * await pager.nextPage();
+ * expect(await pager.getRangeText()).toBe('21 – 40 of 47');
+ * ```
+ */
+class TnTablePagerHarness extends ComponentHarness {
+    static hostSelector = 'tn-table-pager';
+    static with(options = {}) {
+        return new HarnessPredicate(TnTablePagerHarness, options);
+    }
+    firstButton = this.locatorFor(TnIconButtonHarness.with({ name: 'page-first' }));
+    previousButton = this.locatorFor(TnIconButtonHarness.with({ name: 'chevron-left' }));
+    nextButton = this.locatorFor(TnIconButtonHarness.with({ name: 'chevron-right' }));
+    lastButton = this.locatorFor(TnIconButtonHarness.with({ name: 'page-last' }));
+    pageSizeSelect = this.locatorFor(TnSelectHarness);
+    rangeEl = this.locatorFor('.tn-table-pager__range');
+    /**
+     * Returns the rendered range text (e.g. `"1 – 20 of 47"`).
+     */
+    async getRangeText() {
+        const el = await this.rangeEl();
+        return (await el.text()).replace(/\s+/g, ' ').trim();
+    }
+    /** Clicks the "first page" button. */
+    async goToFirstPage() {
+        const btn = await this.firstButton();
+        await btn.click();
+    }
+    /** Clicks the "previous page" button. */
+    async previousPage() {
+        const btn = await this.previousButton();
+        await btn.click();
+    }
+    /** Clicks the "next page" button. */
+    async nextPage() {
+        const btn = await this.nextButton();
+        await btn.click();
+    }
+    /** Clicks the "last page" button. */
+    async goToLastPage() {
+        const btn = await this.lastButton();
+        await btn.click();
+    }
+    async isFirstButtonDisabled() {
+        const btn = await this.firstButton();
+        return btn.isDisabled();
+    }
+    async isPreviousButtonDisabled() {
+        const btn = await this.previousButton();
+        return btn.isDisabled();
+    }
+    async isNextButtonDisabled() {
+        const btn = await this.nextButton();
+        return btn.isDisabled();
+    }
+    async isLastButtonDisabled() {
+        const btn = await this.lastButton();
+        return btn.isDisabled();
+    }
+    /** Returns the harness for the underlying page-size `tn-select`. */
+    async getPageSizeSelect() {
+        return this.pageSizeSelect();
+    }
+}
+
 /**
  * Tree flattener to convert normal type of node to node with children & level information.
  */
@@ -7025,7 +7683,7 @@ class TnTreeComponent extends CdkTree {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeComponent, isStandalone: true, selector: "tn-tree", host: { attributes: { "role": "tree" }, classAttribute: "tn-tree" }, providers: [
             { provide: CdkTree, useExisting: TnTreeComponent }
-        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["tnTree"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<ng-container cdkTreeNodeOutlet />", styles: [":host{display:block;width:100%}.tn-tree{width:100%;background-color:var(--tn-bg1);border:1px solid var(--tn-lines);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeComponent, decorators: [{
             type: Component,
@@ -7056,7 +7714,7 @@ class TnTreeNodeComponent extends CdkTreeNode {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeNodeComponent, isStandalone: true, selector: "tn-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-tree-node-wrapper" }, providers: [
             { provide: CdkTreeNode, useExisting: TnTreeNodeComponent }
-        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, decorators: [{
             type: Component,
@@ -7072,7 +7730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class TnTreeNodeOutletDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2.CdkTreeNodeOutlet }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnTreeNodeOutletDirective, isStandalone: true, selector: "[tnTreeNodeOutlet]", hostDirectives: [{ directive: i2$1.CdkTreeNodeOutlet }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeOutletDirective, decorators: [{
             type: Directive,
@@ -7137,7 +7795,7 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnNestedTreeNodeComponent, isStandalone: true, selector: "tn-nested-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-nested-tree-node-wrapper" }, providers: [
             { provide: CdkNestedTreeNode, useExisting: TnNestedTreeNodeComponent },
             { provide: CdkTreeNode, useExisting: TnNestedTreeNodeComponent }
-        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:.875rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnNestedTreeNode"], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:.875rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2$1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, decorators: [{
             type: Component,
@@ -9681,7 +10339,7 @@ class TnTimeInputComponent {
                 useExisting: forwardRef(() => TnTimeInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\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: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "disabled", "testId", "multiple", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
+        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "disabled", "testId", "multiple", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTimeInputComponent, decorators: [{
             type: Component,
@@ -13307,5 +13965,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, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map