npm - @truenas/ui-components - Versions diffs - 0.7.9 → 0.7.10 - Mend

@truenas/ui-components 0.7.9 → 0.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/truenas-ui-components.mjs +260 -15
package/fesm2022/truenas-ui-components.mjs.map +1 -1
package/package.json +1 -1
package/types/truenas-ui-components.d.ts +141 -6

package/fesm2022/truenas-ui-components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { Overlay, OverlayPositionBuilder, OverlayModule, createOverlayRef, createNoopScrollStrategy, createGlobalPositionStrategy } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal, PortalModule, DomPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, computed, isSignal, isDevMode, effect, signal, input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, Renderer2, ElementRef, Directive, DestroyRef, untracked, ViewContainerRef, output, viewChild, forwardRef, NgZone, afterNextRender, model, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, viewChildren, ChangeDetectorRef, afterEveryRender, IterableDiffers, booleanAttribute, LOCALE_ID, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
@@ -26982,6 +26982,40 @@ const TN_SIDE_PANEL_CONTENT_LABEL = 'Panel content';
  * why it is copied from the rule at all.
  */
 const TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX = TN_SCROLLABLE_REGION_TOLERANCE_PX;
+/**
+ * Marks the overlay as currently hosted in a CDK overlay (#322).
+ *
+ * It is what makes the overlay render at all — `.tn-side-panel__overlay` is
+ * `display: none` without it. A detached overlay is back inside
+ * `<tn-side-panel>`, whose ancestors the consumer owns, and one of them having a
+ * `transform` would make `position: fixed` resolve against that box instead of
+ * the viewport and paint the closed panel next to it. On `<body>`, where the
+ * overlay used to live unconditionally, that could not happen.
+ *
+ * Applied imperatively rather than bound, for the reason
+ * `TN_SIDE_PANEL_OPEN_CLASS` gives — the two have to land in that order and in
+ * that relationship to the attach.
+ */
+const TN_SIDE_PANEL_ATTACHED_CLASS = 'tn-side-panel__overlay--attached';
+/**
+ * Puts the panel in its open position, and is the class the open/close
+ * transition runs on.
+ *
+ * WHY THIS IS NOT A TEMPLATE BINDING (#322)
+ * -----------------------------------------
+ * Angular refreshes a component's template BEFORE it runs that component's
+ * effects, so a `[class.…--open]="open()"` binding is written while the overlay
+ * is still detached and `display: none`. The effect below then attaches it, and
+ * the browser's first look at the element has it already open — a transition
+ * needs a previous computed style to run from, and there is none. The panel
+ * appears instead of sliding in.
+ *
+ * So the order is owned here instead: attach, force a layout read so the closed
+ * position is what the browser has computed, then add this. It is still applied
+ * inside the same change detection pass the `open` change arrives in, so a spec
+ * that calls `detectChanges()` and asserts on the class sees it.
+ */
+const TN_SIDE_PANEL_OPEN_CLASS = 'tn-side-panel__overlay--open';
 /**
  * Directive to mark an element as a side-panel footer action.
  *
@@ -27041,15 +27075,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * own, focus it yourself once the panel is open; the component leaves focus
  * alone as soon as it is inside the panel. `lib/a11y/initial-focus.ts` holds
  * the reasoning for capturing the container rather than a control.
+ *
+ * WHERE IT RENDERS, AND WHY THAT DECIDES WHAT IT STACKS AGAINST
+ * ------------------------------------------------------------
+ * The panel renders through a CDK `OverlayRef` created WHEN IT OPENS (#322),
+ * which is what makes it stack with `TnDialog`, `tn-menu` and tooltips by open
+ * order: whatever attached last paints on top, in both directions. It used to
+ * append its overlay to `<body>` at construction time with a fixed `z-index`,
+ * and the CDK overlay container is a `<body>` child with the same one — so the
+ * winner was whichever element `<body>` happened to receive last, which follows
+ * nothing a caller can see. A panel opened FROM a dialog landed under that
+ * dialog's backdrop; on a browser with the popover API, where CDK puts its
+ * overlays in the top layer, no `z-index` on a `<body>` child could have won at
+ * all.
+ *
+ * Three things follow from being a CDK overlay, and each replaces something
+ * this component used to do for itself:
+ *
+ * - **Escape reaches the topmost overlay only**, through CDK's
+ *   `OverlayKeyboardDispatcher`, rather than through a `keydown` handler on the
+ *   panel that stopped propagation to keep a dialog underneath from closing too.
+ *   The panel therefore also closes on Escape pressed outside it, which is what
+ *   `TnDialog` does — `tn-drawer` still binds `keydown` on its own panel and
+ *   does not.
+ * - **A CDK dialog opened over an open panel hides the panel from assistive
+ *   technology.** CDK does this by sweeping the overlay container's SIBLINGS,
+ *   which no longer includes the panel, so the component tracks it — see
+ *   `dialogsAbove`.
+ * - **A consumer no longer re-homes the overlay or overrides its `z-index` and
+ *   `pointer-events`.** There is no `z-index` on it any more; the CDK pane it
+ *   lives in carries the stacking.
  */
 class TnSidePanelComponent {
     iconRegistry = inject(TnIconRegistryService);
     document = inject(DOCUMENT);
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    dialog = inject(Dialog);
     overlayRef = viewChild.required('overlay');
     panelRef = viewChild.required('panel');
     contentRef = viewChild.required('content');
     initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+    /**
+     * The CDK overlay currently hosting `overlayRef`'s element, or `null` while
+     * the panel is closed (#322).
+     *
+     * **Created on open and disposed once the close has settled**, not once for
+     * the component's lifetime. That is the whole mechanism: CDK decides stacking
+     * by the order overlays ATTACH — `showPopover()` order in the top layer, and
+     * `_updateStackingOrder()`'s move to the end of the container where the
+     * popover API is missing — so an overlay created when the component was built
+     * would stack by construction order, which for a panel rendered inside a
+     * dialog is exactly backwards.
+     *
+     * Non-null is therefore also the answer to "is this panel currently one of
+     * the overlays on screen", which is what `dialogsAbove` keys off.
+     */
+    cdkOverlay = null;
+    /** Escape handling for the overlay above, dropped with it. */
+    keydowns = null;
+    /**
+     * The CDK dialogs currently covering this panel (#322).
+     *
+     * The panel is hidden from assistive technology while this is non-empty,
+     * which is what CDK's own `Dialog` does for everything outside the overlay
+     * container — it sweeps the container's SIBLINGS, and a panel that now lives
+     * INSIDE the container is not one. A dialog already open when the panel opens
+     * is underneath it and never joins this; only dialogs that arrive afterwards
+     * are above.
+     *
+     * A SET RATHER THAN A COUNT, and each dialog removes ITSELF. Nothing
+     * unsubscribes a dialog's `closed` when the panel closes underneath it — the
+     * panel cannot outlive its own release to do that — so with a count, a
+     * dialog opened during one open and closed during the NEXT one decremented a
+     * tally it had never contributed to, and put the panel back in the
+     * accessibility tree with a live modal still stacked over it. Removing a
+     * member that is not there is a no-op, which is the property a count does
+     * not have.
+     *
+     * Emptied only when the last one goes, on the same reasoning as CDK's
+     * `_removeOpenDialog`: two stacked dialogs closing one at a time must not
+     * un-hide the panel while one is still covering it.
+     */
+    dialogsAbove = signal(new Set(), ...(ngDevMode ? [{ debugName: "dialogsAbove" }] : []));
     /**
      * Whether the content region carries the tab stop, its role and its name
      * (#248) — which is NOT the same question as whether it currently overflows.
@@ -27062,10 +27170,14 @@ class TnSidePanelComponent {
      * answer is held true while the region has focus, and why `role` and
      * `aria-label` are gated on the same signal as `tabindex` rather than left on.
      *
-     * Read in `afterNextRender`, which is where the helper takes its first
-     * measurement — before the overlay is portaled to `<body>` below, which does
-     * not affect it: `.tn-side-panel__overlay` is `position: fixed; inset: 0`, so
-     * its size comes from the viewport rather than from its parent.
+     * The helper's FIRST measurement reads a closed panel, which is
+     * `display: none` since #322 and so reads as not overflowing. That is the
+     * right answer for a panel nobody can reach yet, and it does not stick: the
+     * helper's `ResizeObserver` fires when the overlay attaches and the region
+     * gets a box, which is the same instrument that already answered a viewport
+     * resize. Once open, `.tn-side-panel__overlay` is `position: fixed;
+     * inset: 0`, so the region's size comes from the viewport rather than from
+     * whichever CDK pane is hosting it.
      */
     contentKeyboardReachable = tnScrollableRegion(() => this.contentRef().nativeElement);
     // Two-way bindable via [(open)]
@@ -27179,6 +27291,14 @@ class TnSidePanelComponent {
         ariaLabel: this.ariaLabel,
         ariaLabelledby: this.resolvedAriaLabelledby,
     });
+    /**
+     * Whether the overlay is out of the accessibility tree: closed, or covered by
+     * a CDK dialog that opened over it (#322).
+     *
+     * The two are one attribute because they are one question, and rendering them
+     * from separate bindings would mean the second could clear the first.
+     */
+    hiddenFromAssistiveTech = computed(() => !this.open() || this.dialogsAbove().size > 0, ...(ngDevMode ? [{ debugName: "hiddenFromAssistiveTech" }] : []));
     // Focus restoration
     previouslyFocusedElement = null;
     /**
@@ -27186,8 +27306,22 @@ class TnSidePanelComponent {
      * above fire exactly once per change whether or not a transition ran. A field
      * initializer rather than the constructor, because it registers an `effect`
      * and so needs an injection context.
+     *
+     * It is also what times the overlay's release (#322). The CDK overlay has to
+     * outlive the CLOSE — disposing it puts the element back in this component's
+     * view, where it is `display: none`, so doing that the moment `open` goes
+     * false replaces the slide-out with a disappearance. "The close has settled"
+     * is exactly the question this helper already answers, for a transition that
+     * may never fire.
      */
-    lifecycle = tnTransitionLifecycle(this.open, (open) => (open ? this.opened.emit() : this.closed.emit()));
+    lifecycle = tnTransitionLifecycle(this.open, (open) => {
+        if (open) {
+            this.opened.emit();
+            return;
+        }
+        this.releaseOverlay();
+        this.closed.emit();
+    });
     constructor() {
         this.registerMdiIcons();
         // Moves focus onto the panel when it opens (#227) — the other half of the
@@ -27213,10 +27347,103 @@ class TnSidePanelComponent {
                 this.restoreFocus();
             }
         });
-        afterNextRender(() => {
-            this.document.body.appendChild(this.overlayRef().nativeElement);
-            this.initialized.set(true);
+        // Hosts the overlay in a CDK overlay while the panel is open (#322). The
+        // element it moves is the one this component renders, so the projected
+        // content, the view queries and the bindings on it all survive the move —
+        // which a `TemplatePortal` would not give, since detaching one destroys the
+        // view and takes the caller's content with it.
+        effect(() => {
+            if (this.open()) {
+                this.showOverlay();
+            }
+            else {
+                this.overlayRef().nativeElement.classList.remove(TN_SIDE_PANEL_OPEN_CLASS);
+            }
         });
+        // A dialog opened while this panel is on screen is above it, because CDK
+        // stacks by attach order — so it covers the panel, and the panel leaves the
+        // accessibility tree for as long as it does. Dialogs already open when the
+        // panel opens are underneath it and are not counted: `cdkOverlay` is null
+        // until the panel attaches.
+        this.dialog.afterOpened.pipe(takeUntilDestroyed()).subscribe((ref) => {
+            if (!this.cdkOverlay) {
+                return;
+            }
+            this.dialogsAbove.update((above) => new Set(above).add(ref));
+            ref.closed.pipe(take$1(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                this.dialogsAbove.update((above) => {
+                    const remaining = new Set(above);
+                    remaining.delete(ref);
+                    return remaining;
+                });
+            });
+        });
+        afterNextRender(() => this.initialized.set(true));
+    }
+    /**
+     * Put the overlay on screen, in a CDK overlay created now (#322).
+     *
+     * The three steps are ordered, and the order is the reason this is not two
+     * bindings:
+     *
+     * 1. **Attach**, which is what fixes where the panel sits in the stack.
+     * 2. **Read layout**, which forces the browser to compute the panel's closed
+     *    position in its new home. Without it the attach and the open class land
+     *    in one style update, the browser has no "before" to transition from, and
+     *    the panel appears rather than slides. A deliberate synchronous reflow,
+     *    and the only one: it happens once per open.
+     * 3. **Open**, which is the change the transition runs on.
+     *
+     * Re-entrant on purpose. A panel reopened while its close is still animating
+     * keeps the overlay it already has — the stack has not changed under it, and
+     * `tnTransitionLifecycle` has already cancelled the close that would have
+     * released it.
+     */
+    showOverlay() {
+        const element = this.overlayRef().nativeElement;
+        if (!this.cdkOverlay) {
+            this.cdkOverlay = createOverlayRef(this.injector, {
+                positionStrategy: createGlobalPositionStrategy(this.injector),
+                // The panel is `position: fixed` and fills the viewport, so there is
+                // nothing to reposition or block when the page scrolls.
+                scrollStrategy: createNoopScrollStrategy(),
+                // The panel draws its own backdrop inside the overlay, because it is
+                // the thing that fades with the panel.
+                hasBackdrop: false,
+                // Names the pane, the same way `TnDialog` names its own
+                // `tn-dialog-panel` — it is how anything looking at the overlay
+                // container tells one of these apart from a dialog or a menu.
+                panelClass: 'tn-side-panel-pane',
+            });
+            this.cdkOverlay.attach(new DomPortal(element));
+            element.classList.add(TN_SIDE_PANEL_ATTACHED_CLASS);
+            // Escape, from CDK's keyboard dispatcher, which delivers it to the
+            // TOPMOST attached overlay and nothing else. That is what keeps a dialog
+            // underneath this panel from closing on the same keystroke, and it works
+            // in the other direction too — a dialog raised from the panel takes the
+            // key instead, which a handler on this element could not have known.
+            this.keydowns = this.cdkOverlay
+                .keydownEvents()
+                .subscribe((event) => this.onOverlayKeydown(event));
+        }
+        element.getBoundingClientRect();
+        element.classList.add(TN_SIDE_PANEL_OPEN_CLASS);
+    }
+    /**
+     * Give the CDK overlay back, once the close has finished animating.
+     *
+     * Disposing rather than detaching, so that the next open builds a new overlay
+     * and takes a new place in the stack — see `cdkOverlay`. It restores the
+     * element to this component's own view, where `display: none` keeps it out of
+     * the way until then.
+     */
+    releaseOverlay() {
+        this.keydowns?.unsubscribe();
+        this.keydowns = null;
+        this.cdkOverlay?.dispose();
+        this.cdkOverlay = null;
+        this.dialogsAbove.set(new Set());
+        this.overlayRef().nativeElement.classList.remove(TN_SIDE_PANEL_ATTACHED_CLASS);
     }
     ngOnDestroy() {
         const overlay = this.overlayRef().nativeElement;
@@ -27233,6 +27460,11 @@ class TnSidePanelComponent {
         // in and back to a trigger they left minutes ago. A no-op after an
         // ordinary close either way, which clears `previouslyFocusedElement`.
         const heldFocus = overlay.contains(this.document.activeElement);
+        // Released BEFORE the removal, and unconditionally: a panel destroyed while
+        // open still holds a CDK overlay, and disposing it is what takes the pane
+        // out of the overlay container. The element itself comes back here first,
+        // which is what `remove()` below then takes out of the document.
+        this.releaseOverlay();
         overlay.remove();
         if (heldFocus) {
             this.restoreFocus();
@@ -27257,9 +27489,21 @@ class TnSidePanelComponent {
             this.dismiss();
         }
     }
-    onKeydown(event) {
+    /**
+     * Escape, delivered by CDK's `OverlayKeyboardDispatcher` (#322).
+     *
+     * It arrives only while this panel is the topmost attached overlay, so
+     * nothing here has to decide whether the key was meant for something above or
+     * below — which is what the `stopPropagation` this replaced was standing in
+     * for, and it could only ever guard the direction it knew about.
+     *
+     * `preventDefault` rather than `stopPropagation`, matching CDK's own
+     * `DialogRef`: the key has already been routed, and swallowing it would hide
+     * it from a consumer listening at the document for their own reasons.
+     */
+    onOverlayKeydown(event) {
         if (event.key === 'Escape' && this.closeOnEscape() && this.open()) {
-            event.stopPropagation();
+            event.preventDefault();
             this.dismiss();
         }
     }
@@ -27295,14 +27539,14 @@ class TnSidePanelComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, contentAriaLabel: { classPropertyName: "contentAriaLabel", publicName: "contentAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Overlay wrapper: portaled to document.body.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into \u2014 landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point \u2014 an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full \u2014 including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "tooltipSticky", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, contentAriaLabel: { classPropertyName: "contentAriaLabel", publicName: "contentAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here \u2014 `display: none` \u2014 while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into \u2014 landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) \u2014 the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point \u2014 an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full \u2014 including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "tooltipSticky", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-side-panel', standalone: true, imports: [CommonModule, A11yModule, TnIconButtonComponent, TnTestIdDirective], host: {
                         'class': 'tn-side-panel',
                         '[attr.data-tn-panel]': 'panelId',
-                    }, template: "<!--\n  Overlay wrapper: portaled to document.body.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into \u2014 landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point \u2014 an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full \u2014 including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"] }]
+                    }, template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here \u2014 `display: none` \u2014 while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into \u2014 landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) \u2014 the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point \u2014 an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full \u2014 including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { overlayRef: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeGuard", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", required: false }] }], closeButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonAriaLabel", required: false }] }], contentAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
 /**
@@ -27323,7 +27567,8 @@ class TnSidePanelHarness extends ComponentHarness {
             .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title));
     }
     /**
-     * Locate the overlay wrapper, which may be portaled to document.body.
+     * Locate the overlay wrapper, which is portaled into a CDK overlay while the
+     * panel is open and sits inside the host element while it is not.
      * Uses the data-tn-panel attribute to correlate the host with its overlay.
      */
     async getOverlay() {