@truenas/ui-components 0.7.0 → 0.7.2

package/fesm2022/truenas-ui-components.mjs

@@ -1,7 +1,7 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, isDevMode, effect, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, Directive, signal, isSignal, ViewContainerRef, output, viewChild, untracked, forwardRef, DestroyRef, NgZone, afterNextRender, model, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, viewChildren, ChangeDetectorRef, afterEveryRender, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, inject, computed, isSignal, isDevMode, effect, signal, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, Directive, ViewContainerRef, output, viewChild, untracked, forwardRef, DestroyRef, NgZone, afterNextRender, model, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, viewChildren, ChangeDetectorRef, afterEveryRender, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/cdk/testing';
@@ -73,18 +73,20 @@ function tnAccessibleName(config) {
     // raises the warning rather than being treated as an answer.
     const hasLabelledby = computed(() => (config.ariaLabelledby() ?? '').trim() !== '', ...(ngDevMode ? [{ debugName: "hasLabelledby" }] : []));
     const named = computed(() => (config.ariaLabel() ?? '').trim() !== '' || hasLabelledby(), ...(ngDevMode ? [{ debugName: "named" }] : []));
+    const fallback = config.fallback;
+    const fallbackName = computed(() => (isSignal(fallback) ? fallback() : fallback), ...(ngDevMode ? [{ debugName: "fallbackName" }] : []));
     const resolved = computed(() => {
         const label = config.ariaLabel();
         if ((label ?? '').trim() !== '') {
             return label;
         }
-        return hasLabelledby() ? null : config.fallback;
+        return hasLabelledby() ? null : fallbackName();
     }, ...(ngDevMode ? [{ debugName: "resolved" }] : []));
-    if (isDevMode()) {
+    if (isDevMode() && !config.fallbackIsConfigured) {
         effect(() => {
             if (!named()) {
                 console.warn(`[${config.selector}] No ariaLabel or ariaLabelledby was set, so it falls back to `
-                    + `"${config.fallback}". Assistive technology cannot say WHAT is ${config.activity} `
+                    + `"${fallbackName()}". Assistive technology cannot say WHAT is ${config.activity} `
                     + `— pass ariaLabel, or ariaLabelledby pointing at visible text.`
                     + (config.hint ? ` ${config.hint}` : ''));
             }
@@ -96,17 +98,175 @@ function tnAccessibleName(config) {
 /**
  * The accessible name a spinner falls back to when the caller names neither
  * `ariaLabel` nor `ariaLabelledby` (#202). Same reasoning as
- * `TN_PROGRESS_BAR_DEFAULT_LABEL`, and the case is sharper here: the spinner
- * defaults to indeterminate mode, so its unnamed default rendering reached
- * assistive technology as a progressbar with neither a name nor a value.
+ * {@link TN_PROGRESS_BAR_DEFAULT_LABEL}, and the case is sharper here: the
+ * spinner defaults to indeterminate mode, so its unnamed default rendering
+ * reached assistive technology as a progressbar with neither a name nor a
+ * value.
  *
- * `branded-spinner.component.ts` in this folder already fell back this way —
+ * `branded-spinner.component.ts` already fell back this way —
  * `ariaLabel() || "Loading..."` inline — so a fallback is the shape this
  * library had already settled on; what it lacked was the warning. It has both
- * since #206, through the same `tnAccessibleName` this component uses, which is
+ * since #206, through the same `tnAccessibleName` that component uses, which is
  * why the two constants sit side by side and differ.
  */
 const TN_SPINNER_DEFAULT_LABEL = 'Loading';
+/**
+ * The name `tn-branded-spinner` falls back to when the caller names neither
+ * `ariaLabel` nor `ariaLabelledby`. Same reasoning as
+ * {@link TN_SPINNER_DEFAULT_LABEL} and {@link TN_PROGRESS_BAR_DEFAULT_LABEL}.
+ *
+ * It differs from `TN_SPINNER_DEFAULT_LABEL` — `"Loading..."` against
+ * `"Loading"` — only because this is the string the component already rendered,
+ * inline in its host binding, before #206 gave it the shared resolver. Aligning
+ * the two would change what a screen reader announces for every unnamed branded
+ * spinner already in the wild, which is a louder change than the consistency
+ * fix it would be part of. Exported so specs assert against it by name rather
+ * than by a copied string literal.
+ */
+const TN_BRANDED_SPINNER_DEFAULT_LABEL = 'Loading...';
+/**
+ * The accessible name a bar falls back to when the caller names neither
+ * `ariaLabel` nor `ariaLabelledby` (#202).
+ *
+ * Deliberately generic, and deliberately not silent: the host carries
+ * `role="progressbar"` unconditionally, so without a fallback the default
+ * rendering is a progressbar assistive technology announces with no name at all
+ * — "progress bar, 40%", with nothing to say what is progressing. The
+ * alternative fix, withholding the role until there is a name for it, trades
+ * that for no announcement whatever, which is worse: a screen reader would not
+ * learn that anything is in progress, and on a determinate bar it would lose
+ * the value too.
+ *
+ * A generic name is still a poor one, so it is paired with the dev-mode warning
+ * `tnAccessibleName` raises. Exported so specs assert against it by name rather
+ * than by a copied string literal.
+ */
+const TN_PROGRESS_BAR_DEFAULT_LABEL = 'Progress';
+/**
+ * The accessible name `tn-particle-progress-bar` falls back to when the caller
+ * names neither `ariaLabel` nor `ariaLabelledby` (#209).
+ *
+ * The same string and the same reasoning as
+ * {@link TN_PROGRESS_BAR_DEFAULT_LABEL} next door, and deliberately a separate
+ * constant rather than an alias of it: `tnAccessibleName` takes a fallback PER
+ * COMPONENT because the least-bad generic name differs by what the component is
+ * ("Progress" for a bar, "Loading" for a spinner), and sharing the binding would
+ * make a future divergence in one a silent change to the other. Exported so
+ * specs assert against it by name rather than by a copied string literal.
+ */
+const TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL = 'Progress';
+/**
+ * The accessible name a dialog falls back to when it renders no `title` and the
+ * caller named it through neither this component nor the `DialogConfig` (#219).
+ *
+ * `title` defaults to `''`, so the DEFAULT rendering of this component put an
+ * empty `<h2>` in the header and left the CDK container with no naming
+ * attribute at all — measured as `empty-heading` on the heading and
+ * `aria-dialog-name` on the dialog. A dialog with no name is announced as
+ * "dialog" and nothing else, which is the whole of what a screen-reader user is
+ * told about a surface that just took over the page and trapped their focus.
+ *
+ * "Dialog" is a poor name, and says almost exactly what the role already says.
+ * It is still better than the two alternatives: leaving the surface unnamed, or
+ * withholding `role="dialog"` until there is a name — the latter would move a
+ * listener into a focus trap with no announcement that anything had opened. So
+ * it is paired with the dev-mode warning `tnAccessibleName` raises, which is
+ * what keeps the fallback from becoming a quiet way to ship a nameless dialog.
+ *
+ * Exported so specs assert against it by name rather than by a copied literal.
+ */
+const TN_DIALOG_SHELL_DEFAULT_LABEL = 'Dialog';
+/**
+ * The accessible name an open panel falls back to when it has no `title` and the
+ * caller named neither `ariaLabel` nor `ariaLabelledby` (#214).
+ *
+ * `title` defaults to `''`, so the DEFAULT rendering of this component was a
+ * `role="dialog"` with `aria-labelledby` pointing at an empty `<h2>` — measured
+ * as an `aria-dialog-name` violation, alongside `empty-heading`. A dialog with no
+ * name is announced as "dialog" and nothing else, which is the whole of what a
+ * screen-reader user gets told about a surface that just covered the page.
+ *
+ * Withholding `role="dialog"` until there is a name would be the other way to
+ * clear the rule, and it is worse: the panel traps focus either way, so a
+ * listener would be moved into a region with no announcement that anything had
+ * opened. A generic name is still a poor one, so it is paired with the dev-mode
+ * warning `tnAccessibleName` raises.
+ *
+ * Exported so specs assert against it by name rather than by a copied literal.
+ */
+const TN_SIDE_PANEL_DEFAULT_LABEL = 'Side panel';
+/**
+ * The accessible name a drawer falls back to when the caller names neither
+ * `ariaLabel` nor `ariaLabelledby` (#214).
+ *
+ * `ariaLabel` defaults to `undefined`, so the DEFAULT rendering in `over` mode
+ * was a `role="dialog"` with `aria-modal="true"` and no name — measured as an
+ * `aria-dialog-name` violation. In `side` mode the same omission leaves a
+ * `role="navigation"` landmark unnamed, which axe does not report while there is
+ * only one of them on the page, and which stops telling them apart the moment
+ * there are two.
+ *
+ * One fallback for both modes rather than one per mode: the drawer is the same
+ * surface either way, the name answers the same question ("what is this?"), and
+ * a rule that changes with the mode is one more thing for a caller to be wrong
+ * about. A generic name is still a poor one, so it is paired with the dev-mode
+ * warning `tnAccessibleName` raises.
+ *
+ * Exported so specs assert against it by name rather than by a copied literal.
+ */
+const TN_DRAWER_DEFAULT_LABEL = 'Drawer';
+/** English defaults used when no {@link TN_FALLBACK_LABELS} provider is registered. */
+const TN_DEFAULT_FALLBACK_LABELS = {
+    spinner: TN_SPINNER_DEFAULT_LABEL,
+    brandedSpinner: TN_BRANDED_SPINNER_DEFAULT_LABEL,
+    progressBar: TN_PROGRESS_BAR_DEFAULT_LABEL,
+    particleProgressBar: TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL,
+    dialog: TN_DIALOG_SHELL_DEFAULT_LABEL,
+    sidePanel: TN_SIDE_PANEL_DEFAULT_LABEL,
+    drawer: TN_DRAWER_DEFAULT_LABEL,
+};
+/**
+ * What the token resolves to when nobody provided it — a COPY of
+ * {@link TN_DEFAULT_FALLBACK_LABELS} rather than that object itself, and the
+ * difference is the whole of how `configured` below is decided.
+ *
+ * Comparing against the exported constant would make a consumer who provides it
+ * deliberately — `{ provide: TN_FALLBACK_LABELS, useValue: TN_DEFAULT_FALLBACK_LABELS }`,
+ * which is what a test environment mirroring an app's providers writes — read as
+ * nobody having provided anything. Held privately, this object is reachable only
+ * by not providing one, so identity answers exactly the question being asked.
+ */
+const builtInLabels = { ...TN_DEFAULT_FALLBACK_LABELS };
+/**
+ * DI token for the app-wide fallback names above. Provide either a static
+ * object or a `Signal<TnFallbackLabels>` — the latter lets every component
+ * react to language changes when the consumer wires it up to an i18n service.
+ *
+ * An `ariaLabel` on a particular instance still wins over these, and is still
+ * what to reach for when a name can say what is loading or what is open.
+ */
+const TN_FALLBACK_LABELS = new InjectionToken('TN_FALLBACK_LABELS', { providedIn: 'root', factory: () => builtInLabels });
+/**
+ * Reads one component's fallback name out of {@link TN_FALLBACK_LABELS}.
+ *
+ * Not `injectTnLabels`, which normalizes the token to a Signal and drops the
+ * value it started from: telling a configured bundle from the built-in one is an
+ * identity check against `builtInLabels`, so this needs the raw injected value.
+ * A consumer who provides a bundle equal to the defaults — the exported constant
+ * included — still counts as configured, which is the right way round: they said
+ * so on purpose.
+ *
+ * **Must be called from an injection context.**
+ */
+function injectTnFallbackName(key) {
+    const provided = inject(TN_FALLBACK_LABELS);
+    const labels = isSignal(provided) ? provided : signal(provided).asReadonly();
+    return {
+        label: computed(() => labels()[key]),
+        configured: provided !== builtInLabels,
+    };
+}
+
 class TnSpinnerComponent {
     mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -114,6 +274,7 @@ class TnSpinnerComponent {
     strokeWidth = input(4, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    fallbackName = injectTnFallbackName('spinner');
     /**
      * The name to render, or `null` to render no `aria-label` attribute — and the
      * dev-mode warning when the caller named neither input.
@@ -127,7 +288,8 @@ class TnSpinnerComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-spinner',
-        fallback: TN_SPINNER_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'loading',
         ariaLabel: this.ariaLabel,
         ariaLabelledby: this.ariaLabelledby
@@ -490,7 +652,7 @@ function injectTnLabels(token) {
     return isSignal(provided) ? provided : signal(provided).asReadonly();
 }
 
-let nextId$5 = 0;
+let nextId$6 = 0;
 /** English defaults used when no `TN_AUTOCOMPLETE_LABELS` provider is registered. */
 const TN_AUTOCOMPLETE_DEFAULT_LABELS = {
     placeholder: 'Type to search...',
@@ -510,7 +672,7 @@ class TnAutocompleteComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
-    uid = `tn-autocomplete-${nextId$5++}`;
+    uid = `tn-autocomplete-${nextId$6++}`;
     /**
      * All available options. The `label` is displayed; the `value` is committed
      * to the form control. A written value is resolved back to its option's
@@ -2126,26 +2288,6 @@ function tnScrollableRegion(region) {
     return reachable.asReadonly();
 }
 
-/**
- * The accessible name a drawer falls back to when the caller names neither
- * `ariaLabel` nor `ariaLabelledby` (#214).
- *
- * `ariaLabel` defaults to `undefined`, so the DEFAULT rendering in `over` mode
- * was a `role="dialog"` with `aria-modal="true"` and no name — measured as an
- * `aria-dialog-name` violation. In `side` mode the same omission leaves a
- * `role="navigation"` landmark unnamed, which axe does not report while there is
- * only one of them on the page, and which stops telling them apart the moment
- * there are two.
- *
- * One fallback for both modes rather than one per mode: the drawer is the same
- * surface either way, the name answers the same question ("what is this?"), and
- * a rule that changes with the mode is one more thing for a caller to be wrong
- * about. A generic name is still a poor one, so it is paired with the dev-mode
- * warning `tnAccessibleName` raises.
- *
- * Exported so specs assert against it by name rather than by a copied literal.
- */
-const TN_DRAWER_DEFAULT_LABEL = 'Drawer';
 /**
  * A drawer, which is two different things by `mode`: in `side` it is
  * persistent navigation beside the page's content, and in `over` it is a modal
@@ -2255,6 +2397,7 @@ class TnDrawerComponent {
     trapFocus = computed(() => this.mode() === 'over' && this.opened(), ...(ngDevMode ? [{ debugName: "trapFocus" }] : []));
     /** Role depends on mode: navigation for side, dialog for over */
     panelRole = computed(() => this.mode() === 'over' ? 'dialog' : 'navigation', ...(ngDevMode ? [{ debugName: "panelRole" }] : []));
+    fallbackName = injectTnFallbackName('drawer');
     /**
      * The name to render as `aria-label`, or `null` to render none — and the
      * dev-mode warning when the caller named neither input.
@@ -2269,7 +2412,8 @@ class TnDrawerComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-drawer',
-        fallback: TN_DRAWER_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'open',
         ariaLabel: computed(() => this.ariaLabel() ?? null),
         ariaLabelledby: this.ariaLabelledby,
@@ -6040,7 +6184,7 @@ function libIconMarker(iconName) {
 // Module-level counter for deterministic, unique instance ids (matches the
 // tn-autocomplete convention). Deterministic ids are SSR/hydration-safe and
 // stable across snapshots, unlike a Math.random() seed.
-let nextId$4 = 0;
+let nextId$5 = 0;
 class TnInputComponent {
     inputEl = viewChild.required('inputEl');
     inputType = input(InputType.PlainText, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
@@ -6217,7 +6361,7 @@ class TnInputComponent {
     // Unique per instance: a hard-coded id produced duplicate ids when multiple
     // tn-inputs share a page (invalid HTML, and it breaks any future label `for=`,
     // aria-describedby, or getElementById targeting this input).
-    id = `tn-input-${nextId$4++}`;
+    id = `tn-input-${nextId$5++}`;
     // Protected: the display string is owned by the component and driven through the
     // CVA flow (writeValue / onValueChange). External writes would bypass that flow.
     // A signal so the `[value]` binding reflects writeValue reactively — a plain field
@@ -7484,7 +7628,7 @@ class TnChipHarness extends ComponentHarness {
     }
 }
 
-let nextId$3 = 0;
+let nextId$4 = 0;
 /**
  * An editable, multi-value chip input — tokenized entry where typed text
  * becomes removable `tn-chip`s alongside an inline text field. Text is
@@ -7529,7 +7673,7 @@ class TnChipInputComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance id for ARIA linkage between the input and its dropdown. */
-    uid = `tn-chip-input-${nextId$3++}`;
+    uid = `tn-chip-input-${nextId$4++}`;
     /** Placeholder shown in the text field when it is empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Disables the whole control — chips become non-removable and the field read-only. */
@@ -9618,6 +9762,403 @@ class TnCheckboxHarness extends ComponentHarness {
     }
 }
 
+let nextId$3 = 0;
+/**
+ * A `role="group"` wrapper that owns the selection for a set of `tn-checkbox`es, as one control
+ * whose value is the ARRAY of checked option values.
+ *
+ * `tn-checkbox` is a boolean `ControlValueAccessor` — one control per box. A multi-select field
+ * ("which USB devices to pass through", "which catalog trains to offer") has a single
+ * array-valued control instead, and nothing in the library spoke that shape: consumers either
+ * exploded it into one boolean control per option and reassembled the array by hand on submit, or
+ * kept a bespoke component outside the library. This is that shape, with the same
+ * `options`/`compareWith`/`testId` surface as {@link TnRadioGroupComponent} so the single-select
+ * and multi-select forms of the same field read alike.
+ *
+ * ```html
+ * <tn-form-field label="USB Devices" tooltip="Devices to pass through to the container">
+ *   <tn-checkbox-group formControlName="usb_devices" [options]="usbOptions" />
+ * </tn-form-field>
+ * ```
+ *
+ * Inside a `tn-form-field` the group is a normal control: the field names it via
+ * `aria-labelledby`, infers the required indicator from its validators, and renders its validation
+ * message — none of which a loose pile of checkboxes gets.
+ *
+ * Options come from the `options` input only. Unlike `tn-radio`, `tn-checkbox` is not group-aware,
+ * so a projected child would render as an independent boolean control that silently ignores the
+ * group's value; the group therefore projects nothing rather than accepting content it cannot
+ * drive.
+ */
+class TnCheckboxGroupComponent {
+    /**
+     * Options to render, one checkbox each.
+     *
+     * Options are tracked by `value`, so object values must be referentially stable — rebuilding
+     * them as fresh literals on every change detection pass re-creates the whole list. Same
+     * requirement the `compareWith` case implies; hold the objects in a field.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Lays the options out in a wrapping row of equal columns instead of stacking them. Column width
+     * comes from `--tn-checkbox-group-inline-basis` (default `50%`), and collapses to one column on
+     * a narrow viewport.
+     */
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    /**
+     * Explicit accessible name for the group. Inside a `tn-form-field` with a label this is
+     * unnecessary — the field names the group automatically — but a group with neither is announced
+     * as an unlabeled group.
+     *
+     * A required group appends "required" to whatever this says, since that is the only channel
+     * `role="group"` leaves open for it — see the `required` input.
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Whether the group announces itself as required.
+     *
+     * Deliberately NOT propagated to the options' native `required`, which is the opposite of the
+     * choice `tn-radio-group` makes — and the difference is in the HTML, not in taste. A required
+     * radio is satisfied by any one option in the `name` group; a required checkbox is satisfied
+     * only by ITSELF being checked, so propagating it here would have the browser demand every box.
+     * "At least one" is a validator's job.
+     *
+     * Nor does it become `aria-required`, which is the OTHER place `tn-radio-group` cannot be
+     * copied: WAI-ARIA 1.2 supports only the globals plus `aria-activedescendant`/`aria-disabled`
+     * on `role="group"`, so an `aria-required` there is dropped by assistive tech and flagged by
+     * axe, whereas `role="radiogroup"` genuinely supports it. The state instead rides in the
+     * group's accessible NAME, as a "required" suffix — see {@link labelledBy}.
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Test-id base for the group and, scoped by the option label, for every option: base
+     * `usb_devices` yields `checkbox-group-usb-devices` on the group and
+     * `checkbox-usb-devices-web-cam` on its options. Falls back to the bound control name.
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Custom comparator for matching option values against the selected ones. Provide it when option
+     * values are objects — the default is identity, so a structurally-equal-but-distinct object
+     * would leave the group rendering nothing as checked.
+     *
+     * Called with an option value on the right and a currently-selected value on the left, and must
+     * tolerate `null`/`undefined` on either side rather than dereferencing straight into a property.
+     *
+     * @example
+     * ```ts
+     * compareWith = (a, b) => a?.id === b?.id;
+     * ```
+     */
+    compareWith = input(...(ngDevMode ? [undefined, { debugName: "compareWith" }] : []));
+    /** Emits the new value array on every user toggle (not on programmatic writes). */
+    change = output();
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint, invalid, required).
+     * All-null standalone, or when `ariaLabel` overrides the field's label.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    resolvedTestId = controlTestId(this.testId);
+    selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    /**
+     * Combined disabled state (own input plus a disabled bound control). The native `disabled` on
+     * each option is what blocks interaction; `aria-disabled` on the group is what tells a screen
+     * reader landing on the container about it, and gives styling a hook for the group as a whole.
+     */
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Whether the group announces itself as required: its own input, or the field's inferred state. */
+    ariaRequired = computed(() => this.required() || this.fieldAria.required() === true, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
+    /** Id of the visually hidden "required" text this group contributes to its own name. */
+    requiredTextId = `tn-checkbox-group-required-${nextId$3++}`;
+    /**
+     * `aria-label` for the group: the `ariaLabel` input with the required-ness folded in, since
+     * `role="group"` gives it nowhere else to go (see the `required` input).
+     */
+    resolvedAriaLabel = computed(() => {
+        const label = this.ariaLabel();
+        if (!label) {
+            return null;
+        }
+        return this.ariaRequired() ? `${label} required` : label;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    /**
+     * `aria-labelledby` for the group: the enclosing field's label, plus this group's own hidden
+     * "required" text when required. A multi-id `aria-labelledby` concatenates, so the field keeps
+     * naming the group and the required-ness reaches a screen reader as part of that name.
+     *
+     * Null when the name comes from `ariaLabel` instead — that path carries the suffix itself,
+     * because `aria-labelledby` would otherwise win over the very label it is meant to extend.
+     */
+    labelledBy = computed(() => {
+        const fieldLabel = this.fieldAria.labelledby();
+        if (!fieldLabel) {
+            return null;
+        }
+        return this.ariaRequired() ? `${fieldLabel} ${this.requiredTextId}` : fieldLabel;
+    }, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Whether `value` is among the currently selected values. */
+    isSelected(value) {
+        const comparator = this.compareWith();
+        if (comparator) {
+            return this.selectedValues().some((selected) => comparator(selected, value));
+        }
+        return this.selectedValues().includes(value);
+    }
+    /**
+     * Adds or removes an option's value.
+     *
+     * The emitted array is rebuilt in `options` order rather than appended to in click order, so the
+     * value a given set of checked boxes produces is the same however the user got there — which is
+     * what makes a payload diff (and a spec asserting one) stable.
+     *
+     * Ordering is all the rebuild changes: an already-selected value is re-emitted as the object the
+     * consumer wrote, not as the equal-under-`compareWith` object the option holds. A control loaded
+     * with `{ id: 2, name: 'usb-cam' }` against an option of `{ id: 2 }` keeps its `name` when an
+     * unrelated box is toggled; only a newly checked option contributes the option's own value.
+     */
+    toggle(value, checked) {
+        const isCurrentlySelected = this.isSelected(value);
+        if (checked === isCurrentlySelected) {
+            return;
+        }
+        const next = this.options()
+            .map((option) => option.value)
+            .filter((optionValue) => (this.matches(optionValue, value) ? checked : this.isSelected(optionValue)))
+            .map((optionValue) => this.selectedValues().find((selected) => this.matches(optionValue, selected)) ?? optionValue);
+        // Values written by the consumer that no longer correspond to an option are kept: a control
+        // loaded with a device that has since been unplugged would otherwise be silently pruned by an
+        // unrelated toggle.
+        const unknownValues = this.selectedValues().filter((selected) => !this.options().some((option) => this.matches(option.value, selected)));
+        this.selectedValues.set([...next, ...unknownValues]);
+        this.onChange(this.selectedValues());
+        this.onTouched();
+        this.change.emit(this.selectedValues());
+    }
+    matches(a, b) {
+        const comparator = this.compareWith();
+        return comparator ? comparator(a, b) : a === b;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        this.selectedValues.set(value ?? []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /**
+     * Marks the control touched when focus leaves the group. `focusout` also fires while moving
+     * between the group's own options, which is harmless — the user has interacted either way — and
+     * it is the only blur signal available, since a checkbox's blur does not bubble.
+     */
+    onFocusOut() {
+        this.onTouched();
+    }
+    /** Per-option test-id segments: the group's base scoped by the option label. */
+    optionTestId(option) {
+        return scopeTestId(this.resolvedTestId(), option.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCheckboxGroupComponent, isStandalone: true, selector: "tn-checkbox-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { classAttribute: "tn-checkbox-group-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TnCheckboxGroupComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\n  class=\"tn-checkbox-group\"\n  role=\"group\"\n  tnTestIdType=\"checkbox-group\"\n  [class.tn-checkbox-group--inline]=\"inline()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedby()\"\n  [attr.aria-invalid]=\"fieldAria.invalid()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [tnTestId]=\"resolvedTestId()\"\n  (focusout)=\"onFocusOut()\"\n>\n  @for (option of options(); track option.value) {\n    <tn-checkbox\n      class=\"tn-checkbox-group__option\"\n      [label]=\"option.label\"\n      [checked]=\"isSelected(option.value)\"\n      [disabled]=\"isDisabled() || !!option.disabled\"\n      [testId]=\"optionTestId(option)\"\n      (change)=\"toggle(option.value, $event)\"\n    />\n  }\n</div>\n\n<!-- The required-ness rides in the group's accessible NAME, because `role=\"group\"` does not\n     support `aria-required` \u2014 see the `required` input's docblock. It sits OUTSIDE the group so\n     the text is not also read as group content on the way past the options; `aria-labelledby`\n     resolves ids document-wide, so it names the group from here just the same. -->\n@if (ariaRequired()) {\n  <span class=\"cdk-visually-hidden\" [attr.id]=\"requiredTextId\">required</span>\n}\n", styles: [".tn-checkbox-group-host{display:block}.tn-checkbox-group{display:flex;flex-direction:column;gap:var(--tn-checkbox-group-gap, 8px)}.tn-checkbox-group--inline{flex-direction:row;flex-wrap:wrap;column-gap:var(--tn-checkbox-group-inline-gap, 16px)}.tn-checkbox-group--inline .tn-checkbox-group__option{flex:1 1 calc(var(--tn-checkbox-group-inline-basis, 50%) - var(--tn-checkbox-group-inline-gap, 16px));box-sizing:border-box}@media(max-width:768px){.tn-checkbox-group--inline .tn-checkbox-group__option{flex-basis:100%}}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\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", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-checkbox-group', standalone: true, imports: [TnCheckboxComponent, TnTestIdDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TnCheckboxGroupComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'tn-checkbox-group-host'
+                    }, template: "<div\n  class=\"tn-checkbox-group\"\n  role=\"group\"\n  tnTestIdType=\"checkbox-group\"\n  [class.tn-checkbox-group--inline]=\"inline()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedby()\"\n  [attr.aria-invalid]=\"fieldAria.invalid()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [tnTestId]=\"resolvedTestId()\"\n  (focusout)=\"onFocusOut()\"\n>\n  @for (option of options(); track option.value) {\n    <tn-checkbox\n      class=\"tn-checkbox-group__option\"\n      [label]=\"option.label\"\n      [checked]=\"isSelected(option.value)\"\n      [disabled]=\"isDisabled() || !!option.disabled\"\n      [testId]=\"optionTestId(option)\"\n      (change)=\"toggle(option.value, $event)\"\n    />\n  }\n</div>\n\n<!-- The required-ness rides in the group's accessible NAME, because `role=\"group\"` does not\n     support `aria-required` \u2014 see the `required` input's docblock. It sits OUTSIDE the group so\n     the text is not also read as group content on the way past the options; `aria-labelledby`\n     resolves ids document-wide, so it names the group from here just the same. -->\n@if (ariaRequired()) {\n  <span class=\"cdk-visually-hidden\" [attr.id]=\"requiredTextId\">required</span>\n}\n", styles: [".tn-checkbox-group-host{display:block}.tn-checkbox-group{display:flex;flex-direction:column;gap:var(--tn-checkbox-group-gap, 8px)}.tn-checkbox-group--inline{flex-direction:row;flex-wrap:wrap;column-gap:var(--tn-checkbox-group-inline-gap, 16px)}.tn-checkbox-group--inline .tn-checkbox-group__option{flex:1 1 calc(var(--tn-checkbox-group-inline-basis, 50%) - var(--tn-checkbox-group-inline-gap, 16px));box-sizing:border-box}@media(max-width:768px){.tn-checkbox-group--inline .tn-checkbox-group__option{flex-basis:100%}}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+/**
+ * Harness for interacting with `tn-checkbox-group` in tests.
+ * Drives the group as a whole — reading the checked set, replacing it wholesale, toggling one
+ * option by label — rather than reaching for each `tn-checkbox` individually.
+ *
+ * @example
+ * ```typescript
+ * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ testId: 'checkbox-group-trains' }));
+ * // Labels, not option values — the DOM only carries what the user can read.
+ * await group.setValue(['Stable', 'Enterprise']);
+ * expect(await group.getValue()).toEqual(['Stable', 'Enterprise']);
+ * ```
+ */
+class TnCheckboxGroupHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnCheckboxGroupComponent` instance. */
+    static hostSelector = 'tn-checkbox-group';
+    _root = this.locatorFor('.tn-checkbox-group');
+    _checkboxes = this.locatorForAll(TnCheckboxHarness);
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a checkbox group with specific
+     * attributes.
+     *
+     * @param options Options for filtering which checkbox group instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by accessible name
+     * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ ariaLabel: 'USB Devices' }));
+     *
+     * // Find by testId
+     * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ testId: 'checkbox-group-usb-devices' }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnCheckboxGroupHarness, options)
+            .addOption('ariaLabel', options.ariaLabel, (harness, ariaLabel) => HarnessPredicate.stringMatches(harness.getAriaLabel(), ariaLabel))
+            .addOption('testId', options.testId, async (harness, testId) => {
+            return (await harness.getTestId()) === testId;
+        });
+    }
+    /**
+     * Gets the harnesses for the group's options, in DOM order.
+     *
+     * @example
+     * ```typescript
+     * const options = await group.getOptions();
+     * expect(options).toHaveLength(3);
+     * ```
+     */
+    async getOptions() {
+        return this._checkboxes();
+    }
+    /**
+     * Gets the label text of every option, in DOM order.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getOptionLabels()).toEqual(['Stable', 'Enterprise']);
+     * ```
+     */
+    async getOptionLabels() {
+        const checkboxes = await this._checkboxes();
+        return Promise.all(checkboxes.map((checkbox) => checkbox.getLabelText()));
+    }
+    /**
+     * Gets the labels of the currently checked options, in DOM order.
+     *
+     * Labels rather than values, because the values live in the bound control and the DOM only ever
+     * carries what the user can read.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getValue()).toEqual(['Stable']);
+     * ```
+     */
+    async getValue() {
+        const checkboxes = await this._checkboxes();
+        const checked = [];
+        for (const checkbox of checkboxes) {
+            if (await checkbox.isChecked()) {
+                checked.push(await checkbox.getLabelText());
+            }
+        }
+        return checked;
+    }
+    /**
+     * Makes the checked set exactly the options with the given labels — checking the ones listed and
+     * unchecking every other.
+     *
+     * @param labels Label text of the options that should end up checked.
+     *
+     * @example
+     * ```typescript
+     * await group.setValue(['Stable']);
+     * ```
+     */
+    async setValue(labels) {
+        const checkboxes = await this._checkboxes();
+        for (const checkbox of checkboxes) {
+            const label = await checkbox.getLabelText();
+            if (labels.includes(label)) {
+                await checkbox.check();
+            }
+            else {
+                await checkbox.uncheck();
+            }
+        }
+    }
+    /**
+     * Toggles the option with the given label. Throws when the group has no such option, so a
+     * renamed or missing option fails loudly instead of silently leaving the selection unchanged.
+     *
+     * @param label Label text of the option to toggle.
+     *
+     * @example
+     * ```typescript
+     * await group.toggle('Enterprise');
+     * ```
+     */
+    async toggle(label) {
+        const checkbox = await this.locatorForOptional(TnCheckboxHarness.with({ label }))();
+        if (!checkbox) {
+            const available = (await this.getOptionLabels()).join(', ');
+            throw new Error(`No option labelled "${label}" in this tn-checkbox-group (available: ${available}).`);
+        }
+        await checkbox.toggle();
+    }
+    /**
+     * Checks whether every option is disabled — the state a disabled group or a disabled bound form
+     * control produces. Use {@link getOptions} to inspect a single per-option `disabled`.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.isDisabled()).toBe(true);
+     * ```
+     */
+    async isDisabled() {
+        const checkboxes = await this._checkboxes();
+        if (!checkboxes.length) {
+            return false;
+        }
+        const states = await Promise.all(checkboxes.map((checkbox) => checkbox.isDisabled()));
+        return states.every(Boolean);
+    }
+    /**
+     * Gets the group's accessible name as written by the `ariaLabel` input, or null when the name
+     * comes from an enclosing `tn-form-field` (see {@link getAriaLabelledBy}).
+     */
+    async getAriaLabel() {
+        return (await this._root()).getAttribute('aria-label');
+    }
+    /** Gets the id the group's accessible name is delegated to, or null. */
+    async getAriaLabelledBy() {
+        return (await this._root()).getAttribute('aria-labelledby');
+    }
+    /**
+     * Gets the test ID attribute value of the group root.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getTestId()).toBe('checkbox-group-trains');
+     * ```
+     */
+    async getTestId() {
+        const root = await this._root();
+        return (await root.getAttribute('data-testid')) ?? (await root.getAttribute('data-test'));
+    }
+}
+
 /** DI token under which `tn-radio-group` exposes its {@link TnRadioGroupApi} to child radios. */
 const TN_RADIO_GROUP = new InjectionToken('TN_RADIO_GROUP');
 
@@ -20141,23 +20682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
-/**
- * The name this spinner falls back to when the caller names neither `ariaLabel`
- * nor `ariaLabelledby`. Same reasoning as `TN_SPINNER_DEFAULT_LABEL` and
- * `TN_PROGRESS_BAR_DEFAULT_LABEL`.
- *
- * It differs from `TN_SPINNER_DEFAULT_LABEL` — `"Loading..."` against
- * `"Loading"` — only because this is the string the component already rendered,
- * inline in its host binding, before #206 gave it the shared resolver. Aligning
- * the two would change what a screen reader announces for every unnamed branded
- * spinner already in the wild, which is a louder change than the consistency
- * fix it would be part of. Exported so specs assert against it by name rather
- * than by a copied string literal.
- */
-const TN_BRANDED_SPINNER_DEFAULT_LABEL = 'Loading...';
 class TnBrandedSpinnerComponent {
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    fallbackName = injectTnFallbackName('brandedSpinner');
     /**
      * The name to render, or `null` to render no `aria-label` attribute — and the
      * dev-mode warning when the caller named neither input.
@@ -20171,7 +20699,8 @@ class TnBrandedSpinnerComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-branded-spinner',
-        fallback: TN_BRANDED_SPINNER_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'loading',
         ariaLabel: this.ariaLabel,
         ariaLabelledby: this.ariaLabelledby
@@ -20284,30 +20813,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<div class=\"tn-branded-spinner-container\">\n  <svg \n    viewBox=\"0 -7 62 62\" \n    preserveAspectRatio=\"xMidYMid meet\" \n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"tn-branded-spinner-logo\">\n    \n    <!-- EXPLODED LOGO PATHS -->\n    <path class=\"exploded center\" fill=\"#AFADAE\" d=\"m41.79 24.13-11.26 6.51-11.28-6.51 11.28-6.51 11.26 6.51Z\" />\n    <path class=\"exploded top-left\" fill=\"#35BEEB\" d=\"M27.86 0v13.01l-13.93 8.04-11.28-6.5L27.86 0Z\" />\n    <path class=\"exploded bottom-right\" fill=\"#35BEEB\" d=\"M61.03 19.16v13.01L33.19 48.25V35.24l27.84-16.08Z\" />\n    <path class=\"exploded bottom-left\" fill=\"#0A95D3\" d=\"M27.86 35.24v13L0 32.17v-13l12.59 7.26s.03.02.05.03l15.23 8.79-.01-.01Z\" />\n    <path class=\"exploded top-right\" fill=\"#0A95D3\" d=\"m58.38 14.55-11.27 6.51-13.92-8.05V0l25.19 14.55Z\" />\n  </svg>\n</div>", styles: [".tn-branded-spinner{display:inline-block;vertical-align:middle}.tn-branded-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;min-height:100px}.tn-branded-spinner-logo{width:100px;height:100px}.tn-branded-spinner-logo path.exploded{fill-opacity:0;stroke-width:1px;stroke:var(--tn-primary, #007bff)}.tn-branded-spinner-logo path#morph-target{fill-opacity:0;fill:var(--tn-primary, #007bff)}\n"] }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
 
-/**
- * The accessible name a bar falls back to when the caller names neither
- * `ariaLabel` nor `ariaLabelledby` (#202).
- *
- * Deliberately generic, and deliberately not silent: the host carries
- * `role="progressbar"` unconditionally, so without a fallback the default
- * rendering is a progressbar assistive technology announces with no name at all
- * — "progress bar, 40%", with nothing to say what is progressing. The
- * alternative fix, withholding the role until there is a name for it, trades
- * that for no announcement whatever, which is worse: a screen reader would not
- * learn that anything is in progress, and on a determinate bar it would lose
- * the value too.
- *
- * A generic name is still a poor one, so it is paired with the dev-mode warning
- * `tnAccessibleName` raises. Exported so specs assert against it by name rather
- * than by a copied string literal.
- */
-const TN_PROGRESS_BAR_DEFAULT_LABEL = 'Progress';
 class TnProgressBarComponent {
     mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
     bufferValue = input(0, ...(ngDevMode ? [{ debugName: "bufferValue" }] : []));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    fallbackName = injectTnFallbackName('progressBar');
     /**
      * The name to render, or `null` to render no `aria-label` attribute — and the
      * dev-mode warning when the caller named neither input.
@@ -20323,7 +20835,8 @@ class TnProgressBarComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-progress-bar',
-        fallback: TN_PROGRESS_BAR_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'progressing',
         ariaLabel: this.ariaLabel,
         ariaLabelledby: this.ariaLabelledby
@@ -20382,19 +20895,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<!-- Background/buffer layer -->\n<div class=\"tn-progress-bar-buffer\" aria-hidden=\"true\">\n  <!-- Buffer bar hidden in new implementation -->\n  <!-- Buffer dots for buffer mode -->\n  @if (mode() === 'buffer') {\n    <div class=\"tn-progress-bar-buffer-dots\"\n         [style.width]=\"bufferStyles().width\"\n         [style.right]=\"bufferStyles().right\"></div>\n  }\n</div>\n\n<!-- Primary bar -->\n<div class=\"tn-progress-bar-bar tn-progress-bar-primary-bar\" aria-hidden=\"true\">\n  <span class=\"tn-progress-bar-bar-inner\"\n        [style.transform]=\"primaryTransform()\"></span>\n</div>\n\n<!-- Secondary bar (for indeterminate mode) -->\n@if (mode() === 'indeterminate') {\n  <div class=\"tn-progress-bar-bar tn-progress-bar-secondary-bar\" aria-hidden=\"true\">\n    <span class=\"tn-progress-bar-bar-inner\"></span>\n  </div>\n}\n\n", styles: [":host{display:block;height:4px;overflow:hidden;position:relative;transition:opacity .25s linear;width:100%}.tn-progress-bar-buffer{position:absolute;top:0;bottom:0;width:100%;background-color:var(--tn-bg2, #e5e7eb)}.tn-progress-bar-buffer-bar{display:none}.tn-progress-bar-buffer-dots{position:absolute;top:0;bottom:0;width:100%;background-image:radial-gradient(circle at center,var(--tn-alt-bg2) 2px,transparent 2px);background-size:10px 4px;background-repeat:repeat-x;animation:tn-progress-bar-buffer-dots .25s infinite linear}@keyframes tn-progress-bar-buffer-dots{0%{background-position-x:0}to{background-position-x:-10px}}.tn-progress-bar-bar{position:absolute;top:0;bottom:0;left:0;width:100%;transform-origin:left center}.tn-progress-bar-bar-inner{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;background-color:var(--tn-primary, #3b82f6);transform-origin:left center;height:100%}.tn-progress-bar-primary-bar{z-index:1}.tn-progress-bar-secondary-bar{z-index:0;display:none}.tn-progress-bar-secondary-bar .tn-progress-bar-bar-inner{background-color:var(--tn-primary, #3b82f6)}:host(.tn-progress-bar-indeterminate) .tn-progress-bar-primary-bar .tn-progress-bar-bar-inner{animation:tn-progress-bar-indeterminate 2s infinite linear;background-color:var(--tn-primary, #3b82f6);opacity:1!important;z-index:999!important}@keyframes tn-progress-bar-indeterminate{0%{transform:translate(-100%) scaleX(.3)}to{transform:translate(100%) scaleX(.3)}}:host(.tn-progress-bar-buffer) .tn-progress-bar-buffer-bar{opacity:1}:host(.tn-progress-bar-buffer) .tn-progress-bar-buffer-dots{opacity:1}:host(.tn-progress-bar-determinate) .tn-progress-bar-buffer-dots{display:none}:host(.tn-progress-bar-determinate) .tn-progress-bar-secondary-bar{display:none}:host(.tn-progress-bar-buffer) .tn-progress-bar-secondary-bar{display:none}:host(.tn-progress-bar-indeterminate) .tn-progress-bar-buffer-dots{display:none}:host(.tn-progress-bar-indeterminate) .tn-progress-bar-buffer-bar{display:none}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
 
-/**
- * The accessible name this bar falls back to when the caller names neither
- * `ariaLabel` nor `ariaLabelledby` (#209).
- *
- * The same string and the same reasoning as `TN_PROGRESS_BAR_DEFAULT_LABEL`
- * next door, and deliberately a separate constant rather than an import of it:
- * `tnAccessibleName` takes a fallback PER COMPONENT because the least-bad
- * generic name differs by what the component is ("Progress" for a bar,
- * "Loading" for a spinner), and sharing the binding would make a future
- * divergence in one a silent change to the other. Exported so specs assert
- * against it by name rather than by a copied string literal.
- */
-const TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL = 'Progress';
 /**
  * The gap in px between the edge of the SVG and each end of the track, on both
  * sides — the `x` the two rects are drawn at, and half of what is subtracted
@@ -20466,6 +20966,7 @@ class TnParticleProgressBarComponent {
     canvasRef = viewChild.required('canvas');
     /** Exposed to the template so the rects and the ARIA value share one inset. */
     trackInset = TRACK_INSET;
+    fallbackName = injectTnFallbackName('particleProgressBar');
     /**
      * The name to render, or `null` to render no `aria-label` at all — and the
      * dev-mode warning when the caller named neither input.
@@ -20483,7 +20984,8 @@ class TnParticleProgressBarComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-particle-progress-bar',
-        fallback: TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'progressing',
         ariaLabel: this.ariaLabel,
         ariaLabelledby: this.ariaLabelledby
@@ -24406,27 +24908,6 @@ const TN_DIALOG_DEFAULT_CHROME_LABELS = {
  */
 const TN_DIALOG_CHROME_LABELS = new InjectionToken('TN_DIALOG_CHROME_LABELS', { providedIn: 'root', factory: () => TN_DIALOG_DEFAULT_CHROME_LABELS });
 let nextUniqueId = 0;
-/**
- * The accessible name a dialog falls back to when it renders no `title` and the
- * caller named it through neither this component nor the `DialogConfig` (#219).
- *
- * `title` defaults to `''`, so the DEFAULT rendering of this component put an
- * empty `<h2>` in the header and left the CDK container with no naming
- * attribute at all — measured as `empty-heading` on the heading and
- * `aria-dialog-name` on the dialog. A dialog with no name is announced as
- * "dialog" and nothing else, which is the whole of what a screen-reader user is
- * told about a surface that just took over the page and trapped their focus.
- *
- * "Dialog" is a poor name, and says almost exactly what the role already says.
- * It is still better than the two alternatives: leaving the surface unnamed, or
- * withholding `role="dialog"` until there is a name — the latter would move a
- * listener into a focus trap with no announcement that anything had opened. So
- * it is paired with the dev-mode warning `tnAccessibleName` raises, which is
- * what keeps the fallback from becoming a quiet way to ship a nameless dialog.
- *
- * Exported so specs assert against it by name rather than by a copied literal.
- */
-const TN_DIALOG_SHELL_DEFAULT_LABEL = 'Dialog';
 /**
  * The first value that is a name, or `null` if none of them is one.
  *
@@ -24544,6 +25025,7 @@ class TnDialogShellComponent {
     resolvedAriaLabelledby = computed(() => (this.hasTitle() ? this.titleId : firstNonBlank(this.ariaLabelledby(), this.ref.config?.ariaLabelledBy)), ...(ngDevMode ? [{ debugName: "resolvedAriaLabelledby" }] : []));
     /** An explicit label, from this component's input or from the `DialogConfig`. */
     explicitAriaLabel = computed(() => firstNonBlank(this.ariaLabel(), this.ref.config?.ariaLabel), ...(ngDevMode ? [{ debugName: "explicitAriaLabel" }] : []));
+    fallbackName = injectTnFallbackName('dialog');
     /**
      * The name to render as `aria-label`, or `null` to render none — and the
      * dev-mode warning when the dialog has no name from any route.
@@ -24555,7 +25037,8 @@ class TnDialogShellComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-dialog-shell',
-        fallback: TN_DIALOG_SHELL_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'open',
         hint: 'On this component the usual route is title, which is also the visible heading.',
         ariaLabel: this.explicitAriaLabel,
@@ -24977,25 +25460,6 @@ class TnDialogTesting {
     }
 }
 
-/**
- * The accessible name an open panel falls back to when it has no `title` and the
- * caller named neither `ariaLabel` nor `ariaLabelledby` (#214).
- *
- * `title` defaults to `''`, so the DEFAULT rendering of this component was a
- * `role="dialog"` with `aria-labelledby` pointing at an empty `<h2>` — measured
- * as an `aria-dialog-name` violation, alongside `empty-heading`. A dialog with no
- * name is announced as "dialog" and nothing else, which is the whole of what a
- * screen-reader user gets told about a surface that just covered the page.
- *
- * Withholding `role="dialog"` until there is a name would be the other way to
- * clear the rule, and it is worse: the panel traps focus either way, so a
- * listener would be moved into a region with no announcement that anything had
- * opened. A generic name is still a poor one, so it is paired with the dev-mode
- * warning `tnAccessibleName` raises.
- *
- * Exported so specs assert against it by name rather than by a copied literal.
- */
-const TN_SIDE_PANEL_DEFAULT_LABEL = 'Side panel';
 /**
  * The name given to the scrolling content region once it becomes focusable
  * (#248).
@@ -25202,6 +25666,7 @@ class TnSidePanelComponent {
      * when there is one, the caller's IDREF otherwise.
      */
     resolvedAriaLabelledby = computed(() => (this.hasTitle() ? this.titleId : this.ariaLabelledby()), ...(ngDevMode ? [{ debugName: "resolvedAriaLabelledby" }] : []));
+    fallbackName = injectTnFallbackName('sidePanel');
     /**
      * The name to render as `aria-label`, or `null` to render none — and the
      * dev-mode warning when the panel has no name from any route.
@@ -25213,7 +25678,8 @@ class TnSidePanelComponent {
      */
     resolvedAriaLabel = tnAccessibleName({
         selector: 'tn-side-panel',
-        fallback: TN_SIDE_PANEL_DEFAULT_LABEL,
+        fallback: this.fallbackName.label,
+        fallbackIsConfigured: this.fallbackName.configured,
         activity: 'open',
         hint: 'On this component the usual route is title, which is also the visible heading.',
         ariaLabel: this.ariaLabel,
@@ -28150,5 +28616,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map