@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-sidepanel.mjs

@@ -1,18 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, ChangeDetectorRef, viewChild, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, Injector, TemplateRef, Injectable, Renderer2, input, Input, Directive, booleanAttribute, effect, NgModule } from '@angular/core';
-import { CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
+import { InjectionToken, inject, ElementRef, ChangeDetectorRef, Injector, signal, viewChild, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, untracked, Renderer2, input, Directive, booleanAttribute, effect, isDevMode, TemplateRef, Injectable, NgModule } from '@angular/core';
+import { CdkTrapFocus, ConfigurableFocusTrapFactory, FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i1 from '@koobiq/components/core';
+import { kbqAnimationsDisabled, kbqAfterAnimations, ESCAPE, isHtmlElement, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KbqOverflowShadowContainer, KBQ_STATE_STORE, KbqStateSavingService } from '@koobiq/components/core';
 import { Subject, merge } from 'rxjs';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3 from '@koobiq/components/core';
-import { KbqAnimationDurations, KbqAnimationCurves, ESCAPE, isHtmlElement, KbqOverflowShadowContainer } from '@koobiq/components/core';
-import * as i1 from '@koobiq/components/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i2 from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
+import * as i4 from '@koobiq/components/scrollbar';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
 import { KbqTitleDirective, KbqTitleModule } from '@koobiq/components/title';
 import { filter, take, tap } from 'rxjs/operators';
-import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 
 /** Injection token that can be used to access the data that was passed in to a sidepanel. */
 const KBQ_SIDEPANEL_DATA = new InjectionToken('KbqSidepanelData');
@@ -44,6 +46,7 @@ class KbqSidepanelConfig {
     }
 }
 
+/** @internal */
 var KbqSidepanelAnimationState;
 (function (KbqSidepanelAnimationState) {
     KbqSidepanelAnimationState["Void"] = "void";
@@ -53,7 +56,7 @@ var KbqSidepanelAnimationState;
     KbqSidepanelAnimationState["BottomPanel"] = "bottom-panel";
     KbqSidepanelAnimationState["BecomingNormal"] = "becoming-normal";
 })(KbqSidepanelAnimationState || (KbqSidepanelAnimationState = {}));
-// TODO Find a way to use dynamic keys and avoid error "Expression form not supported."
+/** @internal */
 const kbqSidepanelTransformAnimation = {
     right: {
         in: 'translateX(100%)',
@@ -84,27 +87,6 @@ const kbqSidepanelTransformAnimation = {
         becomingNormal: 'translateY(0%) scale(1)'
     }
 };
-const kbqSidepanelAnimations = {
-    sidepanelState: trigger('state', [
-        state(KbqSidepanelAnimationState.Void, style({ opacity: 0 })),
-        state(KbqSidepanelAnimationState.Hidden, style({ transform: '{{transformIn}}' }), {
-            params: { transformIn: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].in }
-        }),
-        state(KbqSidepanelAnimationState.Visible, style({ transform: '{{transformOut}}', opacity: 1 }), {
-            params: { transformOut: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].out }
-        }),
-        state(KbqSidepanelAnimationState.Lower, style({ transform: '{{lower}}', opacity: 1 }), {
-            params: { lower: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].lower }
-        }),
-        state(KbqSidepanelAnimationState.BottomPanel, style({ transform: '{{bottomPanel}}', opacity: 0 }), {
-            params: { bottomPanel: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].bottomPanel }
-        }),
-        state(KbqSidepanelAnimationState.BecomingNormal, style({ transform: '{{becomingNormal}}', opacity: 1 }), {
-            params: { becomingNormal: kbqSidepanelTransformAnimation[KbqSidepanelPosition.Right].becomingNormal }
-        }),
-        transition('* <=> *', animate(`${KbqAnimationDurations.Long} ${KbqAnimationCurves.EaseInOutQuad}`))
-    ])
-};
 
 const KBQ_SIDEPANEL_WITH_INDENT = new InjectionToken('kbq-sidepanel-with-indent');
 class KbqSidepanelContainerComponent extends BasePortalOutlet {
@@ -112,24 +94,101 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
         super(...arguments);
         this.elementRef = inject(ElementRef);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.injector = inject(Injector);
         this.sidepanelConfig = inject(KbqSidepanelConfig);
-        this.withIndent = inject(KBQ_SIDEPANEL_WITH_INDENT);
+        /** Whether the sidepanel moves without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        this._withIndent = signal(inject(KBQ_SIDEPANEL_WITH_INDENT), ...(ngDevMode ? [{ debugName: "_withIndent" }] : /* istanbul ignore next */ []));
+        // A signal: the header reports its title while this view is being checked, which a `markForCheck` would miss.
+        this._ariaLabelledBy = signal(this.sidepanelConfig.ariaLabelledBy ?? null, ...(ngDevMode ? [{ debugName: "_ariaLabelledBy" }] : /* istanbul ignore next */ []));
         /** The portal outlet inside of this container into which the content will be loaded. */
         this.portalOutlet = viewChild.required(CdkPortalOutlet);
-        /** The state of the sidepanel animations. */
-        this.animationState = KbqSidepanelAnimationState.Void;
-        /** Emits whenever the state of the animation changes. */
-        this.animationStateChanged = new EventEmitter();
+        /**
+         * The state of the sidepanel: on screen, closing, or stacked under another one.
+         *
+         * @internal
+         */
+        this.animationState = signal(KbqSidepanelAnimationState.Void, ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
+        /**
+         * Reports each state transition starting and ending.
+         *
+         * @internal
+         */
+        this.animationStateChanged = new Subject();
+        /** Transition events held until the render that applies the state, in the order they happened. */
+        this.unreportedEvents = [];
         /** @docs-private */
         this.indentClickEmitter = new Subject();
+        /**
+         * Transform of the panel in its current state.
+         *
+         * @internal
+         */
+        this.stateTransform = computed(() => {
+            const transforms = kbqSidepanelTransformAnimation[this.position];
+            switch (this.animationState()) {
+                case KbqSidepanelAnimationState.Hidden:
+                    return transforms.in;
+                case KbqSidepanelAnimationState.Visible:
+                    return transforms.out;
+                case KbqSidepanelAnimationState.Lower:
+                    return transforms.lower;
+                case KbqSidepanelAnimationState.BottomPanel:
+                    return transforms.bottomPanel;
+                case KbqSidepanelAnimationState.BecomingNormal:
+                    return transforms.becomingNormal;
+                default:
+                    return null;
+            }
+        }, ...(ngDevMode ? [{ debugName: "stateTransform" }] : /* istanbul ignore next */ []));
+        /**
+         * Opacity of the panel in its current state.
+         *
+         * @internal
+         */
+        this.stateOpacity = computed(() => {
+            switch (this.animationState()) {
+                case KbqSidepanelAnimationState.Void:
+                case KbqSidepanelAnimationState.BottomPanel:
+                    return 0;
+                case KbqSidepanelAnimationState.Hidden:
+                    return null;
+                default:
+                    return 1;
+            }
+        }, ...(ngDevMode ? [{ debugName: "stateOpacity" }] : /* istanbul ignore next */ []));
+    }
+    /** Whether the panel exposes the clickable indent strip of the sidepanel stacked underneath it. */
+    get withIndent() {
+        return this._withIndent();
+    }
+    set withIndent(value) {
+        this._withIndent.set(value);
+    }
+    /**
+     * Id of the element naming the sidepanel. Comes from the config, or from `kbq-sidepanel-header`.
+     *
+     * @docs-private
+     */
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy();
     }
     /** @docs-private */
-    get size() {
-        return `kbq-sidepanel_${this.sidepanelConfig.size}`;
+    set ariaLabelledBy(value) {
+        this._ariaLabelledBy.set(value);
     }
     /** @docs-private */
+    get size() {
+        return `kbq-sidepanel_${this.sidepanelConfig.size ?? KbqSidepanelSize.Medium}`;
+    }
+    /**
+     * Defaults to `true` in both modalities: it is what moves focus into the panel on open and returns
+     * it to the trigger on close, and `CdkTrapFocus` restores focus only when it captured it.
+     *
+     * @docs-private
+     */
     get trapFocusAutoCapture() {
-        return this.sidepanelConfig.trapFocusAutoCapture ?? !!this.sidepanelConfig.hasBackdrop;
+        return this.sidepanelConfig.trapFocusAutoCapture ?? true;
     }
     /** @docs-private */
     get trapFocus() {
@@ -149,14 +208,17 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
     /** Attach a component portal as content to this sidepanel container. */
     attachComponentPortal(portal) {
         this.validatePortalAttached();
-        this.setAnimation();
         this.setPanelClass();
-        return this.portalOutlet().attachComponentPortal(portal);
+        const componentRef = this.portalOutlet().attachComponentPortal(portal);
+        // The portal outlet inserts the attached component's own host element between
+        // `.kbq-sidepanel-content` and the header/body/footer, and a plain block there takes the
+        // body out of the flex column that makes it scroll.
+        componentRef.location.nativeElement.classList.add('kbq-sidepanel-content-host');
+        return componentRef;
     }
     /** Attach a template portal as content to this sidepanel container. */
     attachTemplatePortal(portal) {
         this.validatePortalAttached();
-        this.setAnimation();
         this.setPanelClass();
         return this.portalOutlet().attachTemplatePortal(portal);
     }
@@ -164,8 +226,9 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
     enter() {
         if (this.destroyed)
             return;
-        this.animationState = KbqSidepanelAnimationState.Visible;
+        this.animationState.set(KbqSidepanelAnimationState.Visible);
         this.changeDetectorRef.detectChanges();
+        this.startTransition(KbqSidepanelAnimationState.Visible);
     }
     /** Begin animation of the sidepanel exiting from view. */
     exit() {
@@ -173,56 +236,97 @@ class KbqSidepanelContainerComponent extends BasePortalOutlet {
             return;
         this.setAnimationState(KbqSidepanelAnimationState.Hidden);
     }
-    /** @docs-private */
-    onAnimation(event) {
-        this.animationStateChanged.emit(event);
-    }
-    /** @docs-private */
+    /** @internal */
     setAnimationState(state) {
-        this.animationState = state;
-        this.changeDetectorRef.markForCheck();
-    }
-    setAnimation() {
-        const position = this.sidepanelConfig.position;
-        this.animationTransform = {
-            transformIn: kbqSidepanelTransformAnimation[position].in,
-            transformOut: kbqSidepanelTransformAnimation[position].out,
-            lower: kbqSidepanelTransformAnimation[position].lower,
-            bottomPanel: kbqSidepanelTransformAnimation[position].bottomPanel,
-            becomingNormal: kbqSidepanelTransformAnimation[position].becomingNormal
-        };
+        if (this.destroyed)
+            return;
+        this.animationState.set(state);
+        this.startTransition(state);
+    }
+    /**
+     * Recomputes whether this panel exposes an indent strip, after the stack it belongs to changed.
+     *
+     * @docs-private
+     */
+    setWithIndent(withIndent) {
+        this.withIndent = withIndent;
+    }
+    /**
+     * Names the sidepanel after the title of its header. A name given through the config wins.
+     *
+     * @docs-private
+     */
+    setAriaLabelledBy(id) {
+        if (this.ariaLabelledBy !== null)
+            return;
+        this.ariaLabelledBy = id;
+    }
+    /**
+     * Reports the transition to `state` starting, and ending once its CSS transition has.
+     *
+     * Both are reported after the render that applies the state, as the animation engine did, and never inside
+     * `open()` or `close()`: a subscriber that opens another sidepanel would otherwise do so before the stack the
+     * call is changing is complete, and one that subscribes right after the call would miss the start.
+     */
+    startTransition(state) {
+        const pending = this.pendingTransition;
+        if (pending) {
+            pending.wait.destroy();
+            this.holdEvent({ phaseName: 'done', toState: pending.state });
+        }
+        this.holdEvent({ phaseName: 'start', toState: state });
+        const wait = kbqAfterAnimations(() => this.elementRef.nativeElement, () => {
+            this.pendingTransition = undefined;
+            this.unreportedEvents.push({ phaseName: 'done', toState: state });
+            this.reportEvents();
+        }, this.injector);
+        this.pendingTransition = { state, wait };
+    }
+    holdEvent(event) {
+        this.unreportedEvents.push(event);
+        this.reportAfterRender ??= afterNextRender(() => this.reportEvents(), { injector: this.injector });
+    }
+    reportEvents() {
+        this.reportAfterRender?.destroy();
+        // One at a time: a subscriber that moves the panel again holds more events, which follow in order.
+        for (let event = this.unreportedEvents.shift(); event; event = this.unreportedEvents.shift()) {
+            this.animationStateChanged.next(event);
+        }
+        this.reportAfterRender = undefined;
     }
     setPanelClass() {
-        const element = this.elementRef.nativeElement;
-        const position = this.sidepanelConfig.position;
-        element.classList.add(`kbq-sidepanel-container_${position}`);
+        this.elementRef.nativeElement.classList.add(`kbq-sidepanel-container_${this.position}`);
+    }
+    get position() {
+        return this.sidepanelConfig.position ?? KbqSidepanelPosition.Right;
     }
     validatePortalAttached() {
         if (this.portalOutlet().hasAttached()) {
             throw Error('Attempting to attach sidepanel content after content is already attached');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)" }, properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "@state": "{\n            value: animationState,\n            params: animationTransform\n        }" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [kbqSidepanelAnimations.sidepanelState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSidepanelContainerComponent, isStandalone: true, selector: "kbq-sidepanel-container", host: { properties: { "class": "size", "class.kbq-sidepanel_nested": "withIndent", "attr.id": "id", "attr.tabindex": "-1", "attr.role": "\"dialog\"", "attr.aria-modal": "trapFocus ? \"true\" : null", "attr.aria-label": "sidepanelConfig.ariaLabel ?? null", "attr.aria-labelledby": "ariaLabelledBy", "class.kbq-animations-disabled": "animationsDisabled", "style.transform": "stateTransform()", "style.opacity": "stateOpacity()" }, classAttribute: "kbq-sidepanel-container kbq-sidepanel-container_shadowed" }, providers: [{ provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0;transition:transform .3s cubic-bezier(.455,.03,.515,.955),opacity .3s cubic-bezier(.455,.03,.515,.955);animation:kbq-sidepanel-enter .3s cubic-bezier(.455,.03,.515,.955)}.kbq-sidepanel-container.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-sidepanel-container{animation:none;transition:none}}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{--kbq-sidepanel-transform-in: translateX(100%);right:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{--kbq-sidepanel-transform-in: translateX(-100%);left:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{--kbq-sidepanel-transform-in: translateY(-100%);top:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{--kbq-sidepanel-transform-in: translateY(100%);bottom:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-sidepanel-content{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-sidepanel-content-host{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}@keyframes kbq-sidepanel-enter{0%{opacity:0;transform:var(--kbq-sidepanel-transform-in)}}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-sidepanel-overlay-background)}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}.kbq-overlay-dark-backdrop{--kbq-sidepanel-overlay-background: var(--kbq-background-overlay)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-sidepanel-container', imports: [
                         CdkPortalOutlet,
                         CdkTrapFocus
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                    ], providers: [{ provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-sidepanel-container kbq-sidepanel-container_shadowed',
                         '[class]': 'size',
                         '[class.kbq-sidepanel_nested]': 'withIndent',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': '-1',
-                        '[@state]': `{
-            value: animationState,
-            params: animationTransform
-        }`,
-                        '(@state.start)': 'onAnimation($event)',
-                        '(@state.done)': 'onAnimation($event)'
-                    }, animations: [kbqSidepanelAnimations.sidepanelState], template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{right:0;transform:translate(100%)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{left:0;transform:translate(-100%)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{top:0;transform:translateY(-100%)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{bottom:0;transform:translateY(100%)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-background-overlay)!important}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-overlay-background: var(--kbq-background-overlay);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-modal]': 'trapFocus ? "true" : null',
+                        '[attr.aria-label]': 'sidepanelConfig.ariaLabel ?? null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled',
+                        '[style.transform]': 'stateTransform()',
+                        '[style.opacity]': 'stateOpacity()'
+                    }, template: "<div class=\"kbq-sidepanel-wrapper\">\n    @if (withIndent) {\n        <div class=\"kbq-sidepanel-indent\" (click)=\"indentClickEmitter.next($event)\"></div>\n    }\n\n    <div class=\"kbq-sidepanel-content\" [cdkTrapFocus]=\"trapFocus\" [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture\">\n        <ng-template cdkPortalOutlet />\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-container{outline:none;display:flex;flex:1;position:fixed;min-height:0;transition:transform .3s cubic-bezier(.455,.03,.515,.955),opacity .3s cubic-bezier(.455,.03,.515,.955);animation:kbq-sidepanel-enter .3s cubic-bezier(.455,.03,.515,.955)}.kbq-sidepanel-container.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-sidepanel-container{animation:none;transition:none}}.kbq-sidepanel-container .flex{min-height:0}.kbq-sidepanel-container.kbq-sidepanel-container_left,.kbq-sidepanel-container.kbq-sidepanel-container_right{height:100%;top:0;max-width:100%}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_small,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_small{width:var(--kbq-sidepanel-size-small-width);max-width:var(--kbq-sidepanel-size-small-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_medium,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_medium{width:var(--kbq-sidepanel-size-medium-width);max-width:var(--kbq-sidepanel-size-medium-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left.kbq-sidepanel_large,.kbq-sidepanel-container.kbq-sidepanel-container_right.kbq-sidepanel_large{width:var(--kbq-sidepanel-size-large-width)}.kbq-sidepanel-container.kbq-sidepanel-container_left .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_right .kbq-sidepanel-indent{width:var(--kbq-sidepanel-size-panel-lower-offset);height:100%}.kbq-sidepanel-container.kbq-sidepanel-container_top,.kbq-sidepanel-container.kbq-sidepanel-container_bottom{flex-direction:column;height:33%;min-height:400px;width:calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));left:0}.kbq-sidepanel-container.kbq-sidepanel-container_top .kbq-sidepanel-indent,.kbq-sidepanel-container.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{height:var(--kbq-sidepanel-size-panel-lower-offset);width:100%}.kbq-sidepanel-container_right{--kbq-sidepanel-transform-in: translateX(100%);right:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_right .kbq-sidepanel-wrapper{flex-direction:row}.kbq-sidepanel-container_right .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_right{transform-origin:center left}.kbq-sidepanel-container_left{--kbq-sidepanel-transform-in: translateX(-100%);left:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_left .kbq-sidepanel-wrapper{flex-direction:row-reverse}.kbq-sidepanel-container_left .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_left{transform-origin:center right}.kbq-sidepanel-container_top{--kbq-sidepanel-transform-in: translateY(-100%);top:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_top .kbq-sidepanel-wrapper{flex-direction:column-reverse}.kbq-sidepanel-container_top .kbq-sidepanel-content{margin-top:var(--kbq-sidepanel-size-panel-viewport-margin);margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_top{transform-origin:center bottom}.kbq-sidepanel-container_bottom{--kbq-sidepanel-transform-in: translateY(100%);bottom:0;transform:var(--kbq-sidepanel-transform-in)}.kbq-sidepanel-container_bottom .kbq-sidepanel-wrapper{flex-direction:column}.kbq-sidepanel-container_bottom .kbq-sidepanel-content{margin-right:var(--kbq-sidepanel-size-panel-viewport-margin);margin-bottom:var(--kbq-sidepanel-size-panel-viewport-margin);margin-left:var(--kbq-sidepanel-size-panel-viewport-margin)}.kbq-sidepanel-container_bottom{transform-origin:center top}.kbq-sidepanel-wrapper{display:flex;flex:1;min-height:0;width:100%;position:relative}.kbq-sidepanel-indent{display:flex;flex:0 0 auto;cursor:pointer;position:absolute}.kbq-sidepanel-container_top .kbq-sidepanel-indent{bottom:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_right .kbq-sidepanel-indent{left:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_bottom .kbq-sidepanel-indent{top:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-container_left .kbq-sidepanel-indent{right:calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset))}.kbq-sidepanel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-sidepanel-content{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-sidepanel-content-host{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.kbq-sidepanel-header{display:flex;align-items:baseline;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right) var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left)}.kbq-sidepanel-header .kbq-sidepanel-close{margin-left:var(--kbq-sidepanel-size-close-button-margin-left)}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text{align-items:center}.kbq-sidepanel-header.kbq-sidepanel-header_truncate-text .kbq-sidepanel-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-sidepanel-title{flex:1}.kbq-sidepanel-body{overflow-y:auto;display:flex;flex:1;flex-direction:column;min-height:0;padding:var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal) var(--kbq-sidepanel-size-content-padding-bottom)}.kbq-sidepanel-footer{display:flex;align-items:center;justify-content:space-between;flex-flow:row nowrap;flex:0 0 auto;transition:box-shadow .1s ease-in-out;padding:var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal) var(--kbq-sidepanel-size-footer-padding-bottom)}.kbq-sidepanel-footer .kbq-sidepanel-actions{display:flex;align-items:center;flex-direction:row;flex:1}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=left]{justify-content:start}.kbq-sidepanel-footer .kbq-sidepanel-actions[align=right]{justify-content:flex-end}.kbq-sidepanel-footer .kbq-sidepanel-actions{gap:var(--kbq-sidepanel-size-footer-content-gap-horizontal)}@keyframes kbq-sidepanel-enter{0%{opacity:0;transform:var(--kbq-sidepanel-transform-in)}}.kbq-sidepanel-title{color:var(--kbq-sidepanel-header-text-color)}.kbq-sidepanel-content{background-color:var(--kbq-sidepanel-container-background);color:var(--kbq-sidepanel-content-text-color)}.kbq-sidepanel-container_shadowed .kbq-sidepanel-content{box-shadow:var(--kbq-sidepanel-container-shadow)}.kbq-overlay-dark-backdrop{background:var(--kbq-sidepanel-overlay-background)}.kbq-sidepanel-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-sidepanel-container,.kbq-sidepanel-footer{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-sidepanel-container{--kbq-sidepanel-size-small-width: 400px;--kbq-sidepanel-size-medium-width: 640px;--kbq-sidepanel-size-large-width: 960px;--kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);--kbq-sidepanel-size-header-padding-left: var(--kbq-size-xxl);--kbq-sidepanel-size-header-padding-right: var(--kbq-size-l);--kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);--kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);--kbq-sidepanel-size-panel-viewport-margin: var(--kbq-size-s);--kbq-sidepanel-size-panel-lower-offset: var(--kbq-size-l);--kbq-sidepanel-size-content-padding-top: 1px;--kbq-sidepanel-size-footer-padding-top: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-xl);--kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-sidepanel-container-background: var(--kbq-background-card);--kbq-sidepanel-container-shadow: var(--kbq-shadow-popup);--kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);--kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast)}.kbq-overlay-dark-backdrop{--kbq-sidepanel-overlay-background: var(--kbq-background-overlay)}\n"] }]
         }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
 // Counter for unique sidepanel ids.
@@ -236,16 +340,18 @@ class KbqSidepanelRef {
          * Vertical scroll overflow state of the sidepanel body.
          * Updated on scroll and used for visual adjustments.
          */
-        this.bodyOverflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : []));
+        this.bodyOverflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : /* istanbul ignore next */ []));
         /** Subject for notifying the user that the sidepanel has been closed and dismissed. */
         this.afterClosed$ = new Subject();
         /** Subject for notifying the user that the sidepanel starting closing. */
         this.beforeClosed$ = new Subject();
         /** Subject for notifying the user that the sidepanel has opened and appeared. */
         this.afterOpened$ = new Subject();
+        /** Whether `close()` has already started the closing animation. */
+        this.closing = false;
         this.id = this.config.id || `kbq-sidepanel-${uniqueId++}`;
         this.containerInstance.id = this.id;
-        overlayRef.backdropElement?.classList?.add(config.backdropClass ?? 'kbq-overlay-dark-backdrop');
+        overlayRef.backdropElement?.classList.add(config.backdropClass ?? 'kbq-overlay-dark-backdrop');
         const slideBelowStart = containerInstance.animationStateChanged.pipe(filter((event) => event.phaseName === 'start' &&
             [KbqSidepanelAnimationState.Lower, KbqSidepanelAnimationState.BottomPanel].includes(event.toState)));
         // Act on close
@@ -280,25 +386,41 @@ class KbqSidepanelRef {
             this.afterClosed$.next(this.result);
             this.afterClosed$.complete();
         });
-        merge(overlayRef.backdropClick(), overlayRef.keydownEvents().pipe(
+        overlayRef
+            .keydownEvents()
+            .pipe(
         // keyCode is deprecated, but IE11 and Edge don't support code property, which we need use instead
-        filter((event) => event.keyCode === ESCAPE)), this.containerInstance.indentClick(), overlayRef
-            .outsidePointerEvents()
-            .pipe(filter((event) => isHtmlElement(event.target) && !!event.target.closest('.kbq-sidepanel-container')))).subscribe(() => {
+        filter((event) => event.keyCode === ESCAPE))
+            .subscribe((event) => {
+            // CDK hands the key to this overlay after the layers above it, such as a tooltip, a popover or a
+            // confirm dialog, have handled it: one that closed spent it, and the sidepanel stays open.
+            if (event.defaultPrevented || this.config.disableClose)
+                return;
+            event.preventDefault();
+            this.close();
+        });
+        merge(overlayRef.backdropClick(), this.containerInstance.indentClick(), overlayRef.outsidePointerEvents().pipe(filter((event) => this.isClickInsideSamePositionStack(event)))).subscribe(() => {
             if (this.config.disableClose)
                 return;
             this.close();
         });
     }
     close(result) {
-        if (!this.afterClosed$.closed) {
-            // Transition the backdrop in parallel to the sidepanel.
-            this.containerInstance.animationStateChanged
-                .pipe(filter((event) => event.phaseName === 'done'), take(1))
-                .subscribe(() => this.overlayRef.detachBackdrop());
-            this.result = result;
-            this.containerInstance.exit();
-        }
+        // Untracked, as `KbqSidepanelService.open()`: called from a consumer's `effect()`, the state of the sidepanels
+        // stacked under this one, read and written on the way, would make the effect run again as they move.
+        untracked(() => this.startClosing(result));
+    }
+    /** Body of `close()`. */
+    startClosing(result) {
+        if (this.closing)
+            return;
+        this.closing = true;
+        // Transition the backdrop in parallel to the sidepanel.
+        this.containerInstance.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'done'), take(1))
+            .subscribe(() => this.overlayRef.detachBackdrop());
+        this.result = result;
+        this.containerInstance.exit();
     }
     /** Gets an observable that is notified when the sidepanel is started closing. */
     beforeClosed() {
@@ -312,46 +434,321 @@ class KbqSidepanelRef {
     afterOpened() {
         return this.afterOpened$.asObservable();
     }
+    /**
+     * A pointer event outside this overlay closes the sidepanel only when it lands in a sidepanel of the
+     * same stack — that is the exposed strip of a panel opened over this one. Panels at other edges do
+     * not overlap this one and must not close it.
+     */
+    isClickInsideSamePositionStack(event) {
+        if (!isHtmlElement(event.target))
+            return false;
+        const container = event.target.closest('.kbq-sidepanel-container');
+        return !!container && container.classList.contains(`kbq-sidepanel-container_${this.config.position}`);
+    }
 }
 
+/**
+ * Button that will close the current sidepanel.
+ */
+class KbqSidepanelClose {
+    constructor() {
+        // `CdkPortalOutlet.attachTemplatePortal()` forwards the portal injector to the embedded view, so the
+        // ref is reachable from a `<ng-template>` sidepanel as well as from a component one.
+        this.sidepanelRef = inject(KbqSidepanelRef);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        /** Value handed to `KbqSidepanelRef.close()`, under the hyphenated spelling of the selector. */
+        this.sidepanelResult = input(undefined, { ...(ngDevMode ? { debugName: "sidepanelResult" } : /* istanbul ignore next */ {}), alias: 'kbq-sidepanel-close' });
+        /** The same value, under the camel-case spelling. */
+        this.kbqSidepanelClose = input(...(ngDevMode ? [undefined, { debugName: "kbqSidepanelClose" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            // A button with no type submits the form it sits in, so closing a sidepanel from inside a form would
+            // submit it too. A type the author set is left alone. The element carries its static attributes by
+            // the time a directive is constructed, so this needs no lifecycle hook.
+            if (!this.elementRef.nativeElement.hasAttribute('type')) {
+                this.renderer.setAttribute(this.elementRef.nativeElement, 'type', 'button');
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: true, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())" }, classAttribute: "kbq-sidepanel-close" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
+                    host: {
+                        class: 'kbq-sidepanel-close',
+                        // The camel-case spelling wins when a template binds both, as it did before.
+                        '(click)': 'sidepanelRef.close(kbqSidepanelClose() ?? sidepanelResult())'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { sidepanelResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-sidepanel-close", required: false }] }], kbqSidepanelClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSidepanelClose", required: false }] }] } });
+/**
+ * Header of a sidepanel.
+ */
+class KbqSidepanelHeader {
+    constructor() {
+        /** Accessible name for the icon-only close button. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        /** Add button for close sidepanel. Default false */
+        this.closeable = input(false, { ...(ngDevMode ? { debugName: "closeable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Enables text truncation. Default true */
+        this.truncateText = input(true, { ...(ngDevMode ? { debugName: "truncateText" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
+        /** Id of the title element, which is what names the sidepanel to assistive technology. */
+        this.titleId = `${this.sidepanelRef.id}-title`;
+        this.sidepanelRef.containerInstance.setAriaLabelledBy(this.titleId);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
+        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
+            <ng-content />
+        </div>
+
+        @if (closeable()) {
+            <button
+                kbq-button
+                kbq-sidepanel-close
+                type="button"
+                [attr.aria-label]="a11yLocaleConfiguration().close"
+                [color]="'contrast'"
+                [kbqStyle]="'transparent'"
+            >
+                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
+            </button>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-sidepanel-header',
+                    imports: [
+                        KbqButtonModule,
+                        KbqSidepanelClose,
+                        KbqIconModule,
+                        KbqTitleDirective
+                    ],
+                    template: `
+        <div class="kbq-sidepanel-title" kbq-title [attr.id]="titleId">
+            <ng-content />
+        </div>
+
+        @if (closeable()) {
+            <button
+                kbq-button
+                kbq-sidepanel-close
+                type="button"
+                [attr.aria-label]="a11yLocaleConfiguration().close"
+                [color]="'contrast'"
+                [kbqStyle]="'transparent'"
+            >
+                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
+            </button>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'kbq-sidepanel-header',
+                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText()',
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
+                    },
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
+/**
+ * Scrollable content container of a sidepanel.
+ */
+class KbqSidepanelBody {
+    constructor() {
+        this.sidepanelRef = inject(KbqSidepanelRef);
+        this.overflowContainer = inject(KbqOverflowShadowContainer);
+        this.scrollbarViewport = inject(KbqScrollbarViewport);
+        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
+        this.sidepanelRef
+            .afterOpened()
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.scrollbarViewport.flashScrollIndicators());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body" }, hostDirectives: [{ directive: i1.KbqOverflowShadowContainer }, { directive: i4.KbqScrollbarViewport }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
+                    host: {
+                        class: 'kbq-sidepanel-body'
+                    },
+                    hostDirectives: [KbqOverflowShadowContainer, KbqScrollbarViewport]
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Footer of a sidepanel.
+ */
+class KbqSidepanelFooter {
+    constructor() {
+        /** @docs-private */
+        this.sidepanelRef = inject(KbqSidepanelRef);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
+                    host: {
+                        class: 'kbq-sidepanel-footer',
+                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
+                    }
+                }]
+        }] });
+/**
+ * Actions block of a sidepanel footer.
+ */
+class KbqSidepanelActions {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
+                    host: {
+                        class: 'kbq-sidepanel-actions'
+                    }
+                }]
+        }] });
+
 /** Injection token that can be used to specify default sidepanel options. */
 const KBQ_SIDEPANEL_DEFAULT_OPTIONS = new InjectionToken('kbq-sidepanel-default-options');
+/**
+ * Coerces a raw persisted payload into a `KbqSidepanelState`, returning `null` for anything
+ * unrecognizable.
+ *
+ * Web storage is origin-wide and user-writable, so a payload is never trusted — without this, a
+ * hand-edited entry would decide whether a sidepanel opens.
+ */
+const normalizeSidepanelState = (parsed) => {
+    const opened = parsed?.opened;
+    return typeof opened === 'boolean' ? { opened } : null;
+};
+/**
+ * What `KbqStateSavingService` reports for one persisted sidepanel key.
+ *
+ * The five components that persist register themselves, and a sidepanel has nothing to register: it is
+ * closed exactly when its entry matters, and while open it lives in an overlay with no stable position
+ * to be identified by. So the service stands in for it, and `host` stays `null`.
+ */
+class KbqSidepanelStateSavingRef {
+    constructor(key, store) {
+        this.key = key;
+        this.store = store;
+        this.name = 'kbq-sidepanel';
+        this.host = null;
+        /** Persistence is opted into by supplying a `stateSavingKey`, so a tracked key is always enabled. */
+        this.enabled = true;
+        this.state = null;
+    }
+    clear() {
+        this.store.removeState(this.key);
+        this.state = null;
+    }
+}
+/** Copies the entries that carry a value, so an unset optional does not overwrite a default with `undefined`. */
+const assignDefined = (target, source) => {
+    if (!source)
+        return;
+    for (const key of Object.keys(source)) {
+        if (source[key] !== undefined) {
+            target[key] = source[key];
+        }
+    }
+};
 class KbqSidepanelService {
     constructor() {
         this.overlay = inject(Overlay);
+        this.overlayContainer = inject(OverlayContainer);
         this.injector = inject(Injector);
         this.defaultOptions = inject(KBQ_SIDEPANEL_DEFAULT_OPTIONS, { optional: true });
         this.parentSidepanelService = inject(KbqSidepanelService, { optional: true, skipSelf: true });
+        /** Sidepanels opened through this very instance, closed when this injector level is destroyed. */
         this.openedSidepanelsAtThisLevel = [];
+        /** The shared stack. Only the root-most instance ever holds it; the rest reach it through the getter. */
+        this.rootOpenedSidepanels = [];
+        /** Sidepanels that hid the rest of the page from assistive technology when they opened. */
+        this.modalSidepanels = new Set();
+        /** Elements outside the overlay container that were hidden from assistive technology, and their previous state. */
+        this.ariaHiddenElements = new Map();
+        this.stateStore = inject(KBQ_STATE_STORE);
+        this.stateSavingService = inject(KbqStateSavingService);
+        /**
+         * One entry per `stateSavingKey` this service has seen, so `KbqStateSavingService` reports what is
+         * stored as claimed. Without it a closed sidepanel's entry has nothing live behind it, and
+         * `clearOrphans()` would sweep away exactly what the next visit is meant to restore.
+         */
+        this.stateSavingRefs = new Map();
+        this.bulkClosedAtThisLevel = new WeakSet();
     }
     /** Keeps track of the currently-open sidepanels. */
     get openedSidepanels() {
-        return this.parentSidepanelService
-            ? this.parentSidepanelService.openedSidepanels
-            : this.openedSidepanelsAtThisLevel;
+        return this.parentSidepanelService ? this.parentSidepanelService.openedSidepanels : this.rootOpenedSidepanels;
+    }
+    /** The instance holding the shared stack and the assistive-technology bookkeeping. */
+    get rootService() {
+        return this.parentSidepanelService?.rootService ?? this;
+    }
+    /**
+     * The sidepanels being closed as a group rather than one at a time, whose close is not recorded.
+     *
+     * Shared up the chain like `openedSidepanels`: `closeAll()` reaches panels another instance opened,
+     * and it is that instance's subscription that would record the close.
+     */
+    get bulkClosed() {
+        return this.parentSidepanelService ? this.parentSidepanelService.bulkClosed : this.bulkClosedAtThisLevel;
     }
     ngOnDestroy() {
-        // Only close the sidepanels at this level on destroy
+        // Only close the sidepanels opened at this level on destroy,
         // since the parent service may still be active.
         this.closeSidepanels(this.openedSidepanelsAtThisLevel);
+        // The bookkeeping is shared, so only the instance that owns it may drop it: a child level going
+        // away must not reveal the page under a modal sidepanel opened somewhere else.
+        if (this.rootService === this) {
+            this.restoreContentForAssistiveTechnology();
+        }
+        this.stateSavingRefs.forEach((ref) => this.stateSavingService.unregister(ref));
+        this.stateSavingRefs.clear();
     }
     open(componentOrTemplateRef, config) {
-        const fullConfig = {
-            ...(this.defaultOptions || new KbqSidepanelConfig()),
-            ...config
-        };
+        // Untracked, as `KbqSidepanelRef.close()`: called from a consumer's `effect()`, the state of the sidepanels
+        // already open, read and written on the way, would make the effect run again — and open another sidepanel —
+        // as soon as it changes.
+        return untracked(() => this.openSidepanel(componentOrTemplateRef, config));
+    }
+    /** Body of `open()`. */
+    openSidepanel(componentOrTemplateRef, config) {
+        const fullConfig = new KbqSidepanelConfig();
+        assignDefined(fullConfig, this.defaultOptions);
+        assignDefined(fullConfig, config);
         if (fullConfig.id && this.getSidepanelById(fullConfig.id)) {
             throw Error(`Sidepanel with id "${fullConfig.id}" exists already. The sidepanel id must be unique.`);
         }
+        if (isDevMode() && fullConfig.stateSavingKey && this.isStateSavingKeyInUse(fullConfig.stateSavingKey)) {
+            // eslint-disable-next-line no-console
+            console.warn(`kbq-sidepanel: another open sidepanel already persists under the state saving key ` +
+                `"${fullConfig.stateSavingKey}". They share one entry, so closing either records the ` +
+                'panel as closed. Give each one its own key.');
+        }
         const overlayRef = this.createOverlay(fullConfig);
-        overlayRef.hostElement.classList.add('kbq-sidepanel-overlay');
         const container = this.attachContainer(overlayRef, fullConfig);
         const ref = new KbqSidepanelRef(container, overlayRef, fullConfig);
         if (componentOrTemplateRef instanceof TemplateRef) {
-            container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
-                $implicit: fullConfig.data,
-                sidepanelRef: ref
-            }, this.createInjector(fullConfig, ref, container)));
+            container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { $implicit: fullConfig.data, sidepanelRef: ref }, this.createInjector(fullConfig, ref, container)));
         }
         else {
             const portal = new ComponentPortal(componentOrTemplateRef, undefined, this.createInjector(fullConfig, ref, container));
@@ -359,19 +756,76 @@ class KbqSidepanelService {
             ref.instance = contentRef.instance;
         }
         this.openedSidepanels.push(ref);
+        this.openedSidepanelsAtThisLevel.push(ref);
+        // The panel that was on top until now has to give the strip up, or the stack shows one per level.
+        this.updateIndents(fullConfig);
+        if (container.trapFocus) {
+            this.rootService.hideContentFromAssistiveTechnology(ref);
+        }
         ref.beforeClosed().subscribe(() => this.updateAnimationState(ref));
-        ref.afterClosed().subscribe(() => this.removeOpenSidepanel(ref));
+        ref.afterClosed().subscribe(() => {
+            this.removeOpenSidepanel(ref);
+            // A group close is the owner going away rather than a decision to close this panel, and
+            // keeping the flag is what lets the next visit bring the panel back.
+            if (!this.bulkClosed.has(ref)) {
+                this.writeState(fullConfig.stateSavingKey, false);
+            }
+        });
+        this.writeState(fullConfig.stateSavingKey, true);
         container.enter();
         return ref;
     }
     /**
      * Closes all of the currently-open sidepanels.
+     *
+     * Closing as a group is not recorded — see `wasOpen()`.
      */
     closeAll() {
         this.closeSidepanels(this.openedSidepanels);
     }
+    /**
+     * Whether the sidepanel persisted under `key` was open when it was last recorded, so the
+     * application can open it again:
+     *
+     * ```ts
+     * if (sidepanel.wasOpen('filters')) this.openFilters();
+     * ```
+     *
+     * A sidepanel cannot restore itself the way the components that persist do. It exists only while it
+     * is open, so at the point the state would be read there is nothing left to read it — and what to
+     * reopen is a component class or a `TemplateRef` and its `data`, none of which survives being
+     * written to storage. This service keeps the flag; the application keeps the rest.
+     *
+     * What is recorded is a sidepanel opened and closed on its own. Closing a group — `closeAll()`, or
+     * this service being destroyed — leaves the flag alone, so a panel that was open when the page went
+     * away comes back whether the page was reloaded or navigated away from.
+     *
+     * Reading claims the key: from here on `KbqStateSavingService` reports the entry as this service's
+     * rather than orphaned. It has to happen on read, because for a sidepanel that is not open this is
+     * the only call there is.
+     */
+    wasOpen(key) {
+        if (!key || !this.stateSavingService.isEnabled())
+            return false;
+        const state = normalizeSidepanelState(this.stateStore.getState(key));
+        this.trackState(key, state);
+        return state?.opened ?? false;
+    }
+    /**
+     * Removes what is persisted under `key`.
+     *
+     * Persistence itself stays on: a sidepanel opened under that key again is recorded again.
+     */
+    clearSavedState(key) {
+        if (!key)
+            return;
+        this.stateStore.removeState(key);
+        this.stateSavingRefs.get(key)?.clear();
+        this.stateSavingService.notify();
+    }
     /**
      * Finds an open sidepanel by its id.
+     *
      * @param id ID to use when looking up the sidepanel.
      */
     getSidepanelById(id) {
@@ -400,6 +854,7 @@ class KbqSidepanelService {
     /**
      * Creates a custom injector to be used inside the sidepanel. This allows a component loaded inside
      * of a sidepanel to close itself and, optionally, to return a value.
+     *
      * @param config Config object that is used to construct the sidepanel.
      * @param sidepanelRef Reference to the sidepanel.
      * @param sidepanelContainer Sidepanel container element that wraps all of the contents.
@@ -421,6 +876,7 @@ class KbqSidepanelService {
     }
     /**
      * Creates a new overlay and places it in the correct location.
+     *
      * @param config The user-specified sidepanel config.
      */
     createOverlay(config) {
@@ -429,14 +885,69 @@ class KbqSidepanelService {
             backdropClass: '',
             maxWidth: '100%',
             panelClass: config.overlayPanelClass,
-            scrollStrategy: this.overlay.scrollStrategies.block(),
+            scrollStrategy: this.resolveScrollStrategy(config),
             positionStrategy: this.overlay.position().global()
         });
         return this.overlay.create(overlayConfig);
     }
+    /**
+     * `block()` pins the document with `position: fixed`, which is exactly what the non-modal mode
+     * promises not to do, so only a backdropped sidepanel gets it.
+     */
+    resolveScrollStrategy(config) {
+        if (config.scrollStrategy)
+            return config.scrollStrategy();
+        return config.hasBackdrop ? this.overlay.scrollStrategies.block() : this.overlay.scrollStrategies.reposition();
+    }
+    /**
+     * `BlockScrollStrategy` refuses to engage while the page is already blocked, so in a stack the block
+     * belongs to the bottom-most backdropped sidepanel and has to be handed over when that one closes.
+     *
+     * @param closedIndex Index the closed sidepanel held in the stack, before it was removed.
+     */
+    restoreScrollBlock(closedConfig, closedIndex) {
+        if (!closedConfig.hasBackdrop)
+            return;
+        const ownerIndex = this.openedSidepanels.findIndex(({ config }) => config.hasBackdrop);
+        // A backdropped sidepanel that was already below the closed one still holds the block. Re-applying
+        // the strategy there would release and re-take the page, scrolling it twice for nothing.
+        if (ownerIndex === -1 || ownerIndex < closedIndex)
+            return;
+        const owner = this.openedSidepanels[ownerIndex];
+        owner.overlayRef.updateScrollStrategy(this.resolveScrollStrategy(owner.config));
+    }
     closeSidepanels(sidepanels) {
-        const reversedOpenedSidepanels = [...sidepanels.reverse()];
-        reversedOpenedSidepanels.forEach((sidepanelRef) => sidepanelRef.close());
+        // `reverse()` mutates, and this is called with the live stack.
+        [...sidepanels].reverse().forEach((sidepanelRef) => {
+            // Marked before closing rather than around the loop: `afterClosed()` only fires once the exit
+            // animation is done, by which time a flag held for the duration of this call would be gone.
+            this.bulkClosed.add(sidepanelRef);
+            sidepanelRef.close();
+        });
+    }
+    /** Whether an already-open sidepanel persists under this key. */
+    isStateSavingKeyInUse(key) {
+        return this.openedSidepanels.some((ref) => ref.config.stateSavingKey === key);
+    }
+    /** Records whether the sidepanel persisting under `key` is open. A sidepanel without a key is not. */
+    writeState(key, opened) {
+        if (!key || !this.stateSavingService.isEnabled())
+            return;
+        const state = { opened };
+        this.stateStore.setState(key, state);
+        this.trackState(key, state);
+        // The write does not go through `KbqStateSavingService`, so it would otherwise go unreported.
+        this.stateSavingService.notify();
+    }
+    /** Reports the key to `KbqStateSavingService`, registering it the first time it is seen. */
+    trackState(key, state) {
+        let ref = this.stateSavingRefs.get(key);
+        if (!ref) {
+            ref = new KbqSidepanelStateSavingRef(key, this.stateStore);
+            this.stateSavingRefs.set(key, ref);
+            this.stateSavingService.register(ref);
+        }
+        ref.state = state;
     }
     getOpenedSidepanelsWithSamePosition(config) {
         return this.openedSidepanels.filter((sidepanelRef) => sidepanelRef.config.position === config.position);
@@ -459,215 +970,103 @@ class KbqSidepanelService {
      */
     setAnimationState(sidepanelRef, state) {
         const containerInstance = sidepanelRef?.containerInstance;
-        if (!containerInstance || containerInstance.animationState === KbqSidepanelAnimationState.Hidden)
+        if (!containerInstance || containerInstance.animationState() === KbqSidepanelAnimationState.Hidden)
             return;
         containerInstance.setAnimationState(state);
     }
     /**
      * Removes a sidepanel from the array of open sidepanels.
+     *
      * @param sidepanelRef Sidepanel to be removed.
      */
     removeOpenSidepanel(sidepanelRef) {
+        const levelIndex = this.openedSidepanelsAtThisLevel.indexOf(sidepanelRef);
+        if (levelIndex > -1) {
+            this.openedSidepanelsAtThisLevel.splice(levelIndex, 1);
+        }
         const index = this.openedSidepanels.indexOf(sidepanelRef);
         if (index > -1) {
             const [lower] = this.getLowerSidepanelsWithSamePosition(index);
             this.setAnimationState(lower, KbqSidepanelAnimationState.Visible);
             this.openedSidepanels.splice(index, 1);
+            this.updateIndents(sidepanelRef.config);
+            this.restoreScrollBlock(sidepanelRef.config, index);
         }
+        this.rootService.revealContentForAssistiveTechnology(sidepanelRef);
     }
-    getLowerSidepanelsWithSamePosition(index) {
-        const openedSidepanelsWithSamePosition = this.getOpenedSidepanelsWithSamePosition(this.openedSidepanels[index].config);
-        return [
-            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 2],
-            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 3]
-        ];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Button that will close the current sidepanel.
- */
-class KbqSidepanelClose {
-    constructor() {
-        this.sidepanelRef = inject(KbqSidepanelRef, { optional: true });
-        this.elementRef = inject(ElementRef);
-        this.sidepanelService = inject(KbqSidepanelService);
-        this.renderer = inject(Renderer2);
-        this.kbqSidepanelClose = input(...(ngDevMode ? [undefined, { debugName: "kbqSidepanelClose" }] : []));
+    /**
+     * Only the top sidepanel of a position stack carries the indent, however deep the stack is — the strip
+     * is what reveals the panel underneath, and one per level is the visual noise the docs rule out.
+     *
+     * The flag belongs to the stack rather than to the panel that had one when it opened, so it is
+     * recomputed on both ends: opening demotes the panel that was on top, and closing a *lower* sidepanel
+     * would otherwise leave the top one exposing a strip of a panel that is no longer there.
+     */
+    updateIndents(config) {
+        const stack = this.getOpenedSidepanelsWithSamePosition(config);
+        stack.forEach((sidepanelRef, index) => sidepanelRef.containerInstance.setWithIndent(stack.length > 1 && index === stack.length - 1));
     }
-    ngOnInit() {
-        // A button with no type submits the form it sits in, so closing a sidepanel from inside a form would
-        // submit it too. A type the author set is left alone.
-        if (!this.elementRef.nativeElement.hasAttribute('type')) {
-            this.renderer.setAttribute(this.elementRef.nativeElement, 'type', 'button');
-        }
-        if (!this.sidepanelRef) {
-            // When this directive is included in a sidepanel via TemplateRef (rather than being
-            // in a Component), the SidepanelRef isn't available via injection because embedded
-            // views cannot be given a custom injector. Instead, we look up the SidepanelRef by
-            // ID.
-            // This must occur in `onInit`, as the ID binding for the sidepanel container won't
-            // be resolved at constructor time. We use setTimeout by same reason.
-            setTimeout(() => {
-                this.sidepanelRef = getClosestSidepanel(this.elementRef, this.sidepanelService.openedSidepanels);
-            });
+    /**
+     * A focus trap constrains Tab, not the virtual cursor, so everything outside the overlay stays
+     * reachable to a screen reader while a modal sidepanel is open unless it is hidden explicitly.
+     */
+    hideContentFromAssistiveTechnology(sidepanelRef) {
+        const firstModal = this.modalSidepanels.size === 0;
+        this.modalSidepanels.add(sidepanelRef);
+        if (!firstModal)
+            return;
+        const overlayContainerElement = this.overlayContainer.getContainerElement();
+        const siblings = overlayContainerElement.parentElement?.children;
+        if (!siblings)
+            return;
+        for (let i = siblings.length - 1; i > -1; i--) {
+            const sibling = siblings[i];
+            if (sibling === overlayContainerElement ||
+                sibling.nodeName === 'SCRIPT' ||
+                sibling.nodeName === 'STYLE' ||
+                sibling.hasAttribute('aria-live')) {
+                continue;
+            }
+            this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
+            sibling.setAttribute('aria-hidden', 'true');
         }
     }
-    ngOnChanges(changes) {
-        const proxiedChange = changes.kbqSidepanelClose || changes.sidepanelResult;
-        if (proxiedChange) {
-            this.sidepanelResult = proxiedChange.currentValue;
+    revealContentForAssistiveTechnology(sidepanelRef) {
+        this.modalSidepanels.delete(sidepanelRef);
+        if (this.modalSidepanels.size === 0) {
+            this.restoreContentForAssistiveTechnology();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSidepanelClose, isStandalone: true, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: { sidepanelResult: { classPropertyName: "sidepanelResult", publicName: "kbq-sidepanel-close", isSignal: false, isRequired: false, transformFunction: null }, kbqSidepanelClose: { classPropertyName: "kbqSidepanelClose", publicName: "kbqSidepanelClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "sidepanelRef.close(sidepanelResult)" }, classAttribute: "kbq-sidepanel-close" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelClose, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[kbq-sidepanel-close], button[kbqSidepanelClose]',
-                    host: {
-                        class: 'kbq-sidepanel-close',
-                        '(click)': 'sidepanelRef.close(sidepanelResult)'
-                    }
-                }]
-        }], propDecorators: { sidepanelResult: [{
-                type: Input,
-                args: ['kbq-sidepanel-close']
-            }], kbqSidepanelClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSidepanelClose", required: false }] }] } });
-/**
- * Header of a sidepanel.
- */
-class KbqSidepanelHeader {
-    constructor() {
-        /** Add button for close sidepanel. Default false */
-        this.closeable = input(false, ...(ngDevMode ? [{ debugName: "closeable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** Enables text truncation. Default true */
-        this.truncateText = input(true, ...(ngDevMode ? [{ debugName: "truncateText", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @docs-private */
-        this.sidepanelRef = inject(KbqSidepanelRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqSidepanelHeader, isStandalone: true, selector: "kbq-sidepanel-header", inputs: { closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-sidepanel-header_truncate-text": "truncateText()", "style.box-shadow": "sidepanelRef.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-sidepanel-header" }, ngImport: i0, template: `
-        <div class="kbq-sidepanel-title" kbq-title>
-            <ng-content />
-        </div>
-
-        @if (closeable()) {
-            <button kbq-button kbq-sidepanel-close type="button" [color]="'contrast'" [kbqStyle]="'transparent'">
-                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
-            </button>
-        }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqSidepanelClose, selector: "button[kbq-sidepanel-close], button[kbqSidepanelClose]", inputs: ["kbq-sidepanel-close", "kbqSidepanelClose"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelHeader, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kbq-sidepanel-header',
-                    imports: [
-                        KbqButtonModule,
-                        KbqSidepanelClose,
-                        KbqIconModule,
-                        KbqTitleDirective
-                    ],
-                    template: `
-        <div class="kbq-sidepanel-title" kbq-title>
-            <ng-content />
-        </div>
-
-        @if (closeable()) {
-            <button kbq-button kbq-sidepanel-close type="button" [color]="'contrast'" [kbqStyle]="'transparent'">
-                <i kbq-icon="kbq-xmark_16" [color]="'contrast'"></i>
-            </button>
-        }
-    `,
-                    host: {
-                        class: 'kbq-sidepanel-header',
-                        '[class.kbq-sidepanel-header_truncate-text]': 'truncateText()',
-                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
-                    }
-                }]
-        }], propDecorators: { closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
-/**
- * Scrollable content container of a sidepanel.
- */
-class KbqSidepanelBody {
-    constructor() {
-        this.sidepanelRef = inject(KbqSidepanelRef);
-        this.overflowContainer = inject(KbqOverflowShadowContainer);
-        effect(() => this.sidepanelRef.bodyOverflow.set(this.overflowContainer.overflow()));
+    restoreContentForAssistiveTechnology() {
+        this.ariaHiddenElements.forEach((previousValue, element) => {
+            if (previousValue === null) {
+                element.removeAttribute('aria-hidden');
+            }
+            else {
+                element.setAttribute('aria-hidden', previousValue);
+            }
+        });
+        this.ariaHiddenElements.clear();
+        this.modalSidepanels.clear();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelBody, isStandalone: true, selector: "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", host: { classAttribute: "kbq-sidepanel-body kbq-scrollbar" }, hostDirectives: [{ directive: i3.KbqOverflowShadowContainer }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelBody, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody',
-                    host: {
-                        class: 'kbq-sidepanel-body kbq-scrollbar'
-                    },
-                    hostDirectives: [KbqOverflowShadowContainer]
-                }]
-        }], ctorParameters: () => [] });
-/**
- * Footer of a sidepanel.
- */
-class KbqSidepanelFooter {
-    constructor() {
-        /** @docs-private */
-        this.sidepanelRef = inject(KbqSidepanelRef);
+    getLowerSidepanelsWithSamePosition(index) {
+        const openedSidepanelsWithSamePosition = this.getOpenedSidepanelsWithSamePosition(this.openedSidepanels[index].config);
+        return [
+            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 2],
+            openedSidepanelsWithSamePosition[openedSidepanelsWithSamePosition.length - 3]
+        ];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelFooter, isStandalone: true, selector: "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", host: { properties: { "style.box-shadow": "sidepanelRef.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-sidepanel-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelFooter, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter',
-                    host: {
-                        class: 'kbq-sidepanel-footer',
-                        '[style.box-shadow]': 'sidepanelRef.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
-                    }
-                }]
-        }] });
-/**
- * Actions block of a sidepanel footer.
- */
-class KbqSidepanelActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqSidepanelActions, isStandalone: true, selector: "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", host: { classAttribute: "kbq-sidepanel-actions" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelActions, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions',
-                    host: {
-                        class: 'kbq-sidepanel-actions'
-                    }
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
-/**
- * Finds the closest KbqSidepanelRef to an element by looking at the DOM.
- * @param element Element relative to which to look for a sidepanel.
- * @param openSidepanels References to the currently-open sidepanels.
- */
-function getClosestSidepanel(element, openSidepanels) {
-    let parent = element.nativeElement.parentElement;
-    while (parent && !parent.classList.contains('kbq-sidepanel-container')) {
-        parent = parent.parentElement;
-    }
-    return parent ? openSidepanels.find((sidepanel) => sidepanel.id === parent.id) : null;
-}
 
 class KbqSidepanelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, imports: [OverlayModule,
             PortalModule,
             KbqButtonModule,
             KbqIconModule,
@@ -684,10 +1083,7 @@ class KbqSidepanelModule {
             KbqSidepanelBody,
             KbqSidepanelFooter,
             KbqSidepanelActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, providers: [
-            KbqSidepanelService,
-            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
-        ], imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, providers: [KbqSidepanelService], imports: [OverlayModule,
             PortalModule,
             KbqButtonModule,
             KbqIconModule,
@@ -695,7 +1091,7 @@ class KbqSidepanelModule {
             A11yModule,
             KbqSidepanelHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSidepanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSidepanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -712,10 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqSidepanelFooter,
                         KbqSidepanelActions
                     ],
-                    providers: [
-                        KbqSidepanelService,
-                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
-                    ],
+                    providers: [KbqSidepanelService],
                     exports: [
                         KbqSidepanelContainerComponent,
                         KbqSidepanelClose,