@truenas/ui-components 0.6.2 → 0.7.1

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
@@ -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,
@@ -9634,6 +9778,12 @@ class TnRadioComponent {
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Test-id base. The element type this composes with is `radio-button`, not `radio`: the id
+     * identifies one radio BUTTON within a `radio-group`, matching the `radio-group`/`radio-button`
+     * pair every other grouped control in this library uses (`button-toggle-group`/`button-toggle`).
+     * So `testId="email"` yields `radio-button-email`.
+     */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /** Test-id base, falling back to the bound control name when `testId` is unset. */
     resolvedTestId = controlTestId(this.testId);
@@ -9747,7 +9897,7 @@ class TnRadioComponent {
                 useExisting: forwardRef(() => TnRadioComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "radioEl", first: true, predicate: ["radioEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
+        ], viewQueries: [{ propertyName: "radioEl", first: true, predicate: ["radioEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio-button\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnRadioComponent, decorators: [{
             type: Component,
@@ -9757,7 +9907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnRadioComponent),
                             multi: true
                         }
-                    ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
+                    ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio-button\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
         }], propDecorators: { radioEl: [{ type: i0.ViewChild, args: ['radioEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 /**
@@ -9955,7 +10105,7 @@ class TnRadioGroupComponent {
     /**
      * Test-id base for the group and, scoped by the option label, for every option rendered from
      * `options`: base `encryption` yields `radio-group-encryption` on the group and
-     * `radio-encryption-passphrase` on its options. Falls back to the bound control name.
+     * `radio-button-encryption-passphrase` on its options. Falls back to the bound control name.
      *
      * Projected `<tn-radio>` children keep their own test-id resolution — the group does not reach
      * into content it did not render — so give each one a `testId` of its own.
@@ -20135,23 +20285,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.
@@ -20165,7 +20302,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
@@ -20278,30 +20416,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.
@@ -20317,7 +20438,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
@@ -20376,19 +20498,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
@@ -20460,6 +20569,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.
@@ -20477,7 +20587,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
@@ -24400,27 +24511,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.
  *
@@ -24538,6 +24628,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.
@@ -24549,7 +24640,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,
@@ -24971,25 +25063,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).
@@ -25196,6 +25269,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.
@@ -25207,7 +25281,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,
@@ -28144,5 +28219,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, 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